problem with <ul>

[Nfurman]

Hello this is my CSS:

div#menu
{
    width:680px;
    height:30px;
    position:absolute;
    top: 300px;
    left:300px;
}

#linkbar
{
    list-style:none;
    margin:0;
    padding:0;
}

#linkbar a:hover
{
    background-color:#CCCC00;
    color:Black;
}

#linkbar a:visited
{
    background-color:#CC6600;
    color:White;
}

#linkbar a:visited:hover
{
    background-color:#CCCC00;
    color:Black;
}

#linkbar a 
{
    behavior: url(/css/border-radius.htc);
    border-radius: 10px;
    display:block;
    float:right;
    margin:3px;
    background-color:#006600;
    color:White;
    width:100px;
    height:19px;
    text-decoration:none;
    font-weight:bold;
    border:1px solid transparent;
}

User code on my masterpage

<div id="menu">
        <ul id="linkbar">
             <li><a href="Default.aspx"><%=Resources.Resource.Home %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.AboutUs %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.Classes %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.Contact %></a></li>
             <li><a href="../Admin/"><%=Resources.Resource.Members %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.Resources %></a></li>
             </ul>
</div>

Works fine in Safari and Mozilla. I mean the <a> s staying straight in <div> as it supposed to be.

The problem makes IE8. Please see problem.png attachment. How to fix it. please help.

[Baradaran]

Hi,
I believe this goes from right to left. Try this:

HTML:

<div id="menu">
   <div>
        <ul>
             <li><a href="Default.aspx"><%=Resources.Resource.Home %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.AboutUs %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.Classes %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.Contact %></a></li>
             <li><a href="../Admin/"><%=Resources.Resource.Members %></a></li>
             <li><a href="Default.aspx"><%=Resources.Resource.Resources %></a></li>
        </ul>
    </div>
</div>

#menu
{
    width:680px;
    height:30px;
    position:absolute;
    top: 300px;
    left:300px;
}

#menu div{position: relative;}
#menu div ul{list-style: none; margin:0; padding:0;}
#menu div ul li{float: right;}

#menu div ul li a 
{behavior: url(/css/border-radius.htc); border-radius: 10px; display: block; margin:3px; background-color: #006600; color: White; width: 100px; height: 19px; text-decoration: none; font-weight: bold; border: 1px solid transparent;}

#menu div ul li a:hover{background-color: #CCCC00; color: Black;}
#menu div ul li a:visited{background-color: #CC6600; color: White;}
#menu div ul li a:visited:hover {background-color: #CCCC00; color: Black;}

A short explanation: you have an absolute div. Inside a div I placed another div. If necessary, you can use absolute positioning inside this div again.

The UL is OK, the LI has to float left, as the LI is containing the A.

Much better would be to assign a certain width to the LIs and make the A being displayed block without a certain width.

I think this should work.

Good luck,
albasiba

[Arcrammer]

I'm almost positive that "behavior" is not a valid property...

[JamieLynnSEO]

I'm almost positive that "behavior" is not a valid property...

behavior is in Internet explorer... it lets you implement DHTML using CSS to attach scripts.

[Rajib Ganguly]

just add the css
ul, li
{
list-style:none;
margin:0;
padding:0;
}

[Nfurman]

Alas, doesn't work

[Rajib Ganguly]

just replace this CSS and it is done.

#menu div ul li {
float: left;
}

ok??

[sagive]

we need a link.. cant really know sizes here.. (sababa? :) )

[tinymark]

Try adding this line.

li{width:100px; display:inline;}

I tested it with IE6, IE7 and IE8. There are slight positional differences and size differences but they all line up right to left like they should.

I believe what is going on is that the default for IE for display is block and the rest of the browsers default to inline.

I hope this helps.

[Nfurman]

Try adding this line.

li{width:100px; display:inline;}

I tested it with IE6, IE7 and IE8. There are slight positional differences and size differences but they all line up right to left like they should.

I believe what is going on is that the default for IE for display is block and the rest of the browsers default to inline.

I hope this helps.

Thank you. Now it works in the same way in every single browser.