IE9 width issue

HTML & CSS
1

my site looks different in IE9.

The red block on the right of Find Us shifts down onto the next line but in IE8 firefox and opera it displays fine.

Is there a way to sort this without conditional statements or do i need to redo the menu set up agian?

Here is a snippet of the css for the menu:


#topMenu {  width:960px; position:absolute; bottom:0;}
ul#menu
{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	position:relative;
	display:block;
	font-size:16px;
}

ul#menu li
{
	display:block;
	float:left;
	margin:0;
	padding:0; 
}
.left { width:206px; background-color:#d30507; height:19px; }

.right { width:55px; background-color:#d30507; height:19px; }	

ul#menu li a
{
	display:block;
	float:left;
	color:#fff;
	text-decoration:none;
	padding:0px 20px 0 20px;
	border-right: 1px solid #d30507;
}
	
ul#menu li a:hover
{	
	color:#fff;
	background: #d30507;		
}
	

ul#menu li a.current
{
	display:inline;
	color:#fff;
	background: #d30507;		
	float:left;
	margin:0;
}
2

Hi,

It’s on the next line in Firefox on the mac also.

You can’t just add some px to the end of some text content and expect it to be the same cross browser as all render it differently by as much as 10px for the whole line in some cases (not counting users who large text settings or have 120dpi settings and large fonts etc).

Remove the left and right empty list elements and as you never want to do things like that.

Add a red background to the ul and a black background to the list element. Then give the UL some left padding and then clear the floats.


ul#menu {
    display: block;
    font-size: 16px;
    list-style-type: none;
    margin: 0;
    padding:0 0 0 200px;
    position: relative;
    width: auto;
        background:red;
        overflow:hidden;
        zoom:1.0;
}
ul#menu li{background:#000}

That leaves breathing space on the right to soak up the differences.

)

3

Thank you very much for your help! I did exactly what you said and have learned something today, thank you! :slight_smile: