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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...