Link to home
Start Free TrialLog in
Avatar of denewey
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:
<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 -->

Open in new window


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;
	}

Open in new window


Any ideas how I can get the padding to work in IE?
ASKER CERTIFIED SOLUTION
Avatar of Mrunal
Mrunal
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
There is a seemingly little understood problem with hr.
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 ;^)
<style>
div.hr { /* custom HR's */
width: 67em;
line-height: 1px;  /* make sure default 16pt is over-ridden */
font-size: 1px;  /* make sure default 16pt is over-ridden */
height: 2px;
background: darkblue;
}
</style>



	<div class="hr">&nbsp;</div>
<br>
<div style="	position:relative; 
	float:left;
	height:auto; 
	width:195px; 
	border:solid orange 1px;
">


		<div style="border: 1px solid red; margin: 0.12em auto; position: relative; float: left; width: 100%; height: 20px; text-align: center;">
			test1
		</div>

		<div style="border: 1px solid blue; margin: 2px auto; position: relative; float: left; width: 100%; text-align: center; height: 2px;">
			<hr style="border-width: 0pt; margin: 0px auto; position: absolute; left: 10%; height: 2px; width: 80%; color: khaki; background-color: khaki;">
		</div>
		
		
		<div style="border: 1px solid red; margin: 0.12em auto; position: relative; float: left; width: 100%; height: 20px; text-align: center;">
			test2
		</div>

		<div style="border: 1px solid blue; margin: 2px auto; position: relative; float: left; width: 100%; text-align: center; height: 2px;">
			<hr style="border-width: 0pt; margin: 0px auto; position: absolute; left: 10%; height: 2px; width: 80%; color: khaki; background-color: khaki;">
		</div>
		
		
		<div style="border: 1px solid red; margin: 0.12em auto; position: relative; float: left; width: 100%; height: 20px; text-align: center;">
			test3
		</div>

  </div>

Open in new window

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).
Avatar of denewey
denewey

ASKER

twohawks,

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:
<!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>

Open in new window

lol, don't knwo what I was looking at. sorry `8^P
Avatar of denewey

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.
Avatar of denewey

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?