denewey
asked on
How to resolve browser issue on a CSS Horizontal nav bar
I created a horizontal nav bar using <ul><li> and css. To get each nav button to fill the space appropriately I used padding. This renders beautifully in Firefox. In IE8 the nav bar is the right width across but will not fill the height, no matter what I do.
This is the html I have for the nav bar:
And below is the CSS for the nav bar:
Any ideas how I can get the padding to work in IE?
This is the html I have for the nav bar:
<div id="header_nav">
<ul id="navlist">
<li><a href="#">Welcome </a></li>
<li><a href="#">Virtual tour</a></li>
<li><a href="#">About </a></li>
<li><a href="#">Contributors</a></li>
<li><a href="#">Donate Now</a></li>
<li id="list_end"><a href="#">Calendar </a></li>
</ul>
</div><!-- End header_nav -->
And below is the CSS for the nav bar:
#navlist{
width: 1200px;
position: relative;
left:-40px;
top: -5px;
#top:0px;
}
#navlist li{
display: inline;
list-style-type: none;
text-decoration: none;
margin-right: 1px;
padding: 10px 43.75px;
#padding: 5px 43px;
width:195px;
height:37px;
color:#FFF;
background-image:url('images/nav_bg.jpg');
background-repeat: repeat-x;
}
#navlist li#list_end{
margin-right:0px;
}
#navlist li a{
text-decoration:none;
color:#FFF;
font-family:arial,helvetica,sans-serif;
}
Any ideas how I can get the padding to work in IE?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Just to highlight the issues...
#1) it comes down to having to collapse the hr tag.
#1 before that) anyone will tell you that these days you should be using divs for dividers instead.
You will read it all at the link(s).
#1) it comes down to having to collapse the hr tag.
#1 before that) anyone will tell you that these days you should be using divs for dividers instead.
You will read it all at the link(s).
ASKER
twohawks,
You apparently did not read my post. It has nothing to do with the hr tag.
You apparently did not read my post. It has nothing to do with the hr tag.
Problem is that inline elements cannot have width and height set.
My solution doesn't require padding to fill the space of button:
My solution doesn't require padding to fill the space of button:
<!DOCTYPE html >
<html>
<head>
<title>Hello.</title>
<style>
#navlist{
position: relative;
width: 900px;
height:41px;
margin:0px;
padding:0px;
}
#navlist li{
float:left;
list-style-type: none;
width:150px;
height:41px;
background-image:url('images/nav_bg.jpg');
text-align: center;
background-repeat: repeat-x;
}
#navlist li#list_end{
margin-right:0px;
}
#navlist li a {
text-decoration:none;
color:#FFF;
font-family:arial,helvetica,sans-serif;
line-height:41px;
display: block;
float:left
text-align: center;
}
</style>
</head>
<body>
<h1>Information about you.</h1>
<div id="header_nav">
<ul id="navlist">
<li><a href="#">Welcome </a></li>
<li><a href="#">Virtual tour</a></li>
<li><a href="#">About </a></li>
<li><a href="#">Contributors</a></li>
<li><a href="#">Donate Now</a></li>
<li id="list_end"><a href="#">Calendar </a></li>
</ul>
</div>
</body>
</html>
lol, don't knwo what I was looking at. sorry `8^P
ASKER
The line-height property did expand the height of the nav in IE so that was definitely a success. Unfortuately it also expanded the height in Firefox. When I reduced the padding Firefox moved the nav bar down the page about 20 px so I then had to assign the 'top' property as -20px. There is also a trick where you can put a # in front of a property and it will only apply to IE so when I assigned 'top' as -20px for Firefox, I assigned #top: -4px; for IE and everything lined up in both browsers.
It shouldn't be so difficult -20px #-4px, you need reset all styles and restyle it, all browsers will show same result no matter what.
ASKER
SSupreme - your suggestion was marvelous. I substituted your code for mine and with just a little tweaking of dimensions it worked almost perfect. The nav bar looks the same in both browsers. The only other difficulty is that the text sits toward the bottom of the nav bar. How would you resolve that?
Read my post at webmasterworld about this
http://www.wickham43.net/horizontalrule.html
And check this out too.
http://www.wickham43.net/horizontalrule.html
Here is a code excersize you can play with to observe vertical spacing behaviors...
I assume you know where to place styles and html code ;^)
Open in new window