Jump to content
westman

IE markup with <ul> <li>

Recommended Posts

I am not a fan of Internet Explorer but trying to get my html and css working well with it.

#nav {
	font-family:"Arial Black", Gadget, sans-serif;
	text-align:left;
    display:inline-block;
    width:0px auto;
	/*width:100%;
	text-align:right;*/
    margin:0px auto;
    padding:0;
    background:#5C5B5E; /* background color */

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    /*box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);*/
}
#nav li {
    margin:10px;
    float:left;
    position:relative;
    list-style:none;
}
#nav ul li:first-child > a {
    -moz-border-radius-topleft:10px; /*some css3*/
    -moz-border-radius-topright:10px;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
    -moz-border-radius-bottomleft:10px; /*some css3*/
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
#nav ul {
    opacity:0;
    visibility:hidden;
    padding:0;
    width:175px;
    position:absolute;
    background:#5C5B5E; /*sub background color*/
    border:1px solid #5C5B5E; /*sub border color*/

    border-radius:10px; /*some css3*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0 2px 2px rgba(0,0,0, .5);
    -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
    -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);

    -moz-transition:opacity .25s linear, visibility .1s linear .1s;
    -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
    -o-transition:opacity .25s linear, visibility .1s linear .1s;
    transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
    float:none;
    margin:0;
}

<div style="position:relative; z-index:2;">    
<ul id="nav">
        <li><a href="?p=home#home">Home</a></li><br />
        <li><a href="?p=home#services">Services</a></li><br />
        <li><a href="?p=home#about">About us</a></li><br />
        <li><a href = "javascript:void(0)" onclick = "document.getElementById('signin').style.display='block';document.getElementById('fade').style.display='block'">Login</a></li>
</ul>
</div>


How do I get this to be IE friendly?

Share this post


Link to post
Share on other sites

Which part of it is not working in Internet Explorer and which version of Internet Explorer are you testing?

Share this post


Link to post
Share on other sites

IS this supposed to be a horizontal or vertical menu?

First : The br elements are not valid and not allowed as child of ul, remove them

IF you want this as a vertical menu, remove float: left;,  from LI elements and change to display: block;

IF you want horizontal removing the BR element will fix this, as the float: left; property will give you the horizontal li that you require.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×