SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code CSS:
          ul {
    	position:absolute;
    	top:214px;
    	left: 30px;
    	height: 55em;
    	border-right: 2px solid #f90;
    	padding-right: 60px;
    	font-size: 16px;
          }

    This is the corresponding div and ul:
    Code HTML4Strict:
             <div id="navigation">
          <ul>
        	<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>
          </ul>
          <div id="nav-s">
            <a href="http://www.thefilmspreview.com/"><img src="tfp.png" width="150px" height="150px" /></a>
            <br />
            <a href="http://www.sapphirebanquet.com/"><img src="saphire.png" width="150px" height="150px" /></a>
          </div>
        </div>

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

  2. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I understand your point but what if I still want to? Is it possible?

  4. #4
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    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.

  6. #6
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok guys thanks for the help


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •