Welcome to WebmasterWorld Guest from 54.161.110.186

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)

5+ Year Member



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)

10+ Year Member



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)

5+ Year Member



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)

5+ Year Member



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)

5+ Year Member



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)

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



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month