How to fix page for browser text size changes

[dongares]

Ok, take a look at http://www.rivervalleylodgeandcampground.com . Everything looks pretty decent until I test it with a browser text size change (IE or Firefox) and then it messes it up some. If you increase the text size in Firefox you will notice that the navigation (sunset) image jumps up into the brown horizontal bar. How can I correct this problem.
Thanks and Merry Christmas,
Don

[Medyman]

I'm not getting that glitch (in IE at least). The thing I do notice is that your image and sample text run off the page. You might want to check the CSS ruling that division (maybe a fluid width instead of an absolute one).

[dongares]

I'm not getting that glitch (in IE at least). The thing I do notice is that your image and sample text run off the page. You might want to check the CSS ruling that division (maybe a fluid width instead of an absolute one).

For some unknown reason we are seeing different problems. I still see my original problem that I mentioned (yes, even in IE) but do not see my sample text and/or image running off the page. We will see what others have to say.

[BLiZZaRD]

It happens to me as well. I would remove all the text-size: codes from the CSS, unless for a special purpose, something very specific you don't want to use font-size. Instead you can use font-weight.

font-weight: 600; for example is a slightly bolder font than normal, but not blurry bold.

Also you have a lot of decimal px sizes. I would avoid that as well. Use em instead of px where you can. EM is the width of one character of that font size, so it pushes gracefully to edges. If you must use px, try to use whole numbers.

[dongares]

It happens to me as well. I would remove all the text-size: codes from the CSS, unless for a special purpose, something very specific you don't want to use font-size. Instead you can use font-weight.

font-weight: 600; for example is a slightly bolder font than normal, but not blurry bold.

Also you have a lot of decimal px sizes. I would avoid that as well. Use em instead of px where you can. EM is the width of one character of that font size, so it pushes gracefully to edges. If you must use px, try to use whole numbers.

You are definitely the man that I wanted to answer. OTOH, I did not really want to hear that the same thing happened to you. :)

The more I look at this problem the more interesting it gets. The 'Welcome' and 'Thanks for visiting, blah, blah, blah' text were intentionally set to a fixed pixel size so that a text size change in a browser would not enlarge them and drop the brown horizontal bar down into my navigation image. If you change text sizes in IE or Firefox and look closely you will see that only the background color, and not the background image or text, are changing in vertical size in H1 and thus dropping the brown bar down into my navigation image. Why is this happening? I though that a browser would only change the text size (except Opera).
Your comments would be appreciated,
Don

[BLiZZaRD]

You could try placing the text in it's own div. Like make a "wrapper" div with all the components in it, like positioning, padding, etc. and then put that outside the text div which holds the text sizes etc.



<div id="wrapper">
<div id="text">
text text text
</div>
</div>


I will have a closer look and a better idea once I get to my programming computer at home. :)