0

I have a little problem with my menu and I can't seem to find the answer. I have tried most of the solutions I could find (even if slightly related) but I can't get to fix it on IE7.

My menu works perfectly in all modern browsers (except IE7), which we still have to keep functional. I have attached a screenshot of the submenu (which is causing problem). Look at the small white gaps between the LIs. I've hidden all text for privacy purpose.

Screenshot here

Here is the HTML:

<ul id="header_menu" class="do-not-print">
<li><a href="#">Test</a></li>
<li class="current_page_item"><a href="#">Test 2</a>
    <ul class="children">
    <li><a href="#">Subtest 1</a></li>
    <li><a href="#">Subtest 2</a></li>
    <li><a href="#">Subtest 3</a></li>
    <li><a href="#">Subtest 4</a></li>
    <li><a href="#">Subtest 5</a></li>
    <li><a href="#">Subtest 6</a></li>
    </ul>
</li>
<li><a href="#">Test 3</a></li>
<li><a href="#">Test 4</a></li>
<li><a href="#">Test 5</a></li>
<li><a href="#">Test 6</a></li>
<li><a href="#">Test 7</a></li>
</ul>

And here is my CSS:

#header_menu {position: absolute; bottom: 0; left: 0; height: 38px; width: 100%; margin: 0; padding: 0; z-index: 300;}
#header_menu li {position: relative; background-color: #0022a3; list-style-type: none; font-size: 1em; margin: 0; display: block;}
#header_menu li a {color: #fff; text-decoration: none; margin: 0; display:block;}

#header_menu > li {float:left; border-right:1px solid #001871; border-top:1px solid #001871; border-bottom:1px solid #001871;}
#header_menu > li:first-child {border-left:1px solid #001871;}
#header_menu > li:last-child .children {right: 1px; left: auto;}
#header_menu > li > a {font-size:18px; line-height:38px; padding: 0; text-align: center; padding: 0 29px;}

#header_menu li:hover > a, #header_menu li.current_page_item > a, #header_menu li.current_page_ancestor > a {background-color:#0030e6;}
#header_menu li:hover .children {display:block;}

#header_menu .children {display: none; position: absolute; top: 39px; left: 0; width: 225px; z-index: 400;}
#header_menu .children li {width: 100%; border-bottom: 1px solid #001871; border-left: 1px solid #001871; border-right: 1px solid #001871;}
#header_menu .children li a {font-size: 16px; line-height:20px; padding: 6px 29px; text-align: left;}

Any idea of what's wrong with my CSS? I've been scratching my head for a few hours now... :S

Thanks!

Audrius Meškauskas
  • 20,936
  • 12
  • 75
  • 93
GoddessOfTheWinds
  • 3
  • 3
  • try floating you child li's left, it's one fo the many ie bugs – Pete Jan 23 '13 at 16:08
  • Wow, that was right on spot! How could I haven't found that simple answer from all the searches? :S Post it as an answer and I will accept it. – GoddessOfTheWinds Jan 23 '13 at 16:11
  • hahaha, I have struggled enough with IE to know pretty much all the little tricks to fix certain errors! anwer posted – Pete Jan 23 '13 at 16:13

1 Answers1

1

Try adding float:left to the .child li as it is one of IEs many bugs

Pete
  • 57,112
  • 28
  • 117
  • 166