Forum Moderators: not2easy
Space between center image and top menu table is different in IE compared to FF. I've always just lived with this, but now I'm curious as to a final fix.
Interestingly enough, the space between the same image and the bottom menu is exactly the same between both browsers. I'm thinking this may have to do with margins and padding differences in IE/FF, padding being the same, but margins displayed differently?
Thanks much.
[mod note] Summarised code added
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>TITLE</title>
<style type="text/css" media="screen">
body {
padding: 0px;
background-color: #000000;
margin: 0px;
}table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: top;
color: #CCCCCC;
}a {
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding: 0 4px;
text-align: center;
}a:hover {color: #FFFF00;}
p {margin: 0 0 7px 0;}
td {vertical-align: top;}table.maintable {
background-color: #000000;
padding: 0px;
margin: 0px auto;
}td.tdmenu {
margin: 0px 0px 0px 20px;
vertical-align: top;
padding: 0px 0px 0px 20px;
}.alignleft {
float: left;
margin-bottom: 20px;
padding: 1px 0;
}table.index {margin: 13px auto 0 auto;}
table.index img {border: 1px solid #FF3300;}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="maintable">
<tr>
<td class="tdmenu">
<span class="alignleft">
<a href="#">home</a><a href="#">landscape</a><a href="#">portrait</a><a href="#">other</a><a href="#">contact</a>
</span>
</td>
</tr>
<tr>
<td>
<table class="index" width="1%">
<tr>
<td><img title="PHOTOGRAPHY" src="image.jpg" width="500" height="333"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[edited by: SuzyUK at 10:14 am (utc) on Dec. 18, 2006]
[edited by: DougWD at 9:18 am (utc) on Dec. 20, 2006]
