0

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.

Attachments problem.png 139.51 KB
7
Contributors
9
Replies
10
Views
7 Years
Discussion Span
Last Post by Nfurman
0

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

0

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.

0

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.

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.