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

CSS

Posted by Paul Murphy
Paul Murphy
6,162 Points

Overlapping / Layout issues in IE

Hi Guys, I have put together my first website which is very basic and i'm having a few issues with layout www.calibishie-sandbar.com/accommodation.html on that page in IE the 3 images underneath the main image overlap the larger image and on a smaller viewport the images appear outside the containing DIV element..... any help appreciated!

2 Answers

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Hi Paul,

I took a quick look and noticed that the images are place inside of a div below the footer tag. I think you wanted them on the bottom of the main container (.container-contact). When I moved them inside of the main container and removed the bottom and left styles you had and replaced it with a margin of 0 30% it centered nicely. Not sure if that was the look you were going for but give it a try and let me know if it helps.

From my experience IE tends to be picky about everything. If you don't do things just right things end up looking bad in it. Even though all the other browsers things look fine.

Paul Murphy
Paul Murphy
6,162 Points

Hi Ricardo,

Thanks for getting back to me so quickly! That seemed to solve the issue of overlapping but now the footer has carried the anchor tag element for the third image. I believe that the tags are closed unless i'm missing something completely obvious.... any thoughts??

Thanks, Paul

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Hi Paul,

Glad it worked out! Looks like your not closing the anchor tags correctly. Usually they look like this:

<a href="#"  title="Superlink">Some text here </a>

You have them like this:

    <a href="imgs/window-view.jpg" target="blank" title="View">
    <img src="gallery-small/window-view-small.jpg" alt="" />
    <a href="imgs/guest-bedroom.jpg" target="blank" title="Bathroom">
    <img src="gallery-small/guest-bedroom-small.jpg" alt="" />
    <a href="imgs/guesth-bathroom.jpg" target="blank" title="Bedroom">
    <img src="gallery-small/guest-bathroom-small.jpg" alt="" />

So what is happening is that they are not closing correctly. Certain tags don't need to be closed like these:

<br />, <hr />, <img />, <input /> etc..

Which is why the image tags you have don't need to be closed but the anchor tags do.

I also noticed you are using lots of break tags in your html. Try to use margin instead if your trying to space things apart. Keep us posted on the project. I would love to see how it turns out!

James Barnett
James Barnett
39,199 Points

It should be noted that elements that don't require a closing tag are called void elements. In HTML5 the slash in void elements is optional.

So these are legal now ...

<br>, <hr>, <img>, <input>