Margins around images in IE problem

[bigcougar]

I get some margins around images and divs in IE that I am unable to figure out.

I tried about everything and have no idea where the source of my problem is.

In IE6 the page below has a distinct margin of about 2-3px right below the banner.
http://www.troutsalmonchar.com/

The page I am working on today is this one:
http://www.troutsalmonchar.com/Pages/Salmo_MAIN_ARCHAR.php

It has a margin of about 10px added to the right side of my side navigation div and the whole right panel with fish info is pushed down below it. There it begins at the correct horizontal coordinate on the page.

How can I make those margins go away in IE6?

 

[d a v e]

first thing i would do is fix your validation errors - in particular the replicated ids. ids should be unique per page.

looks like it might be a box model problem...

 

[smoovo]

I can't point for sure, but there is something that might be your problem, not only in one page, it's something you need to always remember.

Padding size added automatically to the width or height size. If you styling width to "100px" and adding padding to it, let's say "padding-left:10px" your div will be 110px wide now. If you want it to be 100px with 10px padding you should write

"width:90px; padding-left:10px;"

In your CSS page i noticed that the "divider" div has 290px width with 15px left padding...

.divider {
	width: 290px;
	height: 20px;
	font-size: 12px;
	font-weight: bolder;
	color:#232F32;
	text-align: left;
	padding-left: 15px;
}

So your "divider" gets 305px width, and force the "SideWrapper" width too. Try to change it to

.divider {
	width: 275px;
	height: 20px;
	font-size: 12px;
	font-weight: bolder;
	color:#232F32;
	text-align: left;
	padding-left: 15px;
}

And maybe it will fix it for now. But try to look for another bugs like this one here. One bug can be annoying, and if it's style for all the pages, so all of them will get this effect.

I hope i helped.

 

[bigcougar]

Thanks guys! That is great help!

I didn't know the padding would increase the overall width of a div.
The smart browsers were correcting my mistakes while IE made the mistakes obvious.

Dave, where should I look to find the validation errors? I am sure I have some of them.

IE must be #1 for debugging purposes.

 

[smoovo]

I'm glad your problem solved

To validate your website just go to W3C Validator and put each page url and check it. Go through errors and fix them one by one.

Good luck.

 

[bigcougar]

I'm glad your problem solved

To validate your website just go to W3C Validator and put each page url and check it. Go through errors and fix them one by one.

Good luck.

Thanks smoovo, your observation on the div class was spot on!

The only thing I am still puzzled with is the 3px margin appearing below images in IE6. The margin does not appear in IE8.

 

[smoovo]

NP.

About the 3px space, i found this for you http://www.positioniseverything.net/explorer/threepxtest.html. Try to fix it, if you can't post again and i will try to do it for you.