Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 288
  • Last Modified:

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?
0
denewey
Asked:
denewey
  • 3
  • 3
  • 2
  • +1
1 Solution
 
MrunalCommented:
two options are there:

1. also add line-height attribute with height:37px; in css clss #navlist li

2. if that does not work, add top and bottom margin for the same, instead of adding / assigning height.

Hope this helps you.
0
 
twohawksCommented:
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

0
 
twohawksCommented:
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).
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
deneweyAuthor Commented:
twohawks,

You apparently did not read my post. It has nothing to do with the hr tag.
0
 
SSupremeCommented:
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

0
 
twohawksCommented:
lol, don't knwo what I was looking at. sorry `8^P
0
 
deneweyAuthor Commented:
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.
0
 
SSupremeCommented:
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.
0
 
deneweyAuthor Commented:
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?
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now