Solved

IE6 adding additional padding or margin to div

Posted on 2008-06-26
17
1,302 Views
Last Modified: 2013-12-08
Take a look at http://72.167.159.190.  There is an issue with the two column format in IE6 only.  FF and IE7 look great.  I'm looking for a solution that will ensure cross browser compatability.
0
Comment
Question by:lexo
  • 6
  • 4
  • 4
  • +1
17 Comments
 
LVL 5

Expert Comment

by:codeQuantum
Comment Utility
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.
0
 
LVL 5

Expert Comment

by:codeQuantum
Comment Utility
>> 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.)
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
Comment Utility
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
0
 

Author Comment

by:lexo
Comment Utility
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?
0
 
LVL 5

Expert Comment

by:codeQuantum
Comment Utility
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.
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
Comment Utility
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
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
Comment Utility
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;
}
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
Comment Utility
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;

}

Open in new window

0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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

}

Open in new window

0
 
LVL 17

Expert Comment

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

Author Comment

by:lexo
Comment Utility
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.
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
Comment Utility
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
0
 
LVL 7

Expert Comment

by:Brad Dobyns, CSM
Comment Utility
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
}
0
 
LVL 17

Accepted Solution

by:
mreuring earned 500 total points
Comment Utility
The problem with the extra 'padding' on the right side is because of another bug in IE6. Or actually, the reason it doesn't _show_ on the other browser is because of a bug in IE6.

The content of your #content div is actually wider than the width set for #content. Now most browsers by default will not expand the div to contain the extra content (default should be overflow: visible), however IE6 has a critical flaw in its' layout engine in that by default it will ignore width and/or height restrictions if the content of said element is bigger than the required dimensions. In effect IE handles width and height as min-width and min-height.

There's two ways to solve this, the more labor intensive option is to hunt down all the content that is too big (one of them I can point you at is #intro, width 475, padding-left 50, padding-right 5, total width 530, that's 5 too many) and adjust their setting so that they fall within the 525px you've assigned for the content.

Alternatively the quick and reliable way is to set overflow: hidden on the #content div. That way you'll ensure that whatever is going to happen inside the div, it won't break the layout.

As for a tip on how I go about finding these issues, I recommend installing the 'IE Developer Toolbar' and for Firefox install the FireBug plugin, they're essential tools to me :) Have a play around with them!

Hope this all helps,

 Martin
0
 
LVL 17

Expert Comment

by:mreuring
Comment Utility
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
0
 

Author Comment

by:lexo
Comment Utility
Thanks Martin. I need to wait until I get back into the office on Monday to check this out.
0
 

Author Closing Comment

by:lexo
Comment Utility
Thank you!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now