No padding on a table in IE

[daGUY]

Seemingly simple request – I have a table and I just want to put some padding around the cells and the table itself. Here’s my code:

Code:

.table {
padding: 10px 0 0 10px;
width: 300px;
}

.table tr td {
padding: 0 10px 10px 0;
}

So what I’m doing is adding 10px of top and left padding to the table itself, then 10px of right and bottom padding to each cell. That creates a table where each cell is evenly spaced, both from other cells around it and the edges of the table.

Except of course for IE – the cell padding applies, but the padding on the actual table doesn’t take effect. Any ideas? Must be a box model thing.

[Chris Coyier]

I see you have .table instead of just table, is your markup:

Code:

…

Or is that causing the problem maybe?

[daGUY]

Yeah, it’s a class called "table" that’s applied to the table :lol:

That’s not the problem because the padding takes effect in Firefox, Safari, Chrome, etc…just doesn’t work in IE6 and IE7. Again, the padding on the cell applies (.table tr td) but not the padding on the table itself (.table).

My only thought is to put an (unnecessary) wrapper div around the table and apply the padding to that instead. I’ll try tomorrow.

[Chris Coyier]

If you have a live link that’s obviously always best… I can’t think off hand if IE just has a bug with this and doesn’t allow padding on tables… It could be though, in which case yeah, just throw an extra div around it and apply the padding that way. Sometimes you gotta just throw in the towel and use extra div’s to get through the day =)

[daGUY]

The wrapper div works, but not in my particular case. It’s too complicated to explain without being able to post a live link, but it involves Spry effects and other trickery. Basically, I’ll have to find a way to make it work with the padding on the table directly.

[Soh Tanaka]

do you have border-collapse: collapse; on your table with the padding?

.table {
border-collapse: collapse;
padding: #px;
}

[apostrophec]

did the collapse border rule resolve the issue with the table padding in IE? – ;)

[apostrophec]

I am having the same issue. I have a 10px padding all around inside my table – padding looks fine in FF, safari etc but once loaded in IE it ignores the padding. Any way to fix this? i tried the border collapse it it does nothing but messes up the padding in FF. HELP i have been pulling my hair out all night.. =(

thanks
joe

[AshtonSanders]

Do you have a link?

[apostrophec]

i sent you a link via PM.. thank you so much for your willingness to help@!! =)

[AshtonSanders]

Hey man,

The padding looks fine in IE6 and IE7. Did you do a hard refresh to make sure you re-loaded the CSS file?

You can also try adding a query string to your link to your css file.

ie: <link href="css/style.css?random" rel="stylesheet" type="text/css" />

Let me know,

[apostrophec]

You are the Man for looking into this for me..

Not sure what the string does, but i can try that.. can you tell me how that works?

I just pulled it up in ie7.. on a different computer that has not yet loaded the page and i’m not seeing the padding. look at the tables with the background color of yellow and blue.

Every table has a class of .whatyougetTables here is the rule:

.whatyougetTables {
width:600px;
margin-left:auto;
margin-right:auto;
border: 3px dashed #111111;
padding: 1px 10px 1px 10px;
background-color:#FFFFCC;
text-align:left;

}

FF pics up the padding within the table just perfectly but in IE all the text is smack to the left of the table with no spacing/padding..

any suggestions?

[AshtonSanders]

The querystring makes the file look like it has a different url, so it forces browsers to reload it.

Hmm. okay, I see what you’re running into.

I will mention that I don’t understand your reason for using tables for those boxes.

Since what you are trying to create is a dashed border around a table, just make a <div class="whatyougetTables"> and make that have the border, background color and padding. Then put your table inside that div without any background or border formatting.

Then you won’t need to use the tables later on where you don’t need them. I definitely recommend using Divs instead of tables for simple boxes.

Ashton Sanders

[Author]

Posts