Hey everyone,
I got the strangest bug on IE7:
I have 2 UL elements nested in a DIV: UL#menu, UL#lang-select.
UL#menu is floated left, UL#lang-select is floated right
LI elements in UL#menu have margins on both sides.
A elements in LI, UL#lang-select have background change on :hover.
Here is the weird thing:
When I hover UL#lang-select > LI > A and the background changes, UL#menu > LI has left margin removed in first element, and the whole UL#menu > LI elements move left permanently.
Also here is the code structure to simplify the above:
<div class=“wrapper”>
<ul id=“menu_”>
<li class=“box corners-col1” >
… nested elements
</li>
<li class=“box corners-col2” >
… nested elements
</li>
</ul>
<ul id=“lang-select”>
<li>
<a href=“”> </a>
</li>
<li id=“active_language”>
<a href=“”> </a>
</li>
</ul>
</div>