Padding and margins consistent in both FF and IE please

HTML & CSS
1

Has anyone found a way of making padding and margins consistent in both FF and IE please?

2

Padding and margin are pretty consistent in both once you set them so you will need to be more explicit.:slight_smile: You don;t usually need t do anything assume you have a full valid doctype.

If you are talking about element defaults then set them to what you need and then they will be exact. A small reset (not the bloated ones) will do to set some standard defaults.

If you are talking about bugs (percentage margin or double margin bugs in Ie6) then they are specific issues that need to be addressed on a case by case basis.

It all depends on where you see this as a problem exactly?

3

Thanks Paul, the doctype is <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
and the padding and margins for table elements is not consistent in FF 4 or IE7

4

Hi,

The doctype’s fine so you should be ok to go.

Here’s an example that is pixel perfect across IE, Firefox and Safari.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type"text/css">
table{
    width:760px;
    margin:0 auto;
    padding:0;
    border-collapse:collapse;
    background:#fcf;
    line-height:1.0;
    font-size:100%;
}
th{font-weight:bold}
td,th{
    padding:25px;
    border:1px solid #000;    
    vertical-align:middle;
    text-align:center;
}
</style>
</head>
<body>
<table>
    <tr>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
</table>
</body>
</html>

You’ll have to provide an example of where it’s not working for you for us to debug further as the basic structure as above is fine.

5

Thanks Paul, this is helping a lot. Two things though, how would you do it pixel perfect for column widths please? Also, in the css, the table was 760px wide, and then further down in the html, it was 100%??

6

If you weren’t worried about IE6 and 7 you could do much the same as ie8 and others seem to agree and display it much the same. However IE6 and 7 add the padding to the cell width so the whole thing gets bigger so the only solution is to add an inner div for the padding if pixel perfection is required.

You should always work out the total width for the table just to be sure.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type"text/css">
table{
    width:856px;
    margin:0 auto;
    padding:0;
    border-collapse:collapse;
    background:#fcf;
    line-height:1.0;
    font-size:100%;
    table-layout:fixed;
}
th{font-weight:bold}
td,th{
    padding:0;
    border:1px solid #000;    
    vertical-align:middle;
    text-align:center;
}
.col1{width:100px}
.col2{width:150px}
.col3{width:125px}
.col4{width:225px}
.col5{width:250px}
.cellwrap{padding:25px;}

</style>
</head>
<body>
<table>
    <colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
    <col class="col4" />
    <col class="col5" />
    </colgroup>
    <tr>
        <th scope="col"><div class="cellwrap">Header</div></th>
        <th scope="col"><div class="cellwrap">Header</div></th>
        <th scope="col"><div class="cellwrap">Header</div></th>
        <th scope="col"><div class="cellwrap">Header</div></th>
        <th scope="col"><div class="cellwrap">Header</div></th>
    </tr>
    <tr>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
    </tr>
    <tr>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
    </tr>
    <tr>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
    </tr>
    <tr>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
    </tr>
    <tr>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
        <td><div class="cellwrap">Column</div></td>
    </tr>
</table>
</body>
</html>

If IE6 and 7 support isn’t required then just add the padding to the td and remove the inner div.

Also, in the css, the table was 760px wide, and then further down in the html, it was 100%??

Aaarghh how did that get in there.:slight_smile:

Sorry I copied some table html for the quick demo and thought I’d stripped the rubbish out as there should be no width attribute in that table. The css would have over-ruled it anyway as it takes precedence of attributes other than the style tag. Just remove it.

7

Many thanks Paul, it’s all starting to make sense. If you wanted to make it totally consistent in the cell widths for FF3, FF4, IE6,7 and 8, what would you do then please?

8

I’d avoid padding on the cells but add it to inner elements instead and then ensure that the cell widths add up to the table width.

Tables are a special case because they depend on content and will stretch even or shrink even when widths/heights are set which is why people who use tables for layout like them because they don’t break so easily. However that same behaviour leads to inconsistency in cell size which is why the spacer gif evolved to force the issue.

In my limited tests its usually only IE6 and 7 that differ but following the above example in my previous post things are pretty consistent.

I suppose it all depends on what you are trying to do as usually it wouldn’t make much difference if you allow the cells to size themselves depending on content.

9

Okay, I’ll take off the padding on cells, but what inner elements can you add it to please?

Yep, am finding that even if the columns are all set at exactly the same width, they will auto adjust according to what length text is within them. Is there any way for cell widths to have EXACTLY the same widths, regardless of what text is in them please?

10

The table-layout: fixed in Paul’s example should accomplish that.

11

Yep, that’s correct, but as you can see, was referring to cell widths,

12

If the contents are to be equally distributed between all available cells then remove the widths from the cells and table-layout:fixed will automatically evenly distribute the content. The fixed layout algorithm should make them equally divide assuming that you don’t have oversized content in any one cell in which case that cell will most likely just push wider.

Perhaps we need to see an example of what you are doing and why this is going to be an issue?

13

Thanks Paul, bit tricky to show content at the moment, but the trouble is, is that there’s 4 tables, with varying lengths of text in all of the cells in all of the tables, and because the length of text in one table is wider than in other tables, it’s pushing the relevant cell width wider than the cells in the other tables. Just looking for a way to make all columns to be exactly the same width, regardless of the length of text which is in the cells.

14

You should just be able to do this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type"text/css">
table{
    width:760px;
    margin:0 auto;
    padding:0;
    border-collapse:collapse;
    background:#fcf;
    line-height:1.0;
    font-size:100%;
        table-layout:fixed;
}
th{font-weight:bold}
td,th{
    padding:25px;
    border:1px solid #000;    
    vertical-align:middle;
    text-align:center;
   word-wrap:break-word;
}
</style>
</head>
<body>
<table>
    <tr>
        <th scope="col">Header header header</th>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
        <th scope="col">Header</th>
    </tr>
    <tr>
        <td>Column column column </td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
</table>
</body>
</html>
15

Thanks Paul, perhaps I should expand a bit, as mentioned, trying to get the cells to be exact widths, but because of the lengths of some of the text within them, some of the column widths are changing. For example, all of the column widths should be:
<thead>
<tr>
<th width=“114px”><b>First column</b></th>
<th width=“170px”><strong>Second column</strong></th>
<th width=“186px”><b>Third column</b></th>
</tr>
</thead>

Is there any way of the column widths always being the exact widths above, regardless of what is in them please?

Thanks.

Dez

16

If you don’t have oversized content you can do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type"text/css">
table{
    margin:0 auto;
    padding:0;
    border-collapse:collapse;
    background:#fcf;
    line-height:1.0;
    font-size:100%;
    table-layout:fixed;
}
th{font-weight:bold}
td,th{
    padding:5px 10px;
    border:1px solid #000;    
    vertical-align:middle;
    text-align:center;
}
.col1{width:94px}/* 94px + 20px padding= 124px*/
.col2{width:175px}/* 175px + 20px = 195px*/
.col3{width:166px}/* 166px + 20px = 186px*/

</style>
</head>
<body>
<table>
    <tr>
        <th class="col1" scope="col">header</th>
        <th class="col2" scope="col">header</th>
        <th class="col3" scope="col">header</th>
    </tr>
    <tr>
        <td>Column Column Column Column Column </td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
    <tr>
        <td>Column</td>
        <td>Column</td>
        <td>Column</td>
    </tr>
</table>
</body>
</html>

The widths are added to the first row which sets the width for the whole table and if you use a class on the “th” itself instead of the col element I used before then all browsers add the padding in to the mix so you can make them all the same.

However if you have fixed width content such as unbroken text then you will need to nest a div and apply a width to the div as well and then set word-wrap:break-word.

17

Many thanks Paul, will do some more work on this and come back to you.

18

Hi Paul, thanks for your time on this. One thing, what’s the bits in bold all about please?

.col1{width:94px}/* [B]94px + 20px[/B] padding= 124px*/
.col2{width:175px}/* [B]175px + 20px = 195px[/B]*/
.col3{width:166px}/* [B]166px + 20px = 186px[/B]*/
19

That was just showing you what the total width was going to be as the padding is added to the width of the cell but it looks like I can’t add up as 94px + 20px is 114px not 124px :slight_smile: