www.webdeveloper.com
Results 1 to 10 of 10

Thread: Need a little help with IE

  1. #1
    Join Date
    May 2011
    Location
    Wollongong, Australia
    Posts
    21

    Need a little help with IE

    I have a menu in a container div of 1000px that sits inside another div so that I can center it.
    everything displays perfectly in FF, Safari and Chrome but in IE9 the last menu item drops to another line.
    Ive heard about IE adding extra padding or margin space but have had little to do with it until now. How do I remove the hidden padding or margin, if that is what is going wrong?

    here is the code

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title></title>
    	<link rel="stylesheet" href="./css/test.css" type="text/css" media="screen" title="Stylesheet" charset="utf-8" />
      </head>
      <body>  
      <div class="container">
    	<div class="menucontainer">
    		<ul id="sddm">
    			<li><a href="main.html">Home</a></li><li><a href="blah.html">About Us</a></li><li><a href="blah.html">Services</a></li><li><a href="reg.html">Employment</a></li><li><a href="reg.html">Support</a></li><li><a href="reg.html">New Products</a></li><li><a href="reg.html">Search</a></li><li><a href="poo.html">Members Login</a></li><li><a href="poo.html">My Favourites&nbsp;</a></li>
    		</ul>
    	</div>
        </div>
     </body>
    </html>
    and the css

    Code:
    .container {
    	margin:0 auto;
    	width:1000px;
    	}
    
    .menucontainer{
    	margin:0 auto;
    	clear:both;
    	padding: 0;
    	}
    
    #sddm{
    	
    	margin:0;
    	padding: 0;
    	}
    
    #sddm li{
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	float: left;
    	font: bold 15px arial;
    	}
    
    #sddm li a{
    	display: block;
    	margin: 0;
    	padding: 4px 18px;
    	background-image:url('../images/menubg.jpg');
    	background-repeat:repeat-x;
    	color: #000;
    	text-align: center;
    	text-decoration: none;
    	}
    
    #sddm li a:hover{
    	color: #da9b05;
    	}

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    can you post a link to a test page?

  3. #3
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,086
    I got sick of making things both validate and display properly in every single new mutation of IE... I've noticed that a number of my favorite sites now no longer work in IE9... makes me not want to use IE at all...

    So instead of fiddling and wasting hours with it, I just resorted to a little bit of a 'hack' and use a conditional to make it look pretty and move on to the next problem, knowing that later versions of IE will screw up more and more things...

    HTML Code:
    <h2>HTML Conditional Tags</h2>
    <!--[if !IE]><!-->
        <p>This is NOT visible to IE, so works with all other browsers.</p>	      
    <!--<![endif]-->
     
    <!--[if IE]>
          <p>This is visible only to Internet Explorer, so it can be any HTML at all</p>  
    <![endif]-->

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by donatello View Post
    I got sick of making things both validate and display properly in every single new mutation of IE... I've noticed that a number of my favorite sites now no longer work in IE9... makes me not want to use IE at all...
    I don't want to defend IE. But I am a web designer and developer and, with no exception, all the sites I have created in the last 5-6 years still work and look OK now, with no changes, even in the last versions of the new browsers (IE9 included).

    Whenever you code carefully, simple, as close to the standards as possible, crossbrowser in need, there should not be any problem now or in the near future.

  5. #5
    Join Date
    May 2011
    Location
    Wollongong, Australia
    Posts
    21
    Quote Originally Posted by Kor View Post
    can you post a link to a test page?
    Unfortunately I cant upload the page at the moment, thats why i minimised the code to only display the menu bar.

  6. #6
    Join Date
    May 2011
    Location
    Wollongong, Australia
    Posts
    21
    I have also found out since that the problem doesn't lie within the padding or margins, IE 9 displays the Arial font slightly different than the other browsers, some of the capitol letters are slightly wider.

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Pete1980 View Post
    I have also found out since that the problem doesn't lie within the padding or margins, IE 9 displays the Arial font slightly different than the other browsers, some of the capitol letters are slightly wider.
    I doubt. Have you given the font a certain size in pixels?

  8. #8
    Join Date
    May 2011
    Location
    Wollongong, Australia
    Posts
    21
    Quote Originally Posted by Kor View Post
    I doubt. Have you given the font a certain size in pixels?
    Yes, the font was set to 15px, BUT, browsers still render the size differently, the difference is very subtle but still different.

    http://css-tricks.com/font-rendering...-ie-vs-safari/

    Now include the fact that I had also made the font Bold and the rendering changes again.

    Seems like we both learnt something new here

  9. #9
    Join Date
    May 2011
    Location
    Wollongong, Australia
    Posts
    21
    When setting the size of a font in pixels, it sets the height of the font not the width.
    http://www.emdpi.com/fontsize.html

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It is the Mac which renders the fonts otherwise than Win, not Safari by all means.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles