Hi
Thank you to everyone who contributed to my last post (for those that
noticed... I've now removed the XHTML ;-)
In the page listed below, a two part horizontal menu is displayed, indented
from the left. The first part of the menu is left justified and the second
part is right justified. It looks correct in both IE6 and FireFox.... until
you move your mouse over one of the left hand links. Then, in IE6, the
change in background color causes a reflow. This causes the NavContainer div
to expand, pushing the right hand menu item off the page. Refreshing or
resizing the page gets it redrawn correctly.
I've read about various hover bugs in IE, but I could do with some pointers
as to which may be causing my problem and if there is a workaround.
Thanks
Piers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css' media='all'>
#MainBody
{
position:relative;
border: solid 1px white;
margin: 0 1em 0 17em;
}
#NavContainer
{
position:absolute;
width:100%;
background-color:grey;
}
#SecondaryNav
{
position:absolute;
top:0;
right:0.5em;
}
#PrimaryNav ul, #SecondaryNav ul
{
padding: 0;
margin: 0;
}
#PrimaryNav li, #SecondaryNav li
{
list-style: none;
margin: 0;
display: inline;
}
#PrimaryNav li a, #SecondaryNav li a
{
border: solid 1px #036;
}
#PrimaryNav li a:hover, #SecondaryNav li a:hover
{
background-color: #036;
}
</style>
</head>
<body>
<div id='MainBody'>
<div id='NavContainer'>
<div id='PrimaryNav'>
<ul>
<li><a href=''>Link 1</a></li>
<li><a href=''>Link 2</a></li>
<li><a href=''>Link 3</a></li>
<li id='Current'><a href=''>Link 4</a></li>
</ul>
</div>
<div id='SecondaryNav'>
<ul>
<li><a href=''>Link 4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
