How to exclude some text from browser zoom

Question

Yes, I know this is probably a bad thing to want to do.

I have converted a web site to Drupal. I think I've done a reasonably good clean job with the markup and CSS starting with the Zen theme. All font sizes are set in em. It's a fixed width layout. That might be a bad decision but ... I basically copied the old site design.

The menu at is a nice horizontal ul inside a div. One of the users seems to be in the habit of increasing the text size by zooming with Firefox with "Zoom Text Only" checked or changing the text size in I.E. The problem is that the menu area is a fixed size so the right hand menu options drop off the end and disappear.

The old site seemed to have some magic or hack that avoided this. When zooming the text size, all text zooms except the menu. It stays the same. I've poked around with Firebug but haven't been able to find how they do it. The client would like the new site to behave the same way. That menu on the old site is a table so I wonder if tables are immune to the text resize.

Thanks for any suggestions.

Answer 1

Hi,

Please note that you are plenty free of changing Zen Theme, and you are right, it is magical. Plus, I used NiceMenus module who increased my menu handling capabilities, for example by adding a pull down menu. Just read carfully Zen Theme documentation and you will have what you want for sure.

If you need more information, don't hesitate posting a comment,

And this is NOT a bad thing what you want to do ;)

Hope this helps,

Answer 2

The reason the old site never zoomed is because he used images for the navigation. The two zooming functions you mention do not zoom-in on images, only pure text, so they stayed the same.

The problem with your current design is that you are using text (which is arguably the right way to go), but the parent div, #main, is fixed to a pixel width because your two columns inside of it are fixed pixel widths.

The truly ideal situation here would be to specify all of your layout's widths in em's instead of pixels. Then, if the users scales the font-sizes only, it also scales the layout. However, your background images won't support that. If you could forgo the shadows and use background colors instead, that might be a more flexible solution.