Hello all,
am very frustrated because I can't get a simple table to display the same way in both browsers. It displays the way I want it to in Firefox but not in IE7 (Windows XP).
1) not sure if my doctype is correct- this is just a plain vanilla html page, so I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
2) I have tried to put cell padding=0, margin=0 on the table and the table cells in both the style sheet and the html document. No combination has worked so that IE7 will display the table row without the slight padding at the bottom of the row.
I have added a border so that you can clearly see that the bottom of the rounded red corners do not touch the bottom of the row.
I've even set the width and height of the table cells to those of the graphic but no luck. (I've checked the graphic, there is no white border around it).
3) I can't get the center td's contents (a 1px by 1px graphic that I've stretched to 300 px) to align to the top in IE7.
Any help is appreciated, thank you!
Here's the page ...
Here is my html page's code:
am very frustrated because I can't get a simple table to display the same way in both browsers. It displays the way I want it to in Firefox but not in IE7 (Windows XP).
1) not sure if my doctype is correct- this is just a plain vanilla html page, so I used
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
2) I have tried to put cell padding=0, margin=0 on the table and the table cells in both the style sheet and the html document. No combination has worked so that IE7 will display the table row without the slight padding at the bottom of the row.
I have added a border so that you can clearly see that the bottom of the rounded red corners do not touch the bottom of the row.
I've even set the width and height of the table cells to those of the graphic but no luck. (I've checked the graphic, there is no white border around it).
3) I can't get the center td's contents (a 1px by 1px graphic that I've stretched to 300 px) to align to the top in IE7.
Any help is appreciated, thank you!
Here's the page ...
Here is my html page's code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Foreclosure Prevention USA home page
</title>
<style>
h1 {color: #ff0000; font-size: 26px; font-family: arial;}
table {
border-collapse: collapse;
padding: 0px;
margin: 0px;
}
tr {
padding: 0px;
margin: 0px;
}
td {
padding: 0px;
margin: 0px;
}
td.cellTopAlign {vertical-align: top;}
td.cellBottomAlign {vertical-align: bottom;}
</style>
</head>
<body>
<h1>Foreclosure Prevention USA home page
</h1>
<table border="1" cellpadding="0" cellspacing="0">
<tr height="65px">
<td class="cellTopAlign"><img src="top_left_rounded_corner.jpg" width="65px" height="65px"/>
</td>
<td class="cellTopAlign"><img src="pixel.jpg" width="300px" height="1px"/>
</td>
<td class="cellTopAlign"><img src="top_right_rounded_corner.jpg"width="65px" height="65px"/>
</td>
</tr>
</table>
</body>
</html>
Comment