Welcome to WebmasterWorld Guest from 35.172.195.49

Forum Moderators: open

Message Too Old, No Replies

Tables expanding, I cant figure it out!

Same old firefox problem, but still trying to fix

     
8:12 am on Oct 23, 2008 (gmt 0)

New User

10+ Year Member

joined:Oct 23, 2008
posts: 5
votes: 0


Hi folks,
I have been spending days on figuring out why my site is looking messed up in Firefox. Of course it looks fine in IE, but not in other browsers. I realize tables are not the best to use, but I do not know CSS well enough to design layouts even though I am using a lot of css with the site. This site had to be done fast.

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]

4:23 pm on Oct 23, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Oct 17, 2008
posts:69
votes: 0


maybe validate it? there are 111 errors in your code...

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]

8:48 pm on Oct 23, 2008 (gmt 0)

New User

10+ Year Member

joined:Oct 23, 2008
posts: 5
votes: 0


I already did validate it with both css and html. I got it to come out without any errors and I still had the same problem. I have made some changes since and thats why the validaters come up with errors.
10:17 pm on Oct 23, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

11:16 pm on Oct 23, 2008 (gmt 0)

New User

10+ Year Member

joined:Oct 23, 2008
posts:5
votes: 0


Thanks, I will try that.
11:42 pm on Oct 23, 2008 (gmt 0)

New User

10+ Year Member

joined:Oct 23, 2008
posts:5
votes: 0


Ok, if I take off the css styles, the tables do not get crazy. However I still do not understand how to fix it. For some reason the cell with tavel_02.gif in it expands really long. This s the same problem I am having in other cells.
1:42 am on Oct 24, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


You might try these two troubleshooting approaches:

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.

6:26 pm on Oct 24, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


>> Ok, if I take off the css styles, the tables do not get crazy.

what's the CSS?

7:55 pm on Oct 25, 2008 (gmt 0)

New User

10+ Year Member

joined:Oct 23, 2008
posts:5
votes: 0


Ok I still couldn't figure it out after taking things out individually. Here is 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
}

10:21 pm on Nov 12, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


very quick reply.. sorry it's late

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]