IE text resize overrides my font-size in css

hi im a newbie, just made my first site and im having this problem. I set font-size in pixels for a couple of my divs such as the footer, but in IE when I re-size text the text in these divs changes which is terrible because i used ems for positioning and some sizes so it messes the whole layout.

This is part of my CSS:

      ul {
	left: 30px;
	height: 55em;
	border-right: 2px solid #f90;
	padding-right: 60px;
	font-size: 16px;

This is the corresponding div and ul:

         <div id="navigation">
    	<li class="li1"><a href="deewane-info.html">Deewane</a></li>
        <li class="li2"><a href="partyservices.html">Party Services</a></li>
        <li class="li3"><a href="gallery.html">Gallery</a></li>
        <li class="li4"><a href="music.html">Music</a></li>
        <li class="li5"><a href="calender.html">Calender</a></li>
        <li class="li6"><a href="contactus.html">Contact Us</a></li>
      <div id="nav-s">
        <a href=""><img src="tfp.png" width="150px" height="150px" /></a>
        <br />
        <a href=""><img src="saphire.png" width="150px" height="150px" /></a>

I just want to know how I can stop IE from being able to resize the text. Thanks

The problem here is you’re thinking about this the entirely wrong way. You can’t and shouldn’t try and prevent Internet Explorer or ANY browser (for that matter) resizing the textual content - the reason for that function is to allow people who have visual difficulties (like short sightedness, blindness, et al) to be able to READ what’s on your website. Set your font size in EM’s (which is what EM was intended for - relative to font sizes) along with the elements of your layout (Don’t rely on fixed width or pixel based measurements unless you have to) it’ll scale fine) - if for example you did all your measurements for the layout in EM’s, everything would enlarge or shrink depending on the typeface (rather than overflowing because of a lack of space). :slight_smile:

I understand your point but what if I still want to? Is it possible?

No, for security and other reasons, web browsers do not allow you to override the physical functionality of the browser itself. Apart from the fact it would be intrusive and obtrusive, it would violate the end users machine (how it functions), it would violate the law (accessibility legislation - which preventing text resizing would be a deliberate attempt to discriminate against the disabled) and it would only benefit you (as the one who didn’t code their site properly to account for such things - when it’s the end user who should have priority)… I can say with great pride that it’s not something you can prevent or override against modern browsers :slight_smile:


In the code you listed above there will be no difference in IE if you resize the text because IE won’t resize pixel based font-sizes via the browsers controls. You can zoom but not enlarge the text only when you used pixels for the font sizes (in IE).

Alex has explained why it’s not a good idea even to try and limit your visitors options and indeed why it is not actually possible to do so. The issue you are facing is more of a design problem in that you have made things too rigid.

The fact that you have an absolutely placed menu means that you can never have a footer because the absolute element is removed from the flow and the only way to get a footer to work would be to place it there exactly. Which as you found out will fail if text is resized or content grows.

Instead you should be structuring more logically and fluidly using floats and static positioning that allows content to grow and shrink as required and it doesn’t matter what size the text is as the content will grow in height accordingly and elements will re-position themselves as required.

Don’t use absolute positioning unless it’s in a controlled situation where you can account for it and where it doesn’t interrupt the flow of the document.

ok guys thanks for the help