Menu ser forskellig ud i IE 7 og 8
Min menu ser fin ud i IE8, firefox, chrome, safari og opera. Men ikke i IE7. Nu er jeg ingen CSS haj, så jeg skal nok have det skåret ud i pap før jeg forstår det.Jeg har sat nogle borders på bare for at se, hvor de forskellige elementer går til.
Et af problemerne er f.eks. at IE7 ikke gider at fylde UL helt ud i den div den er i. Håber der er nogen der kan hjælpe mig med dette?
Min menu består af en almindelig html liste, asp:ContentPlaceholder returnere bare noget ala det her.
<li><a href="Et link">Et link</a></li> osv.
Og TitleContent er giver bare en streng
<div id="subMenu">
<span id="titleParent">
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</span>
<ul id="ulSubMenu">
<asp:ContentPlaceHolder ID="SubMenuContent" runat="server" />
</ul>
</div>
Og her er css
/* Sub MENU
----------------------------------------------------------*/
div#subMenu
{
border: 1px solid Black;
}
div#subMenu span
{
color: #a11523;
float: left;
font-family: Century Gothic;
font-weight:500;
text-align: left;
font-size: 15px;
width: 100%;
border-bottom: 1px solid #D6D6D6;
margin-bottom: 10px;
padding-bottom: 5px;
}
ul#ulSubMenu
{
text-align: left;
border: 1px solid Red;
}
ul#ulSubMenu li
{
list-style-image: url('../../Images/SubMenuIcon.gif');
list-style-type: circle; /*If image doesn't exist, then use circle*/
border-bottom: 1px dotted #D6D6D6; /*border: 1px solid Black;*/
}
ul#ulSubMenu li#greeting
{
font-family: Tahoma;
text-decoration: none;
line-height: 2.8em;
color: #000000;
}
ul#ulSubMenu li a
{
font-family: Tahoma;
text-decoration: none;
line-height: 2.8em;
color: #000000;
}
ul#ulSubMenu li:hover
{
background-color: #fff;
text-decoration: none;
list-style-image: url('../../Images/SubMenuIconSelected.gif');
}
ul#ulSubMenu li a:active
{
background-color: #a6e2a6;
text-decoration: none;
}
ul#ulSubMenu li.selected selectedSubMenu
{
background-color: #000000;
color: #4b893f;
list-style-image: url('../../Images/SubMenuIconSelected.gif');
}