Solved

IE6 adding additional padding or margin to div

Posted on 2008-06-26
17
1,316 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 4
  • +1
17 Comments
 
LVL 5

Expert Comment

by:codeQuantum
ID: 21876417
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
ID: 21876451
>> 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
ID: 21876798
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
Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

 

Author Comment

by:lexo
ID: 21877141
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
ID: 21877291
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
ID: 21879608
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
ID: 21879614
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
ID: 21881141
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
 
LVL 17

Expert Comment

by:mreuring
ID: 21904904
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
ID: 21904918
Oh, one mistake I made, it doubles the margin, not the padding: http://positioniseverything.net/explorer/doubled-margin.html
0
 

Author Comment

by:lexo
ID: 21911642
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
ID: 21911785
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
ID: 21911799
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
ID: 21913312
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
ID: 21935755
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
ID: 21937824
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
ID: 31471041
Thank you!
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

623 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