I posted a similar thread in the html forums, but this might be a CSS problem, so here it is. I’m making a site for someone, and I am using tables for the layout. It displays correctly in Mozilla Firebird and Opera, but in IE, some of the cells are taller then they should be, creating empty space under some images. Here are screenshots:
[URL=http://www.radioactiverabbit.com/dbaudio/images/screen_mf.jpg]Mozilla Firebird
[URL=http://www.radioactiverabbit.com/dbaudio/images/screen_op.jpg]Opera[URL=http://www.radioactiverabbit.com/dbaudio/images/screen_ie.jpg]IE
Here’s my stylesheet:
[CODE]
A {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
A:link {
text-decoration:none;
}
A:visited {
text-decoration:none;
}
A:hover {
text-decoration:underline;
}
body {
margin:0;
color:#000000;
background-color:#6C2B29;
font-family:Times New Roman, Times, serif;
font-size:12px;
}
td#top {
background-image:url(“images/toplines.gif”);
background-repeat:repeat-x;
background-color:#6C2B29;
width:100%;
height:16px;
}
td#leftbar {
background-color:#6C2B29;
width:140px;
vertical-align:top;
}
div#leftnav {
background-color:#000000;
width:100%;
text-align:center;
vertical-align:top;
font-size:24px;
}
td#titlebar {
background-color:#6C2B29;
width:100%;
height:36px;
vertical-align:top;
}
td#titleunder {
background-color:#000000;
height:22px;
}
td#titlefull {
background-color:#FFFFFF;
width:100%;
height:30px;
vertical-align:middle;
}
td#content {
background-color:#FFFFFF;
vertical-align:top;
}
td#lct {
background-color:#FFFFFF;
vertical-align:top;
}
td#lcb {
background-color:#FFFFFF;
vertical-align:bottom;
}
td#footer {
background-color:#6C2B29;
vertical-align:middle;
}
img {
border:0;
}
table {
background-color:transparent;
border:0;
}
table#main {
background-color:#FFFFFF;
border:0;
}
tr {
border:0;
}
td {
font-size:12px;
padding:0;
}
hr {
background-color:#000000;
color:#000000;
}
.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}
.justify {
text-align:justify;
}
.header {
font-size:20pt;
}
The site is [url]http://www.radioactiverabbit.com/dbaudio.
[i]From the HTML 4.01 Specification:[/i][font=georgia]If you are going to go around breaking the rules then you cannot really complain about the results.[/font]
[b]Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.[/b]
[i]http://www.w3.org/TR/html4/struct/tables.html#h-11.1 [/i][/quote]
[CODE]
a {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
body {
margin:0;
color:#000000;
background-color:#6C2B29;
font-family:Times New Roman, Times, serif;
font-size:12px;
}
div#top {
background-image:url("images/toplines.gif");
background-repeat:repeat-x;
background-color:#6C2B29;
width:100%;
height:16px;
}
div#leftbar {
position:absolute;
top:16px;
left:0px;
background-color:#6C2B29;
width:140px;
}
div#leftnav {
background-color:#000000;
width:100%;
text-align:center;
vertical-align:top;
font-size:24px;
}
div#rightbar {
background-color:#FFFFFF;
margin-left:141px;
div#content {
background-color:#FFFFFF;
}
div#footer {
background-color:#6C2B29;
text-align:center;
font-style:italic;
}
img {
border:0;
}
table {
background-color:transparent;
border:0;
}
tr {
border:0;
}
td {
font-size:12px;
padding:0;
}
hr {
background-color:#000000;
color:#000000;
}
.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}
.justify {
text-align:justify;
}
.header {
font-size:20pt;
}
.maroon {
background-color:#6C2B29;
}
.black {
background-color:#000000;
}
.white {
background-color:#FFFFFF;
}
[/CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>
Untitled
</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
<i> </i>.container {
<i> </i> width: 100%;
<i> </i> height: 100%;
<i> </i>}
<i> </i>.main {
<i> </i> top: 0px;
<i> </i> left: 0px;
<i> </i> width: 100%;
<i> </i> padding: 0px;
<i> </i> background-image: url(<a href="http://www.radioactiverabbit.com/dbaudio/images/toplines.gif">http://www.radioactiverabbit.com/dbaudio/images/toplines.gif</a>);
<i> </i> background-repeat: repeat-x;
<i> </i> background-color: #FFFFFF;
<i> </i>}
<i> </i>.top {
<i> </i> position: relative;
<i> </i> top: 16px;
<i> </i> width: 100%;
<i> </i> background-image: url(<a href="http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg">http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg</a>);
<i> </i> background-color: #FFFFFF;
<i> </i> background-repeat: no-repeat;
<i> </i>}
<i> </i>.nav {
<i> </i> position: relative;
<i> </i> width: 140px;
<i> </i> height: 100%;
<i> </i> background-color: #000000;
<i> </i> background-image: url(<a href="http://www.radioactiverabbit.com/dbaudio/images/leftbottom.jpg">http://www.radioactiverabbit.com/dbaudio/images/leftbottom.jpg</a>);
<i> </i> background-repeat: no-repeat;
<i> </i> background-position: left bottom;
<i> </i>}
<i> </i>a {
<i> </i> font-family: Times New Roman, Times, serif;
<i> </i> font-size: 12px;
<i> </i> cursor: pointer;
<i> </i> color: #6C2B29;
<i> </i> background-color: transparent;
<i> </i>}
<i> </i>a:link { text-decoration: none; }
<i> </i>a:visited { text-decoration: none; }
<i> </i>a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div class="container">
<div class="main">
<div class="top">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="nav">
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="index.shtml">
Main
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 2
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 3
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 4
</a>
<br>
&nbsp; &nbsp; &nbsp; &nbsp;
<a href="#">
Page 5
</a>
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
&nbsp;
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</body>
</html>
[CODE]
body {
width:100%;
height:100%;
padding:0px;
margin:0px;
}
.container {
position:relative;
top:0px;
left:0px;
width:100%;
height:100%;
padding:0px;
margin:0px;
background-image:url(http://www.radioactiverabbit.com/dbaudio/images/toplines.gif);
background-repeat:repeat-x;
}
.main {
position:relative;
top:16px;
left:0px;
width:100%;
height:100%;
padding:0px;
background-image:url(http://www.radioactiverabbit.com/dbaudio/images/bg_topright.jpg);
background-repeat:repeat-x;
background-color:#FFFFFF;
margin:0px;
z-index:0;
}
.top {
position:relative;
top:0px;
width:100%;
background-image:url(http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg);
background-color:transparent;
background-repeat:no-repeat;
z-index:100;
}
.nav {
position:relative;
top:37px;
width:162px;
background-color:#6C2B29;
z-index:1;
}
.links {
width:100%;
background-color:#000000;
}
.content {
position:relative;
width:80%;
height:auto;
left:170px;
top:-37px;
margin:8px;
padding:0px;
background-color:#FFFFFF;
color:#000000;
font-family:Times New Roman, Times, serif;
font-size:12px;
text-align:left;
line-height:16px;
text-decoration:none;
}
a {
font-family:Times New Roman, Times, serif;
font-size:12px;
cursor:pointer;
color:#6C2B29;
background-color:transparent;
}
a:link {
text-decoration:none;
}
a:visited {
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
[/CODE]
body {
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
}
<i> </i>.container {
<i> </i> position: relative;
<i> </i> top: 0px;
<i> </i> left: 0px
<i> </i> width: 100%;
<i> </i> height: 100%;
<i> </i> padding: 0px;
<i> </i> margin: 0px;
<i> </i> background-image: url(<a href="http://www.radioactiverabbit.com/dbaudio/images/toplines.gif">http://www.radioactiverabbit.com/dbaudio/images/toplines.gif</a>);
<i> </i> background-repeat: repeat-x;
<i> </i>}
<i> </i>.main {
<i> </i> position: relative;
<i> </i> top: 16px;
<i> </i> left: 0px;
<i> </i> width: 100%;
<i> </i> height: 100%;
<i> </i> padding: 0px;
<i> </i> background-image: url(<a href="http://www.radioactiverabbit.com/dbaudio/images/bg_topright.jpg">http://www.radioactiverabbit.com/dbaudio/images/bg_topright.jpg</a>);
<i> </i> background-repeat: repeat-x;
<i> </i> background-color: #FFFFFF;
<i> </i> margin: 0px;
<i> </i>}
<i> </i>.top {
<i> </i> position: relative;
<i> </i> top: 0px;
<i> </i> width: 100%;
<i> </i> background-image: url(<a href="http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg">http://www.radioactiverabbit.com/dbaudio/images/bg_top.jpg</a>);
<i> </i> background-color: transparent;
<i> </i> background-repeat: no-repeat;
<i> </i> z-index: 2;
<i> </i>}
<i> </i>.nav {
<i> </i> position: relative;
<i> </i> top: -34px;
<i> </i> width: 162px;
<i> </i> background-color: #6C2B29;
<i> </i> z-index: 1;
<i> </i>}
<i> </i>.links {
<i> </i> width:100%;
<i> </i> background-color: #000000;
<i> </i>}
<i> </i>.content {
<i> </i> position: absolute;
<i> </i> width: 80%;
<i> </i> height: auto;
<i> </i> left: 170px;
<i> </i> top: 166px;
<i> </i> margin: 8px;
<i> </i> padding: 0px;
<i> </i> background-color: #FFFFFF;
<i> </i> color: #000000;
<i> </i> font-family: Times New Roman, Times, serif;
<i> </i> font-size: 12px;
<i> </i> text-align: left;
<i> </i> line-height: 16px;
<i> </i> text-decoration: none;
<i> </i>}
<i> </i>a {
<i> </i> font-family: Times New Roman, Times, serif;
<i> </i> font-size: 12px;
<i> </i> cursor: pointer;
<i> </i> color: #6C2B29;
<i> </i> background-color: transparent;
<i> </i>}
<i> </i>a:link {
<i> </i> text-decoration: none;
<i> </i>}
<i> </i>a:visited {
<i> </i> text-decoration: none;
<i> </i>}
<i> </i>a:hover {
<i> </i> text-decoration: underline;
<i> </i>}
0.1.9 — BETA 6.18