Need a little help with IE

**Pete1980** · 06-14-2011, 05:04 AM

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;
	}

**Kor** · 06-15-2011, 04:54 AM

can you post a link to a test page?

**donatello** · 06-15-2011, 06:09 AM

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]-->

**Kor** · 06-15-2011, 07:44 AM

Originally Posted by donatello

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.

**Pete1980** · 06-16-2011, 12:12 AM

Originally Posted by Kor

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.

**Pete1980** · 06-16-2011, 12:16 AM

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.

**Kor** · 06-16-2011, 03:17 AM

Originally Posted by Pete1980

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?

**Pete1980** · 06-16-2011, 06:07 AM

Originally Posted by Kor

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