Home › Forums › CSS › Navigation bar looks different in Internet Explorer. › Re: Navigation bar looks different in Internet Explorer.
You can use the "li" as the wrapper and the "a" as the block. Set the li to "display: inline;" and ".nav ul li a" to "display: block;". The background image will have to be on the link as well for this to work properly (so ".nav ul li a { background-image: url(‘yourimg.jpg’); }). If you want an example of this in action you can look at the source of the CSS-Tricks main navigation bar.
Edit: Also remember to set the height of .nav ul li a to 50px!
I have already tried the suggested step. It is still not working.
Here you have suggested me to use "li" as the wrapper, and "a" as block. I have already done that. I have already set li to display: inline, and .nav ul li a to display: block. But still this does not work. Please check the php and css code that I have sent with the first post. Following is the css part for the header:
Following is the CSS part for the Header:
#header{width:100%; margin:1.5% auto;}
.title{float:left;}
.nav ul{float:right; padding:3px 0; margin-left:0; font-family:"Times New Roman"; font-size:14px; font-weight:bold;}
.nav ul li{list-style:none; margin:0; display:inline; padding:0;}
.nav ul li a{text-decoration:none; border:1px solid #CCCCCC; padding:14px; background-image:url(images/bak.jpg); background-repeat:repeat-x; color:#000066;}
.nav ul li a:link{color:#000066;}
.nav ul li a:visited{color:#000066;}
.nav ul li a:link:hover, .nav ul li a:visited:hover{background-image:url(images/hov.jpg); color:#00FFFF;}
body.home a.home, body.aboutus a.aboutus, body.contactus a.contactus, body.blog a.blog{background-image:url(images/active.jpg); color:#000066;}
.sign{float:left; margin-left:5%; margin-top:1%; width:15%;}
.divider1{clear:both; /*background-image:url(images/divider.png); background-repeat:repeat-x; */width:100%; margin:0 auto;}
.welcome{clear:both; float:right; margin-bottom:0%; margin-top:0%; margin-right:0%; width:30%;}
Nothing seems to work. Please help.