Table problems

Blackvault · 16 Feb 2009 at 17:48

Hi

I have got a problem where my tables in IE are spanning many times wider than the web browser. While this is not an issue in Firefox.

Firefox

IE

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<head>
<title>My CV</title>
<meta name="Author" content="Peter Stuart" />
<meta name="Description" content="A website with my CV" />
<meta name="KeyWords" content="cv, work, business" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!-
body{
margin: 0;
padding: 1%;
font-family:Arial, Helvetica, sans-serif;
}

.content{
margin-left: 5%;
width: 90%;
}
div.header{
padding: 1%;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
color: #FFFFFF;
font-size:16px;
}
div.textcontent{
padding: 1%;
font-family:Arial, Helvetica, sans-serif;
width: 95%;
}
div.sectiontitle{
padding:1%;
font-family:"Times New Roman", Times, serif;
text-align:right;
}
table#contenttable{
width: 100%;
height: 219px

}
table#pdtable{
width: 100%;
valign: top;
background-color: B5CED6;
padding: 1px;
border: 2px;
}
table#edtable{
width: 100%;
valign: top;
background-color: B5CED6;
padding: 1px;
border: 2px;
}
table#wetable{
width: 100%;
valign: top;
background-color: B5CED6;
padding: 1px;
border: 2px;
}
table#whitespace{
width: 100%;
}
-->

</style>

</head>

<body>
<div class="content">
<table id="contenttable" border="0">
<tr>
<div class="header">
<td height="23" rowspan="2" align="left" bgcolor="4a848c" >
<a name="top" >CV Contents </a></td>
</div>
<td height="23" align="left" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="21" align="left" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td width="200px" height="219" valign="top" bgcolor="B5CED6"><ul>
<li><a href="#pa" title="Personal Details">Personal Details</a></li>
<li><a href="#ed" title="Education">Education</a></li>
<li><a href="#we" title="Work Experience">Work Experience</a></li>
</ul></td>
<td bgcolor="#FFFFFF"><table id="whitespace">
</table>
<table id="pdtable">
<tr>
<td><p><div class="sectiontitle">Personal Details</div></p>
<div class="textcontent">
<a name="pa"></a>
<p>Hello My name is peter stuart.</p>
<p>I'm 21 and studying computer science at queens.</p>
<p>blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</p></div>
<p align="right"><a href="#top">Top</a></p></td>
</tr>
</table>
<table id="edtable">
<tr>
<td bgcolor="B5CED6"><p><div class="sectiontitle">Education</div></p>
<div class="textcontent">
<a name="ed"></a>
<p>I went to Pond Park until 1999 then moved to Fort Hill College. </p>
<p>I did GCSEs and then Alevels.</p>
<p>Took a year out and then went to Queens.Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens Took a year out and then went to Queens </p></div>
<p align="right"><a href="#top">Top</a></p>
</td>
</tr>
</table>
<table id="edtable">
<tr>
<td bgcolor="B5CED6"><p><div class="sectiontitle">Work Experience</div></p>
<div class="textcontent">
<a name="we"></a>
<p>Architects</p>
<p>IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. </p>
<p>IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. IT Dept for Probation Board. </p>
<p>IT Dept for Probation Board. </p>
</div>
<p align="right"><a href="#top">Top</a></p></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>

Does anyone have any ideas?

Thanks

Blackvault

Confused · 17 Feb 2009 at 13:21

Is there a reason why you're using tables for layout rather than divs/CSS?

Mattus · 18 Feb 2009 at 03:16

Code:

div.textcontent{
padding: 1%;

This is your problem. I encountered this once - one of the myriad of IE CSS bugs is that percentage values for padding seem to make it throw a fit. Change it for a fixed value.

As Confused says, though, the hybrid of tables/CSS that you have there isn't particularly nice. Ideally I would rewrite it using CSS for layout. If the tables are staying, I would at least replace the presentational attributes with CSS. For example:

Code:

<td width="200px" height="219" valign="top" bgcolor="B5CED6">

That's a bit of a muddle and means that if you want to change the background colour of the sidebar, for example, you'll end up changing each cell individually. Change it for the CSS equivalent, something like:

Code:

<td class="sidebar">

[...]

td.sidebar { width: 200px; vertical-align: top; background: #b5ced6; }

(I got rid of the height as well because it could do ugly things if the user makes the font bigger.)

You also have some invalid HTML there which might render unpredictably. For example, you can't really do this:

Code:

<tr>
<div class="header">
<td>

... because having content inside of a table row but outside of a cell isn't valid. If you visualise the table layout, that div has nowhere to go

Hope this helps!

cochese · 19 Feb 2009 at 18:41

you will also have problems with the code of the page. you have <html> at the start and you dont need it and you are missing a <tr /> closing tag.

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd">
<head>
.........
.....
..
<tr>
<td width="200px" height="219" valign="top" bgcolor="B5CED6"><ul>
<li><a href="#pa" title="Personal Details">Personal Details</a></li>
<li><a href="#ed" title="Education">Education</a></li>
<li><a href="#we" title="Work Experience">Work Experience</a></li>
</ul></td>
<td bgcolor="#FFFFFF"><table id="whitespace">
</table>

Mattus · 19 Feb 2009 at 18:47

You also have several IDs which you've used more than once in the page. IDs have to be unique - replace them with classes.