Forum Moderators: open
Anyway, please let me know what I can fix. It looks like the tables are just not obeying widths they are given. PLEASE HELP! I'm pulling out my hair.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example.com: Welcome</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="10"><img src="images/travel_01.gif" width="800" height="34" alt=""></td>
</tr>
<tr>
<td colspan="5"><img src="images/travel_02.gif" width="464" height="24" alt=""></td>
<td colspan="4" id="castlogin"> </td>
<td><img src="images/travel_04.gif" width="15" height="24" alt=""></td>
</tr>
<tr>
<td colspan="10"><img src="images/travel_05.gif" width="800" height="97" alt=""></td>
</tr>
<tr>
<td colspan="3"><img src="images/travel_06.gif" alt=""></td>
<td colspan="5" id="nav"><a href="index.php">Home</a> ¦ <a href="auditions.php">Auditions</a> ¦ <a href="about.php">About</a> ¦ <a href="current.php">Current Show</a> ¦ <a href="past.php">Past</a> ¦ <a href="team.php">Executive Team</a> ¦ <a href="thanks.php">Thanks</a> ¦ <a href="contact.php">Contact Us</a></td>
<td colspan="2"><img src="images/travel_08.gif" width="19" height="22" alt=""></td>
</tr>
<tr>
<td colspan="10"><img src="images/travel_09.gif" width="800" height="32" alt=""></td>
</tr>
<tr>
<td rowspan="3"><img src="images/travel_10.gif" width="41" height="52" alt=""></td>
<td colspan="4" rowspan="3"><img src="images/travel_11.gif" width="423" height="52" alt=""></td>
<td colspan="5"><img src="images/travel_12.gif" width="336" height="20" alt=""></td>
</tr>
<tr>
<td><img src="images/travel_13.gif" width="125" height="18" alt=""></td>
<td><img src="images/travel_14.gif" width="191" height="18" alt=""></td>
<td rowspan="2"><img src="images/travel_15.gif" width="1" height="32" alt=""></td>
<td colspan="2"><img src="images/travel_16.gif" width="19" height="18" alt=""></td>
</tr>
<tr>
<td colspan="2"><img src="images/travel_17.gif" width="316" height="14" alt=""></td>
<td colspan="2"><img src="images/travel_18.gif" width="19" height="14" alt=""></td>
</tr>
<tr>
<td colspan="2" id="leftbox"> </td>
<td colspan="6" id="content"><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text<br />
</p>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p></td>
<td colspan="2" id="rightbox"> </td>
</tr>
<tr>
<td colspan="10"><img src="images/travel_22.gif" width="800" height="24" alt=""></td>
</tr>
<tr>
<td colspan="4"><img src="images/travel_23.gif" width="405" height="37" alt=""></td>
<td colspan="5" align="right" valign="bottom" bgcolor="#E7D89D" id="footer">Copyright © 2008 example.com<br>
All rights reserved - Site design by [Name] and [Name]</td>
<td><img src="images/travel_25.gif" width="15" height="37" alt=""></td>
</tr>
<tr>
<td colspan="10"><img src="images/travel_26.gif" width="800" height="14" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="41" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="183" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="176" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="125" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="191" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="15" height="1" alt=""></td>
</tr>
</table>
</body>
</html>
[edited by: tedster at 9:59 pm (utc) on Oct. 23, 2008]
[edit reason] no personal urls, please [/edit]
W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]
[edited by: tedster at 4:50 pm (utc) on Oct. 23, 2008]
[edit reason] no personal urls or details please [/edit]
It looks like the tables are just not obeying widths they are given.
That's one of the issues with table layouts. According to the W3C, browsers may treat table and cell width rules more like suggestions and disregard them as the need to. Without that wiggle room, web authors could easily write mark-up that ties a browser up in knots.
If you are sure you have valid code, I'd suggest using the Web Developer add-on for Firefox to help you pin down more precisely what's going on. You could also temporarily create borders for tables and cells to see more exactly what the browser is doing.
1. remove the css rules for your IDs and classes one by one from your css rules. If one removal doesn't change the situation, put it back and remove the next. This way you might isolate which css rule is making trouble.
2. remove each <tr> from the table completely, one by one, and see if one of them is where the problem lives.
what's the CSS?
/* CSS Document */body {
background-image : url(images/bg.png);
background-color : #cdb659;
background-repeat : repeat-y;
background-position : top center;
padding : 0;
height : auto;
margin : 0 auto;
margin-top : 0;
}
div, p, h1, h2, h3, h4, h5, h6, img, ul, form {
padding : 0;
margin : 0 0 0 0;
}
td {
vertical-align : top;
}
ul {
list-style-type : armenian;
}
.clearcols {
clear : both;
}
a:link {
color : #400000;
text-decoration : underline;
}
a:visited {
color : #400000;
text-decoration : underline;
}
a:hover {
text-decoration : underline;
color : #ff0000;
}
a:active {
text-decoration : none;
color : #ff0000;
}
#layout {
width : 800px;
margin : 0;
padding-top : 0;
margin-top : 0;
background : url(images/travel_01.gif) no-repeat;
display : block;
height : 34px;
}
#castlogin {
width : 321px;
height : 24px;
margin : 0;
padding-top : 0;
margin-top : 0;
background-image : url(images/travel_03.gif);
background-repeat:no-repeat;
display : block;
}
#castlogin_r {
width : 15px;
height : 24px;
margin : 0;
padding-top : 0;
margin-top : 0;
background-image : url(images/travel_04.gif);
background-repeat:no-repeat;
display : block;
}
#nav {
width : 552px;
height : 22px;
background-image : url(images/travel_07.gif);
display : block;
font : 13px Arial;
color : #400000;
text-align : right;
vertical-align : bottom;
padding : 0;
margin : 0 0 0 0;
}
#nav a {
color : #400000;
text-decoration : none;
}
#nav a:hover {
color : #ff0000;
text-decoration : underline;
}
#leftbox {
width : 46px;
margin : 0;
padding-top : 0;
margin-top : 0;
background-image : url(images/travel_19.gif);
background-repeat: repeat;
}
#content {
width : 735px;
background-color : #e7d89d;
font : 13px Arial;
color : #000000;
text-align : left;
white-space:normal
}
#rightbox {
width : 19px;
margin : 0;
padding-top : 0;
margin-top : 0;
background-image : url(images/travel_21.gif);
background-repeat: repeat
}
#footer {
font : 10px Arial, Helvetica, sans-serif;
display : block;
vertical-align : bottom
}
display : block;
you have that applied to both the table and the table cells. That is affecting the whole behaviour of the the layout in browsers that are able to switch between "block" and "table cell".
Some of your containers are acting like blocks (divs to most!) instead of table cells, and indeed only if you're viewing in the browsers that even know to change that property, will you actually see THE difference;)
IMHO what you are trying to do is showing correctly in FF, but until IE starts to support the table properties you aren't going to get a true comparison about what should/could be
[edited by: SuzyUK at 10:23 pm (utc) on Nov. 12, 2008]
