CODEWITHSUNDEEP
htmlcssinternet-explorer
satya
satya

Reputation: 1959

Padding does not work in iE?

I would like to have space around the content, inside the border of the element.

http://www.w3schools.com/CSS/css_padding.asp

I have used cellpadding which is working pretty good in FF but not in IE. The version of IE that I am using is 7.0.5730.13

I have tried a simple table

<table style="padding:100px" border="1">
    <tr><td>123</td></tr>
    <tr><td>456</td></tr>
    <tr><td>678</td></tr>
    <tr><td>kuz</td></tr>
</table>

But the output does not have space at all.. If I am using padding tag at <td>. It is working good. As padding is not working in IE. I used an alternate method.

I have created two dummy rows; one on top, another on the bottom and dummy columns one on right another left and I styled them with padding. It is working. Please let me know if there is any better method to have space around the content.

Upvotes: 6

Views: 11759

Answers (5)

Fisher
Fisher

Reputation: 248

how about using margin to replace padding

margin: 5px 0 0 5px;

Upvotes: 0

Joeri Hendrickx
Joeri Hendrickx

Reputation: 17435

IE does not support padding on a table. I'm guessing you want to do this to have a space between the edge of the table and the content.

You can however have the same result by putting the table in a div (this is cross-browser).

<div style="padding:100px; border: solid black 1px">
  <table border="1" style="border: solid transparent 0px; width:100%">
        <tr><td>123</td></tr>
        <tr><td>456</td></tr>
        <tr><td> 678</td></tr>
        <tr><td>kzuk</td></tr>
    </table>
</div>

The div will mimic the table's outer border.

Edit: This will only work if your table is at 100% width. You can however, restrict the width of the div, but then you'd have to know how wide you want it to be.

<div style="padding:100px; border: solid black 1px; width:300px">
  <table border="1" style="border: solid transparent 0px; width:100%">
        <tr><td>123</td></tr>
        <tr><td>456</td></tr>
        <tr><td> 678</td></tr>
        <tr><td>kzuk</td></tr>
    </table>
</div>

Upvotes: 4

David Conde
David Conde

Reputation: 4637

Check that your ie is not running on quircks mode, verify that you placed these lines on top of your html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

They will prevent ie from loading quircks mode

Remeber, if you apply a padding to the table, like

<table style="padding: 100px">

This will leave a space between the table and its content, if you want to make space between cells and their content, is like vikrash said, or you may use cellpadding

Upvotes: 2

fatnjazzy
fatnjazzy

Reputation: 6152

http://www.w3schools.com/CSS/css_table.asp
Table padding is only implemented via a cell (td)

Upvotes: 2

Vikash
Vikash

Reputation: 989

You should use something like this:

<td style="padding: 10px">

CSS style 'Padding' should be applied to td not to table.

Upvotes: 1

Related Questions