'Increasing text size' problem in FireFox

In IE, the text won't overlap but in Firefox it does...

[nightva]

Hi all,

I'm using basic HTML text in my nav bar that should be resizable. When I resize in FireFox, the text overlaps after a certain size.

Is this a browser or CSS issue? Any ideas how I can keep it from happening?

Thanks!

Nathan

[mincklerstraat]

I believe the correct default behavior (according to specs) is for the text to extend outside of the container (or overlap like you say) when the container is too small to contain it. You can look at the css overflow properties to control this, or just modify the navigation bar so it doesn't use absolute height and widths, but ones in terms of em (which size it according to your font size) and will make it bigger when the text gets bigger. This is pretty difficult, though, when you're doing very precise designing and other elements are absolutely sized.

On the other hand, I usually expect navigational elements to start looking funky when I resize texts in sites I visit - likely many of your users will be like me, realizing that the format looks best in the default size. As long as things look ok with not too much resizing, things are ok. If you use fonts that are large enough, you won't have to worry too much about most users resizing your text - I usually try to make things fit for about 2+ resizing.

[nightva]

Thank you.

That was exactly what I needed.

I set the font to 13px in the body tag then reset it to 1em in the main navigation div. That worked great. And it looks cleaner on the text resizing.

Thanks for taking the time.

Nathan