Position of <ul> and <div> elements skewed in Internet Explorer (only)

This is my test page:
http://secure.bbdesign.com/electriccoil

It looks exactly how I want it... except in Internet Explorer. The position of the <div> that holds the slide show is too far down, resulting in a repeating background right above it. I am only dealing with a <ul> for the top navigation, followed by <div>'s to wrap the slide show and other <div>'s for slide show elements.

The section of code that holds that area is:

<ul id="nav1" class="clearfix">
	<li><a class="onpage" href="default.htm">HOME</a></li>
	<li><a href="about-ecs.htm">ABOUT ECS</a></li>
	<li><a href="products.htm">PRODUCTS</a></li>
	<li><a href="data-sheets.htm">DATA SHEETS</a></li>
	<li><a href="contact-us.htm">CONTACT US</a></li>
</ul>

<div id="slHomeWrapper">
	<div id="slHomeNav">
		<div class="slHomeArrowLeft"></div>
		<div id="slHomeCircle1" class="slHomeCircle"></div>
		<div id="slHomeCircle2" class="slHomeCircle"></div>
		<div id="slHomeCircle3" class="slHomeCircle"></div>
		<div id="slHomeCircle4" class="slHomeCircle"></div>
		<div id="slHomeCircle5" class="slHomeCircle"></div>
		<div class="slHomeArrowRight"></div>
	</div>
...etc.

Open in new window


CSS:

ul#nav1{position:relative;margin:0;padding:138px 0 0 0;height:40px;}
ul#nav1 li{display:inline-block;float:left;margin:0;padding:0;font-size:1.1em;margin:0 1px 0 0;}
ul#nav1 li a,ul#nav1 li a:visited,ul#nav1 li a:hover{display:inline-block;color:#cecece;text-decoration:none;width:130px;height:28px;padding-top:12px;background:transparent url('../img/bg_button1.jpg') repeat-x top center;text-align:center;}
ul#nav1 li a.onpage,ul#nav1 li a.onpage:visited,ul#nav1 li a.onpage:hover{background:transparent url('../img/bg_button3.jpg') repeat-x top center;color:#8d8b9b;}
ul#nav1 li a.highlight,ul#nav1 li a.highlight:visited,ul#nav1 li a.highlight:hover{background:transparent url('../img/bg_button2.jpg') repeat-x top center;color:#cecece;}


div#slHomeWrapper{float:right;position:relative;width:817px;height:557px;margin-top:51px;background:transparent url('../img/bg_slHome.jpg') no-repeat top left;}

div#slHomeNav{position:relative;margin:0 auto;margin-top:29px;text-align:center;}

Open in new window


Something simple I am doing wrong, hopefully?

Thank you!
bbdesignAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
bbdesignConnect With a Mentor Author Commented:
I found the problem, a line break in one of the nav buttons (invisible when viewing the page) was pushing the slide show down.
0
 
Chris StanyonCommented:
Looks the same in IE and Firefox
0
 
bbdesignAuthor Commented:
Really? Attached is what I am seeing. Firefox looks fine, IE10 the background isn't lined up.
ff.jpg
ie.jpg
0
 
bbdesignAuthor Commented:
Find the problem.
0
All Courses

From novice to tech pro — start learning today.