Jump to content

IE markup with <ul> <li>


westman
 Share

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?

Link to comment
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
Link to comment
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
 Share

×
×
  • Create New...