Solved

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

Posted on 2013-07-01
4
331 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 43

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

777 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