Positioning in IE

[Dane D.]

Website in final stages of development, looks fine in all browser but IE. To view what it looks like we have a staging link - http://boyscoutskeepingthepromise.com/stage/bsa/index.html.

The problem is the navigation in IE shifts right and starts in the middle.

here is the html for the navigation:

<div id="navigation">
<div id="nav-menu">
	<ul>
		<li><a href="#">Home</a></li>
		<li><a href="html/aboutus.html">About Us</a></li>
		<li><a href="html/boyscout.html">Boy Scout Camp</a></li>
		<li><a href="html/cubscout_webelos.html">Cub Scout Camp</a></li>
		<li><a href="html/fg_hoover.html">Hoover Service Center</a></li>
		<li><a href="html/venturing.html">Venturing Complex</a></li>
		<li><a href="html/ways_to_give.html">Ways to Give</a></li>
		<li><a href="html/chairmans_circle.html">Chairman's Circle</a></li>
		<li><a href="html/contact.html">Contact Us</a></li>
	</ul>
</div>
</div>

The CSS:

#navigation {
	position: absolute;
	top: 196px;
	left: 0px;
	width: 943px;
	height: 48px;
	background-color: #ffffff;
}

#nav-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	width: 943px;
	height: 48px;
	z-index: +3;
}

#nav-menu ul {
	padding: 0;
	margin: 0;
	top: 186px;
	left: 0px;
	list-style: none;
}

#nav-menu li {
	float: left;
	margin: 0 0px;
}

#nav-menu li a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 125%;
	float: left;
	width: 103px;
	display: block;
	text-decoration: none;
	text-align: center;
} 

this sits in  a container with this CSS:
#container {
	position:relative;
	width: 943px;
	height: 1200px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

Thanks.

 

[manueld]

It only does that in ie 7. BTW You should state which version of IE you're having issues with next time.

Remove position:absolute from this and that should do it.

#nav-menu {
padding: 0;
margin: 0;
position: absolute;
width: 943px;
height: 48px;
z-index: +3;
}

 

[Dane D.]

Thanks, will try that. Is absolute positioning a no-no in IE? Most of the sites I build are of this type, just static information. Would I be better off using float left/right and control with margins/padding? I thought IE had issues with the standard box and causes many problems with Floats? IE has always been the browser that fails rendering compared to Firefox and Safari/Chrome.

 

[jwm2]

IE is just horrible when it comes to rendering web pages. I had no idea just how bad it was until recently. I've all but given up on IE web development. It seems the only solution in most cases is to use a script to detect IE versions (6,7,8,9) and then load the separate css file for those versions based on what is detected. Its a pain, but in some cases thats the only suitable solution and is seemingly very common these days. Just check the source code for many large companies, you'll see if they have a nice design they also use browser detection for IE css.

 

[manueld]

I don't typically use absolutely positioning most elements just because I want my content to grow (especially vertically) there's going to be issues as the various browsers differ in font rendering.

I'd say do what works for you, but at the same time consider learning to use floats.