FireFox Rendering Issue/Display Problems

[MLBdesigner]

I'm using Dreamweaver 8.0.2 to generate my site. I use both tables and layers.

PROBLEM: Some subset of my site visitors which use FireFox 2.0.0.7 see text that is significantly out of place.

I can duplicate this problem only on my Dell laptop - and it appears across all screen resolutions - but only with FireFox. [Site displays fine with IE6, IE7, and Safari.] I have updated the video driver - so I do not (necessarily) believe it is a driver issue.

Here are exact illustrations of the problem:

1) Layers showing up as misplaced. If you view this URL from the test folder of my site using FireFox 2.0.0.7 (or earlier), and the "Home News Midlife Dating Articles ... etc." overlap or look messed up, then you are seeing what I call the LAYERS ISSUE.

http://www.midlifebachelor.com/test/betahometop.html

2) Table placement issue. If you go this URL (in the live part of the site) in FireFox 2.0.0.7 (or earlier), if you are experiencing the issue I am trying to describe, you will notice that the Section Index on the right is significantly (like an inch or more) over to the right ... instead of right next to the main body of the text. When I say "right next to", it should be like 1/8-inch to the right ... not an inch or more to the right. [You can also look at the very bottom of the page, and see a second illustration of the LAYERS ISSUE, too.]

http://www.midlifebachelor.com/truths/truths-ft9.html

These issues only show up in a FireFox browser, and not IE6, IE7, or Safari - and only on some monitors. On my laptop, I can see this FireFox issue no matter what screen resolution I set the display to. I can tweek each page so that it does look right in FireFox on these problem displays ... but at the expense of having really tight content across the other browsers.

Does anyone know how to solve this?

Greg

P.S. I hit the TAB key half-way through this message, and originally submitted it before I was done. Grrrrrr ;o)

[Newsgroup_User]

First and most importantly, I wouldn't recommend your approach as the proper
one for this layout at all. Increasing the text size in the browser creates
chaos in your horizontal menu, which is caused by the placement of text into
absolutely positioned elements (layers).

If it were up to me, I would say to discard this layout scheme completely -
it is already beyond repair.

Consider this markup for your page - I have commented out all of your CSS
(well, most of it), and removed all of your absolute positioning. I have
added a few inline styles in the tags, and a few embedded styles in the head
of the page. Would you say that this is simpler markup?

http://murraytestsite.com/midlifebatchelor.html

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"MLBdesigner" <webforumsuser@macromedia.com> wrote in message
news:fdtuhj$236$1@forums.macromedia.com...
> I'm using Dreamweaver 8.0.2 to generate my site. I use both tables and
> layers.
>
>
> PROBLEM: Some subset of my site visitors which use FireFox 2.0.0.7 see
> text
> that is significantly out of place.
>
> I can duplicate this problem only on my Dell laptop - and it appears
> across
> all screen resolutions - but only with FireFox. [Site displays fine with
> IE6,
> IE7, and Safari.] I have updated the video driver - so I do not
> (necessarily) believe it is a driver issue.
>
> Here are exact illustrations of the problem:
>
> 1) Layers showing up as misplaced. If you view this URL from the test
> folder
> of my site using FireFox 2.0.0.7 (or earlier), and the "Home News
> Midlife
> Dating Articles ... etc." overlap or look messed up, then you are seeing
> what I
> call the LAYERS ISSUE.
>
> http://www.midlifebachelor.com/test/betahometop.html
>
>
>

[MLBdesigner]

Hi Murray,

First of all - I thank you for responding! However, this issue continues to stump me. I took a look at what you put together, and it has several issues that (if at all possible) I would appreciate you or someone else commenting on. [Or for someone to suggest yet a different solution altogether.]

1) The placement problem under FireFox [item 1) in my original message] still occurs using your solution on some hi-res monitors (like my laptop) - just not as badly. For example, the links from your version for "Discussion Forums" and "Reader Feedback" bleed together, and "Women's View" has a gap in the center row.

2) Using your approach, the betahometop actually looks DIFFERENT in the different browsers, depending on which browser and display I am using. For example, on my desktop - they all do look the same ... which is identical to my own current solution. On my laptop (with the hi-res display FireFox issue I originally described), FireFox still somewhat has the overlapping text issue [1) immediately above], plus IE7 has a one-line gap between "Your Midlife" and "Crisis" ... while Safari and FireFox do not.

In other words, using your solution - I seem to have less uniformity in terms of appearance across the different browsers and displays.

The other thing to mention is that I DO want absolute positioning for all the menu items across the top, and also for the google search bar, and the 468x60 ad ... the way you have those setup in your solution, they wrap around according to the vertical width of the browser.

After I posted my original message, I continued to dig around, and found this thread on webdeveloper.com:

http://www.webdeveloper.com/forum/showthread.php?t=116620

and studied the link that was suggested to that user for adjusting his DTD:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

I tried various combinations (hoping it was just a DTD issue), but nothing cured the problem. Not sure if anyone would like to comment on whether the DTD would solve my problem, or not - as I came up empty.

You do have me thinking about the effect of text size on everything - which had not occurred to me previously. I suppose I either need to plan for increasing/descreasing text size, or specifically decide not to support it.

I'm pretty much a novice at all of this - so please feel free to point out any ignorance I may be exhibiting. Thanks to anyone who can help me ... ;o)

Greg

[Newsgroup_User]

This is not a doctype problem. It is a basic method problem.

Your method is just not the right one. Why? Because any resizing of text
will cause the content in the absolutely positioned elements to OVERFLOW the
contents below them. That is why, with the 5-minute page I posted, when you
resize the text, the content below is pushed down. There is no absolute
positioning there. HOWEVER, the page I posted is not the finished version
either - resizing the text causes horizontal overflow, and that's because I
had to give each menu element an assigned width. When the contents are
larger than can be accommodated by that width, they overflow. The right way
to manage that is a bit more complex, and would involve using both text and
images for that menu.

To fix the horizontal overflow problem, you would set the menu up as an
unordered list. You would float:left the list elements as I have done, and
remove the bullets using CSS. Then you would give each list element its own
background image that is a graphic of the text for that link. Now you have
an anchor in the list element that contains the same text for that link, but
you indent that <a> tag's contents -1000px left. Thus, the text is not
seen, and the background image is. Now you can resize your text till the
cows come home and the menu will be unaffected.

> the way you have those setup in your solution, they wrap around
> according to the vertical width of the browser.

That's easy to fix by putting each of those elements within a fixed width
container. Now the contents are unaffected by the horizontal browser
viewport dimensions.

Make sense?

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"MLBdesigner" <webforumsuser@macromedia.com> wrote in message
news:fe0dub$gv9$1@forums.macromedia.com...
> Hi Murray,
>
> First of all - I thank you for responding! However, this issue continues
> to
> stump me. I took a look at what you put together, and it has several
> issues
> that (if at all possible) I would appreciate you or someone else
> commenting on.
> [Or for someone to suggest yet a different solution altogether.]
>
> 1) The placement problem under FireFox [item 1) in my original message]
> still
> occurs using your solution on some hi-res monitors (like my laptop) - just
> not
> as badly. For example, the links from your version for "Discussion
> Forums" and
> "Reader Feedback" bleed together, and "Women's View" has a gap in the
> center
> row.
>
> 2) Using your approach, the betahometop actually looks DIFFERENT in the
> different browsers, depending on which browser and display I am using.
> For
> example, on my desktop - they all do look the same ... which is identical
> to my
> own current solution. On my laptop (with the hi-res display FireFox
> issue I
> originally described), FireFox still somewhat has the overlapping text
> issue
> [1) immediately above], plus IE7 has a one-line gap between "Your Midlife"
> and
> "Crisis" ... while Safari and FireFox do not.
>
> In other words, using your solution - I seem to have less uniformity in
> terms
> of appearance across the different browsers and displays.
>
> The other thing to mention is that I DO want absolute positioning for all
> the
> menu items across the top, and also for the google search bar, and the
> 468x60
> ad ... the way you have those setup in your solution, they wrap around
> according to the vertical width of the browser.
>
> After I posted my original message, I continued to dig around, and found
> this
> thread on webdeveloper.com:
>
> http://www.webdeveloper.com/forum/showthread.php?t=116620
>
> and studied the link that was suggested to that user for adjusting his
> DTD:
>
> http://www.w3.org/QA/2002/04/valid-dtd-list.html
>
> I tried various combinations (hoping it was just a DTD issue), but nothing
> cured the problem. Not sure if anyone would like to comment on whether
> the
> DTD would solve my problem, or not - as I came up empty.
>
> You do have me thinking about the effect of text size on everything -
> which
> had not occurred to me previously. I suppose I either need to plan for
> increasing/descreasing text size, or specifically decide not to support
> it.
>
> I'm pretty much a novice at all of this - so please feel free to point out
> any
> ignorance I may be exhibiting. Thanks to anyone who can help me ... ;o)
>
> Greg
>

[MLBdesigner]

Here is another observation from pure trial-and-error. The phenomena I am seeing using FireFox (only my laptop w/high-res display) is a function of FireFox TEXT SIZE.

If in FireFox I go to:

http://www.midlifebachelor.com/test/betahometop.html

and select View -> Text Size -> Normal

then the fonts on my Beta home page bleed into the 468x60 ad, and generally do not look right, etc. If I then select View-> Text Size -> Decrease, and do that TWICE, then it looks great ... just like normal in IE6, IE7, and Safari.

If I go to the second problem illustration, at this URL:

http://www.midlifebachelor.com/truths/truths-ft9.html

and select View -> Text Size -> Normal, then I get the big 1-inch (instead of 1/8-inch) gap between the center content column and the index on the right-hand side AND (if you look at the very bottom) I also get two misplaced layers (the one that starts out "Next >>> " and the Privacy/TOS message ... which show up higher than they are supposed to be, and overlapping the center content column. Selecting View -> Text Size -> Decrease once cures the content/index 1-inch gap problem, and selecting View -> Text Size -> Decrease a second time cures the misplaced bottom layers problem.

If I go to Murray's solution (at the test URL he references above):

http://murraytestsite.com/midlifebatchelor.html

then selecting View -> Text Size -> Decrease once, and his solution looks fine ... although it is unclear if a second such Text Size -> Decrease would be necessary if I had other vertical layers below.

So you might say that since I now know how to make it all look right, that I have solved the problem - no. FireFox won't seem to let me change the way these Dreamweaver-generated pages show up in terms of Text Size. In FireFox, I've tried going to: Tools -> Options -> , and then playing with the default font size ... and then hitting the "Advanced" tab, and playing with the default proportional and monospace default sizes ... and YES the box for "Allow pages to choose their own fonts, instead of my selections above" is checked. No matter what I still have to hit the View -> Text Size -> Decrease twice in order for the page in FireFox to look just like it does in IE7, IE6, and Safari.

Based on this new information, does anyone have any ideas how I can solve these issues via the code from Dreamweaver, or via some setting or combinations of default settings in FireFox?

Greg

[MLBdesigner]

Murray - we were typing at the same time, and I did not see your second response until after I hit the REPLY button. I'll check out what you said, and then let you know. In the meantime, if what I state immediately above makes any difference to what you are telling me - please let me know. THANK YOU!

Greg

[MLBdesigner]

Hi Murray,

It appears that what you are suggesting is a slightly more complex version of what I currently have up on the non-betahometop portion of the live part of my site. If you go to the current home page (www.midlifebachelor.com), you will see that instead of text-font menus - I actually have graphic buttons (rolloever images) ... which are really just images that contain text. The reason I planned to move away from that approach is that I want to be able to add/remove menu items (currently rollover images) without paying my graphics guy to create more buttons for me ... plus he is busy, and often takes weeks to get me what I need. Also - sometimes those buttons look a little odd on some displays/resolutions ... they are always where they are supposed to be, but sometimes they are a bit grainy. My thought was that text-based menu items would let the browser keep the menu items looking perfect ... but now I'm not sure if it is worth the tradeoff.

I did some fooling around with text size in the various browsers ... I hit www.nasdaq.com and a few other common ones. What I found is that changing the text size attribute to Bigger in FireFox or Safari jacks up the appearance of some fairly common website. In IE7, the Zoom feature seems to zoom everything - and the sites I checked out are fine. I guess what I'm getting at here is that it might be overly ambitious of me to take on a graceful handing of Text Size increases for my site. [My site strives for content glory - not code perfection ;o) ]

With the above as a backdrop, what do you think? Should I keep it the way it is now with menu items as rollover images? Or should I go down the path we have been discussing? What are your thoughts about what I learned above concerning playing with the FireFox text size attributes?

Again - if I'm being stupid, please work with me ... ignorance can be blissful ;o) Thanks again for any help or insight you can give me!

Greg

[Newsgroup_User]

> Based on this new information, does anyone have any ideas how I can solve
> these issues via the code from Dreamweaver, or via some setting or
> combinations
> of default settings in FireFox?

The only way is to use a layout method that is accommodating to these kinds
of web vagueries. Remember, no matter how you set *YOUR* browser, you will
not affect how others may have set their browser.

Your method is not accommodating at all. That's why I have said it's the
wrong way to go.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"MLBdesigner" <webforumsuser@macromedia.com> wrote in message
news:fe0ouh$stf$1@forums.macromedia.com...
> Here is another observation from pure trial-and-error. The phenomena I am
> seeing using FireFox (only my laptop w/high-res display) is a function of
> FireFox TEXT SIZE.
>
> If in FireFox I go to:
>
> http://www.midlifebachelor.com/test/betahometop.html
>
> and select View -> Text Size -> Normal
>
> then the fonts on my Beta home page bleed into the 468x60 ad, and
> generally do
> not look right, etc. If I then select View-> Text Size -> Decrease, and
> do
> that TWICE, then it looks great ... just like normal in IE6, IE7, and
> Safari.
>
> If I go to the second problem illustration, at this URL:
>
> http://www.midlifebachelor.com/truths/truths-ft9.html
>
> and select View -> Text Size -> Normal, then I get the big 1-inch (instead
> of
> 1/8-inch) gap between the center content column and the index on the
> right-hand
> side AND (if you look at the very bottom) I also get two misplaced layers
> (the
> one that starts out "Next >>> " and the Privacy/TOS message ... which show
> up
> higher than they are supposed to be, and overlapping the center content
> column.
> Selecting View -> Text Size -> Decrease once cures the content/index
> 1-inch gap
> problem, and selecting View -> Text Size -> Decrease a second time cures
> the
> misplaced bottom layers problem.
>
> If I go to Murray's solution (at the test URL he references above):
>
> http://murraytestsite.com/midlifebatchelor.html
>
> then selecting View -> Text Size -> Decrease once, and his solution looks
> fine
> ... although it is unclear if a second such Text Size -> Decrease would be
> necessary if I had other vertical layers below.
>
> So you might say that since I now know how to make it all look right, that
> I
> have solved the problem - no. FireFox won't seem to let me change the
> way
> these Dreamweaver-generated pages show up in terms of Text Size. In
> FireFox,
> I've tried going to: Tools -> Options -> , and then playing with the
> default
> font size ... and then hitting the "Advanced" tab, and playing with the
> default
> proportional and monospace default sizes ... and YES the box for "Allow
> pages
> to choose their own fonts, instead of my selections above" is checked.
> No
> matter what I still have to hit the View -> Text Size -> Decrease twice in
> order for the page in FireFox to look just like it does in IE7, IE6, and
> Safari.
>
> Based on this new information, does anyone have any ideas how I can solve
> these issues via the code from Dreamweaver, or via some setting or
> combinations
> of default settings in FireFox?
>
> Greg
>

[Newsgroup_User]

> What I found is that changing the
> text size attribute to Bigger in FireFox or Safari jacks up the appearance
> of
> some fairly common website.

Yes. Do you want yours to be among this list?

> that it might be overly ambitious of me to take on a graceful handing of
> Text
> Size increases for my site.

I don't think it's overly ambitious of you to strive for best practice,
however. That menu should be vertical not horizontal - this would solve
quite a few of your problems.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================


"MLBdesigner" <webforumsuser@macromedia.com> wrote in message
news:fe0q8h$15u$1@forums.macromedia.com...
> Hi Murray,
>
> It appears that what you are suggesting is a slightly more complex version
> of
> what I currently have up on the non-betahometop portion of the live part
> of my
> site. If you go to the current home page (www.midlifebachelor.com), you
> will
> see that instead of text-font menus - I actually have graphic buttons
> (rolloever images) ... which are really just images that contain text.
> The
> reason I planned to move away from that approach is that I want to be able
> to
> add/remove menu items (currently rollover images) without paying my
> graphics
> guy to create more buttons for me ... plus he is busy, and often takes
> weeks to
> get me what I need. Also - sometimes those buttons look a little odd on
> some
> displays/resolutions ... they are always where they are supposed to be,
> but
> sometimes they are a bit grainy. My thought was that text-based menu
> items
> would let the browser keep the menu items looking perfect ... but now I'm
> not
> sure if it is worth the tradeoff.
>
> I did some fooling around with text size in the various browsers ... I hit
> www.nasdaq.com and a few other common ones. What I found is that
> changing the
> text size attribute to Bigger in FireFox or Safari jacks up the appearance
> of
> some fairly common website. In IE7, the Zoom feature seems to zoom
> everything
> - and the sites I checked out are fine. I guess what I'm getting at here
> is
> that it might be overly ambitious of me to take on a graceful handing of
> Text
> Size increases for my site. [My site strives for content glory - not
> code
> perfection ;o) ]
>
> With the above as a backdrop, what do you think? Should I keep it the way
> it
> is now with menu items as rollover images? Or should I go down the path
> we
> have been discussing? What are your thoughts about what I learned above
> concerning playing with the FireFox text size attributes?
>
> Again - if I'm being stupid, please work with me ... ignorance can be
> blissful ;o) Thanks again for any help or insight you can give me!
>
> Greg
>