• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 346
  • Last Modified:

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!
0
Brad Bansner
Asked:
Brad Bansner
  • 3
1 Solution
 
Chris StanyonCommented:
Looks the same in IE and Firefox
0
 
Brad BansnerWeb DeveloperAuthor Commented:
Really? Attached is what I am seeing. Firefox looks fine, IE10 the background isn't lined up.
ff.jpg
ie.jpg
0
 
Brad BansnerWeb DeveloperAuthor 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
 
Brad BansnerWeb DeveloperAuthor Commented:
Find the problem.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

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