Solved

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

Posted on 2013-07-01
4
320 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 42

Expert Comment

by:Chris Stanyon
Comment Utility
Looks the same in IE and Firefox
0
 

Author Comment

by:bbdesign
Comment Utility
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
Comment Utility
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
Comment Utility
Find the problem.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
css, html 6 29
Phone Dialer 5 35
Change month dropdown 5 15
Bootstrap input box width 2 12
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now