Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-07-01
4
Medium Priority
?
344 Views
Last Modified: 2013-07-06
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
Comment
Question by:bbdesign
  • 3
4 Comments
 
LVL 44

Expert Comment

by:Chris Stanyon
ID: 39291115
Looks the same in IE and Firefox
0
 

Author Comment

by:bbdesign
ID: 39291616
Really? Attached is what I am seeing. Firefox looks fine, IE10 the background isn't lined up.
ff.jpg
ie.jpg
0
 

Accepted Solution

by:
bbdesign earned 0 total points
ID: 39291642
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
 

Author Closing Comment

by:bbdesign
ID: 39303724
Find the problem.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

783 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question