Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Navigation bar looks different in Internet Explorer. Re: Navigation bar looks different in Internet Explorer.

#68574
boss
Member
"nosecreek" wrote:
Okay, the issue is this: In order to go to the proper height the display needs to be set to block. The problem is that by doing this it is just creating another problem. Since block elements have line breaks before and after them they will each go on a new line. The solution is to wrap each block-level element in an inline element. Right now your code is like this:

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.