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.

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.]

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)

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?

"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>
>
>

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:

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)

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.

"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
>

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.

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.

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?

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!

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!

"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
>

"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
>