Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Jack Eccleshall
Jack Eccleshall
7,914 Points

Problems with IE

Ive googled these problems but have come to no avail. so thought i sick a post on here to see if anyone could help.

I'm working on a site and it works fine in every other browser apart from two little niggles. One in IE7 and one in IE8.

Here they are

IE7 Problem - I have a background image on the main content container and it overlaps into the footer. (Image link below)

https://www.dropbox.com/s/dt5h35k6yey7b3b/Image%20Background%20IE7%20Bug.jpg

IE8 Problem - The navigation overlap each other (image link below)

https://www.dropbox.com/s/mvxjw7hap639rcb/Navigation%20List%20IE8%20Bug.jpg

Here is a url to the test site so you can look at it if you want to.

http://www.amerdaleit.co.uk/ncs/index.php

Thanks Jack

3 Answers

Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer
Ernest Grzybowski
Ernest Grzybowski
Treehouse Project Reviewer

Not an answer to your question, but just checking out your work. Try http://tinypng.org/ in order to make your images load faster. That one image you have on top took a long time to load. Maybe that'll help.

Jack Eccleshall
Jack Eccleshall
7,914 Points
Jack Eccleshall
Jack Eccleshall
7,914 Points

Ernest Grzybowski - I found that earlier i forgot to add the smaller image to the server. that one was 4400+ px wide

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

I only briefly inspected the CSS, but have you tried using the overflow CSS to fix the IE thing?

{overflow: hidden;}

Here are some other thoughts:

+Add the overflow:hidden to the wrapper, as well as in the header/body/footer container divs

+Ditch the min-height in the wrapper and the height 100% in the body - using a the overflow:hidden with the the margins/padding set to "0 auto" will do what you're trying to do, but without the content overflow.

+In the footer: ditch the position:absolute

+You'll, then, need to probably reduce the padding-bottom of the content container

for the nav: +try the overflow:hidden on your

<div class="nav">

+ditch the margins on your LI in the nav menu (for now - it's either that the margins and padding + font size are freaking out IE -as in there is more content than space- OR it's an issue with the text overflowing the LI )

+once you remove the styling from your nav UL and LI elements, make sure it's bound within the div you have it wrapped in (either give it an odd background color, so you can see, or add a CSS outline [credit for outline goes to Jason]) +add the style back into the ul and li elements. --right/left padding don't need to be too crazy.

+Hint: float the nav menu to the right, and it will automatically line up there, and just give the LI elements a left-margin of 30px, and a right margin of 0px... versus 15 and 15.

THAT's a LOT... start there and update with progress if you're still stuck.