I have a grid of 7 x 5 small divs lined up, some of which contain linked thumbnail images, and others which are left empty.

The divs line up perfectly in every browser I have tested on except IE8. In IE8 the images in some of the divs are pushed out and forcing the whole grid to break.

I have attached the source code.

I am lost as to whats causing the problem, I have used a the same grid method in the past and its worked fine!

Any help would be very much appreciated!

7 answers

3
points
This was chosen as the best answer

Wow, this one was a doozy. I have a fix for you, however.

This is a case where IE8 was actually doing the right thing, and Firefox was being WAY too lenient (oh the irony). Anyway, in your grid there were a bunch of un-closed a-tags (see code below).

What I would strongly recommend is that you run your code through the W3C validator and make sure that it adheres to the XHTML 1.0 Transitional spec (what you're working with) - you've got a bunch of little errors (and don't let the number scare you off; often times fixing one problem clears a bunch of errors, so just keeping picking away at it 'til you get the all-clear). That would have made solving this particular problem infinitely easier.

Anyway, I went through and removed all of the <div class="clear"></div> declarations like Efficient Pixel suggested, 'cause you don't need them, and then just did some code cleanup. The culprit was that you had a bunch of tags that looked like this:

<a href="#" [insert lots of JS stuff here]</a>

Basically, the first half of the anchor tag's pairing wasn't closed. It should look like this:

<a href="#" [insert lots of JS stuff here]></a>

I marked where I had to close tags (a few image tags were left unclosed, too). Also, in XHTML you want to make sure that your tags are all properly closed, and stuff like img tags need to be closed to (so, they'll end up looking like this: <img [attributes here] />

Here's the working code (no sense having you re-do the work I've already done, but I'd make sure that I didn't break any of your Javascript stuff inadvertently). I'm adding it in as a Gist link because it's really long otherwise.


As a side note, the sidebar that has the information about you, you have the "About Me" and "Design Services" paragraphs inside of a ul -> the structure looks something like this:

<li>
  <a href="#">About Me</a>
  <ul>
    <p>My name is Aislinn Kelly. In case you are wondering, that's pronounced "ash-linn". It's Irish (as am I). I am a graphic and web designer with a passion for creating functional, attractive and creative designs.
      I have a degree in Multimedia from Dublin City University, and am currently based in Dublin.</p>
  </ul>
</li>
<li>
  <a href="#">Design Services</a>
  <ul>
    <p>Graphic Design, Illustration, Web Design &amp; SEO, Desktop Publishing, 3D Modelling, Motion Graphics, Animation, Photo-Retouching</p>
  </ul>
</li>

You don't need the ul tags around the paragraphs, and actually what you can do (to style the paragraphs) is use either an id or a class on the li that hold those bits and then with your CSS you can style up that content to look like how you have it, and then you don't need the paragraph tags either. Also, for the sake of semantics, I would make the "About Me" and "Design Services" links headings as well (probably an h3).

Sorry, that got a bit long and ranty. I hope this helps.

Answered over 7 years ago by Michael Tierney
2
points

I believe it may have something to do w/ those <div class="clear"> that you have going on. I noticed in your code that you forgot to add one in after the second row. You shouldn't need the clears, so try removing all of them. I think that is why the first 3 rows wrap nicely, because you forgot the "clear" after the second row.

Also double check your code. It appears you may have added in some extra "a" and "img" tags

Answered over 7 years ago by Efficient Pixel
1
point

When in doubt, validate your code. It usually helps sort things out.

Answered over 7 years ago by Ryan Jenkins
1
point

Yeah, having the extra a-tags isn't helping any, but the main problem is that there are a bunch of unclosed tags. Firefox is closing them intelligently, while IE is interpreting the code literally.

Answered over 7 years ago by Michael Tierney
0
points

Ok I've removed all the clears and the layout isnt breaking quite so much, but it still hasnt fixed the issue, the end div is still pushing the layout down at the end of each row?

Answered over 7 years ago by Aislinn
0
points

Ok I've removed all the clears and the layout isnt breaking quite so much, but it still hasnt fixed the issue, the end div is still pushing the layout down at the end of each row?

Answered over 7 years ago by Aislinn
0
points

i just had a quick look at it, dont have time to get into the details right now though, but how about removing all the 'extra' a-tags (the ones with the links to the second, third, ... lightbox-images) out of the grid, and put them somewhere else on the page in a hidden div. So no browser will have problems rendering the grid.

You may also try to float your a-tags within your thumb-divs, and give them the exact width and height.

i'll have a better look lateron when i'm on not on my laptop :) good luck and i'll get back to it!

Answered over 7 years ago by Dries Delaey