-4

I don't know how people test if their site is compatible with old browsers. I have a top menu with width:100% that works correctly in firefox but fails in IE9.

Here is the css:

.topslidemenu {
     font-size: 11px;  
     font-weight: bold;  
     height: 27px; 
     line-height: 9px; 
     width: 100%; //950px
}

when it runs on IE9, the menu width is shortened.

Yisela
  • 6,909
  • 5
  • 28
  • 51
Peter Mannings
  • 111
  • 7
  • 2
    Make the question more specific, your problem is `menu width shortened in IE9` , add relevent `HTML` and `CSS`, specify the `DOCTYPE` you are using. Cheers! – sabithpocker Sep 03 '12 at 23:18
  • 1
    Impossible to see the problem without the rest of the code. It's better if you create a http://jsfiddle.net/ – Yisela Sep 03 '12 at 23:58
  • This might solve your problem, at least on IE9 (not on IE8) : http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733 – Denys Séguret Sep 04 '12 at 08:20

2 Answers2

0

Possible reasons：
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.In the case of a scrollbar being placed on an edge of the element’s box, it should be inserted between the inner border edge and the outer padding edge. Any space taken up by the scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars. http://www.w3.org/TR/CSS21/visufx.html#overflow

Try this:

.topslidemenu {
     font-size: 11px;  
     font-weight: bold;  
     height: 27px; 
     line-height: 9px; 
     width: expression(this.parentNode.offsetHeight > this.parentNode.scrollHeight ? '100%' : parseInt(this.parentNode.clientWidth) + 'px');
}
Snger
  • 1,374
  • 19
  • 23
0

Its hard to say without more code. IE always causes problems for me. I like to use the add-on, web development. It lets me test and experiment on the web for IE. http://www.microsoft.com/en-us/download/details.aspx?id=18359 Also try adding float: left or margin: 0; or padding: 0; to see if one of them fixes the bug. Hope this helped.

Nightgem
  • 46
  • 4