IE6 adding additional padding or margin to div

IE6 has a flaw that makes it interpret PADDING incorrectly. IE6 adds the padding to the size of the DIV, while Firefox subtracts it.

The best and easiest way to fix this is to use margins only.

>> IE6 has a flaw that makes it interpret PADDING incorrectly. IE6 adds the padding to the size of the DIV, while Firefox subtracts it.

In case I was not clear... since the padding is added to your culumn size in IE6, it becomes wider and there is not enough space left for the right column to fit next to the left column... This is why it is pushed down.

If you reduce the width of the left column, the right column will be where it should. (Use margins to put spaces between those columns and it should work.)

Why do you have this:

<div id="seo-guy"/>

located under this div:

<div id="sidebar">??

That may be throwing things off in IE as IE6 does like complex coding. Trust me, I've had to debug more than my share of IE6 troubles.

Thanks,
Brad

I put it there initally because I have text layed over the bottom part of the image on another page and I was having some z-index issues.  I put it back and I still have the same problem.

I also tried changing some padding to margins but then it looks bad in every browser.  Is there a particular div that I can change with minimal impact on current browsers?

I will have a look at your CSS.

To save me some time, could you specify the class names of your columns DIVs where you used padding?

But the concept is this : Suppose you have a content div inside a wrapper div. Suppose you had padding in the wrapper div... when you replace it, and to get the exact same results as with the padding, you should put the margin code into the content div, not the wrapper.

Do me a favor and tell me what happens when you do this:

#content {
      font-size: 12px;
      padding:0;
      background:url(images/col-tab-bk.jpg) repeat-x;
      _background:url(images/col-tab-bk.jpg) repeat-x scroll center;
}

Thanks,
Brad

Grrrrrrrr I meant this:

#content {
      font-size: 12px;
      padding:0;
      background:url(images/col-tab-bk.jpg) repeat-x;
      _background:url(images/col-tab-bk.jpg) repeat-x scroll top;
}

Well, I've gotten the right side to pop up...that's a start:

The img id should be ieDirtyFix2.

Do this also:

#seo-guy{
position:absolute;
top: 313px;
left:50%;
_left:49.75%;
margin-left:-355px;
width:38px;
height:71px;
background: url(images/seo-guy.jpg) no-repeat;
}
.narrowcolumn {
	float: left;
	padding: 0 10px 20px 10px;
	margin: 12px 0 0 28px;
	_margin: 12px 0 0 12px;
	width: 525px;
}

Select allOpen in new window

There's a well-known bug in IE6 with floats and padding. The first floated element within a given parent will have it's left-padding doubled, so where you set the padding-left to 20px in IE6 it'll be 40...

The solution is laughably simple, just apply display:inline to the element, while this has no rational behind it, it works...

.narrowcolumn { //style.css (line 530)
  float:left;
  margin:12px 0pt 0pt 28px;
  padding:0pt 10px 20px;
  width:525px;
  display: inline; //IE6 float-padding bugfix
}

Select allOpen in new window

Oh, one mistake I made, it doubles the margin, not the padding: http://positioniseverything.net/explorer/doubled-margin.html

mreuring....your solution is close.  The sidebar is back at the proper level.  However there is still some rouge padding or margin on the right of the main column in ie6 only.

For IE6, you have to hack the CSS a bit.

You would need to do something like this in order for it to work:
.narrowcolumn { //style.css (line 530)
  float:left;
  margin:12px 0pt 0pt 28px;
  padding:0pt 10px 20px;
  _padding:0pt 10px 40px;
  width:525px;
  _display: inline; //IE6 float-padding bugfix
}

Only IE6 will read the CSS style that have an underscore in front.

Thanks,
Brad

Or if it is the margins:

.narrowcolumn { //style.css (line 530)
  float:left;
  margin:12px 0pt 0pt 28px;
  _margin:12px 0pt 0pt 56px;
  padding:0pt 10px 20px;
  width:525px;
  _display: inline; //IE6 float-padding bugfix
}

I'm doing a quick cleanup run through my open assists. Do you need any more input on this matter?

If you're happy with the answer, pls resolve this question by accepting the relevant post(s). Alternatively, if you've solved matters through other means, please mark this question of deletion.

Cheers,

 Martin

Thanks Martin. I need to wait until I get back into the office on Monday to check this out.

Thank you!