Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS No padding on a table in IE

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #24512
    daGUY
    Member

    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.

    #55900
    Chris Coyier
    Keymaster

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

    Code:

    Or is that causing the problem maybe?

    #55913
    daGUY
    Member

    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.

    #55918
    Chris Coyier
    Keymaster

    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 =)

    #55943
    daGUY
    Member

    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.

    #55947
    Soh Tanaka
    Member

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

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

    #56790
    apostrophec
    Participant

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

    #56791
    apostrophec
    Participant

    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

    #56795
    AshtonSanders
    Participant

    Do you have a link?

    #56806
    apostrophec
    Participant

    i sent you a link via PM.. thank you so much for your willingness to [email protected]!! =)

    #56808
    AshtonSanders
    Participant

    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,

    #56809
    apostrophec
    Participant

    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?

    #56817
    AshtonSanders
    Participant

    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

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.