I've got a problem. I need to horizntal menu so I'm using a list to do it. Everything was working fine then I decided to have a look at it in IE8 which was still fine (almost). However when I switched on compatability mode each list item was displayed on a new line. I have found one fix for it but it insn't subitable.
There are enough of my target audience using IE7 to warrent fixing it.
The text and background colours have been removed since they won't have any effect.
The only way I could fix it was to put float: left into the .mainmenu li class but that meant the menu didn't use full use of the line which is important for the layout.
Is there a solution for this that doesn't use float left. I'm willing to use JavaScript if needed.
There are enough of my target audience using IE7 to warrent fixing it.
Code:
.mainmenu{
clear: both;
height: 47px;
margin: 0;
width: 980px;
}
.mainmenu ul{
font-family: arial rounded MT bold, arial, verdana, georgia, tahoma, sans-serif;
list-style: none;
margin: 0;
padding-left: 0;
text-align:left;
}
.mainmenu li{
display: inline-block;
margin: 5px 0 0;
padding: 0;
z-index:1000;
height: 42px;
}
.mainmenu li a{
display: inline-block;
font-size: 11pt;
font-weight: bold;
height: 31px;
padding: 11px 21px 0;
text-decoration: none;
}
.mainmenu li a:hover{
text-decoration: underline;
}
Code:
<div class="mainmenu">
<ul>
<li><a href="[I]link[/I]">Home</a></li>
<li>Current page</li>
<li><a href="[I]link[/I]">Page</a></li>
<li><a href="[I]link[/I]">Page</a></li>
<li><a href="[I]link[/I]">Page</a></li>
<li><a href="[I]link[/I]">Page</a></li>
<li><a href="[I]link[/I]">Page</a></li>
<li><a href="[I]link[/I]">Page</a></li>
</ul>
</div>
Is there a solution for this that doesn't use float left. I'm willing to use JavaScript if needed.