Solved

IE6 adding additional padding or margin to div

Posted on 2008-06-26
17
1,309 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
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Writing and Selling Web App Based on Google Sheets 2 46
remove all history 3 32
Help with query 3 26
FireFox Add-on Plugins 3 26
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 …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
The viewer will learn how to count occurrences of each item in an array.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

803 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