Welcome to WebmasterWorld Guest from 23.22.140.143

Forum Moderators: not2easy

Message Too Old, No Replies

double padding?

ie seems to be adding double padding-top

     
1:39 pm on Oct 30, 2006 (gmt 0)

New User

5+ Year Member

joined:Oct 21, 2006
posts:30
votes: 0


I have absolutely no clue why IE is doing this, but it appears to be adding double padding-top. I have a div tag with text inside. The code looks like this:

css
*****************************
#content {
padding: 10px;
font-size: 12px;
background-color: #fff; }
*****************************

html
*****************************
<div id="content">text goes here</div>

when this gets displayed in IE there is 20px padding top. I tried to fix it via the double margin bug, but this is not the problem.

3:39 pm on Oct 30, 2006 (gmt 0)

Full Member

10+ Year Member

joined:Feb 18, 2005
posts:262
votes: 0


The way I would go is:

css
*****************************
#content {
font-size: 12px;
background-color: #fff; }

.contenttext {
padding: 10px; }
*****************************

html
*****************************
<div id="content"><p class="contenttext">text goes here</p></div>

--------------------------------

When adding padding in IE onto a div it will increase the height \ width by the amount of padding you have added, when working with specific heights \ widths you can get round this by deducting the amount of padding from the size of the div.

But the above should work spot on.

8:14 pm on Oct 30, 2006 (gmt 0)

New User

5+ Year Member

joined:Oct 21, 2006
posts:30
votes: 0


thanks so much for getting back, but i tried this out and it didnt work -- it produced exactly the same result. the strangest part is that it is just the padding-top. any other suggestions?
11:17 pm on Oct 30, 2006 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 14, 2005
posts:117
votes: 0


It seems to me that there must be more code involved than just the bit you've given. Could you tell us the context of that element (what are its parents, siblings, and children)?
3:14 am on Oct 31, 2006 (gmt 0)

New User

5+ Year Member

joined:Oct 21, 2006
posts:30
votes: 0


i actually used the holly hack to fix it -- just added * html #content {height: 1px;}

although i've heard this is getting fixed in IE7. anyone know if thats true?

7:18 am on Oct 31, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


When adding padding in IE onto a div it will increase the height \ width by the amount of padding you have added...

As it should do, in all standards compliant browsers (FF etc.), using a correct DOCTYPE.

But, like Ingolemo suggests, the code given in the first post is OK in itself - it renders correctly in FF, IE6 (with or without a DOCTYPE) - so the problem is possibly its interaction with other elements.