IE 7 & 8 - CSS Help Please

[brisbaneguy29]

I have a problem with my CSS and I can't find where the problems lies. I am sure it is a padding / width issue but I can't see where I have gone wrong. Of course my problem only seems to show up in IE 8, but I would appreciate feedback form people using 7 as well.

http://www.devision.com.au/clients/bbchomes/

Here you should see a green box with 6 images inside. In Safari, Chrome, Firefox, all 6 images line up, but in IE, the last image sits low. Why? From what I have been told, it seems ok in IE7, but not IE8. From what I can see the images are 151px + 2 px border + 5 px padding = 160px per image = total width of 960px. The thumbs div is 970px, so why doesn't it fit?

My Stylesheet is below.

@charset "ISO-8859-1";
body {
	background-color: #4C4D4F;
	background-attachment: fixed;
	background-image: url(site_graphics/background.jpg);
	background-repeat: repeat-x;
	background-position: top;
	margin-top: 10px;
}

#thumbs { 
	width: 970px; 
	margin: 5px 0 0 0;
	height: 101px;
	overflow:hidden;
	border: 2px solid #99cc00;
	position:relative;
	
}
#thumbs ul { 
	 display:inline;
	 list-style-type:none; 
}
#thumbs li {
	float: left;
	
}
#thumbs a { 
	margin: 0 0 0 5px;
	width: 151px; 
	height: 94px; 
	display: block; 
	border: 2px solid #000000;
}
#thumbs a.activeSlide { 
	border: 2px solid #AC1F23; 
}
#thumbs  a:hover {
	border: 2px solid #AC1F23;
}

This is driving me nuts, and some feedback on where I have gone wrong would be appreciated.

 

[IgnatiusTheKing]

It appears that the margin property in your #thumbs a tag is the culprit. If you set the margin to 0 (instead of 0 0 0 5px), the last image no longer drops.

I haven't done all the math, but I would guess that your div isn't wide enough to hold every element. If you set it to be 1000px wide, that also keeps the image from dropping (though you end up with extra space on the right side).

 

[brisbaneguy29]

It appears that the margin property in your #thumbs a tag is the culprit. If you set the margin to 0 (instead of 0 0 0 5px), the last image no longer drops.

I haven't done all the math, but I would guess that your div isn't wide enough to hold every element. If you set it to be 1000px wide, that also keeps the image from dropping (though you end up with extra space on the right side).

Thanks for that, but by removing the margin, the images then touch, and I want them separated. Also making the enclosing div wider is not an option, this code is actually a snippet from a larger site, and the site is 970px wide. I just thought it was simpler to put this small HTML page and CSS file together, to make it easier to troubleshoot.

 

[agiphone]

First, you have a margin-left on all images of 5px. You can have the same margin between images by using margin-right:5px. If you need to have also a margin-left:5px on the first image in the list, you could use padding-left:5px on the container.
As previous poster noted, the sum of all image widths [img w + borders (2x) + margin-left] is probably > container width.

 

[brisbaneguy29]

First, you have a margin-left on all images of 5px. You can have the same margin between images by using margin-right:5px. If you need to have also a margin-left:5px on the first image in the list, you could use padding-left:5px on the container.
As previous poster noted, the sum of all image widths [img w + borders (2x) + margin-left] is probably > container width.

I know I have a 5px on the margin, I want it that way, and I am not sure why you recommend changing from left margin to right margin? It is still a 5px margin it doesn't change anything.

I have outlined the maths, and the sum is NOT greater than the container.
151px (image) + 4px border (2px border all round) + 5px margin = 160px per image x 6 images = 960px.

The container is 970px, so my question is have I done the maths wrong, or is there a bug in IE8? As I also said the page loads properly in all browsers including IE7, but not correct in IE8.

 

[SrWebDeveloper]

By setting image margin to right side, you can left justify the first image. This helps with alignment issues when every pixel counts.

 

[agiphone]

The container is 970px, so my question is have I done the maths wrong, or is there a bug in IE8? As I also said the page loads properly in all browsers including IE7, but not correct in IE8.

Yes, the math is good. The reason I mentioned margin-right: 5px instead of margin-left is that I've thought that you want to left align the images and still have the 5px separation between them. You can also do it the way you want.

I've took my time and actually looked deeper into your CSS and tested the page in IE8/7. Here are the changes I did in order to fix the problem:

#thumbs ul {
list-style-type:none;
margin: 0;
padding: 0;
}
#thumbs li {
float:left;
display:inline;
}

I normally use a reset style sheet in order to "zero in" all HTML, ul included. In your case, if you take the margin/padding out, you'll notice the browser default margin/padding applied to the ul. But the most important change is related to the li tag which needs to be display:inline; rather than the ul.

 

[7on]

Use a Strict doctype at the head of your document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">