5 Replies - 2959 Views - Last Post: 04 January 2009 - 04:48 AM

#1 edu2004eu  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 81
  • Joined: 27-August 07

XHTML 1.0 Strict messes up table

Posted 29 December 2008 - 07:52 AM

I am making my personal site in Photoshop CS4 and using the slice/import into DreamWeaver feature. After finishing the design, I opened the page with DW and made it XHTML 1.0 Strict and made the required modifications so that it perfectly passes the test. Now my site looks awful... I'll post 2 screenshots and the code, maybe someone can help me?

First one is with the XHTML strict declaration, second is without.

<head>
<title>template_new</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
	background-color:#333333;
	margin:0;
}
table { margin-left:auto; margin-right:auto; text-align: center; }
td,tr{margin:0; padding:0; }
</style>
</head>
<body>
<!-- Save for Web Slices (template_new.psd) -->
<table style="border-left:1px solid #000; border-right:1px solid #000; width:800px; height:601px;" id="Table_01" cellpadding="0" cellspacing="0">
	<tr>
		<td rowspan="14">
			<img src="images/template_new_01.jpg" style="width:8px; height:600px" alt="" /></td>
		<td colspan="7">
			<img src="images/template_new_02.jpg" style="width:782px; height:11px" width="782" height="11" alt="" /></td>
		<td rowspan="14">
			<img src="images/template_new_03.jpg" width="10" height="600" alt="" /></td>
	</tr>
	<tr>
		<td colspan="5" rowspan="6">
			<img src="images/template_new_04.jpg" width="738" height="112" alt="" /></td>
		<td>
			<a href="#"
				onmouseover="window.status='English';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/template_copy_05.jpg" width="32" height="21" style="border:0" alt="English" /></a></td>
		<td rowspan="6">
			<img src="images/template_new_06.jpg" width="12" height="112" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/template_new_07.jpg" width="32" height="11" alt="" /></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="window.status='Romanian';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/template_copy_08.jpg" width="32" height="21" style="border:0" alt="Romanian" /></a></td>
	</tr>
	<tr>
		<td>
			<img src="images/template_new_09.jpg" width="32" height="13" alt="" /></td>
	</tr>
	<tr>
		<td>
			<a href="#"
				onmouseover="window.status='German';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/template_copy_10.jpg" width="32" height="21" style="border:0" alt="German" /></a></td>
	</tr>
	<tr>
		<td>
			<img src="images/template_new_11.jpg" width="32" height="25" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/template_new_12.jpg" width="782" height="20" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/template_new_13.jpg" width="14" height="46" alt="" /></td>
		<td>
			<a href="index.php"
				onmouseover="window.status='Home';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/home_en.jpg" width="159" height="46" style="border:0" alt="Home" /></a></td>
		<td>
			<a href="portfolio.php"
				onmouseover="window.status='Portfolio';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/portfolio_en.jpg" width="204" height="46" style="border:0" alt="Portfolio" /></a></td>
		<td>
			<a href="aboutme.php"
				onmouseover="window.status='About Me';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/about_me.jpg" width="214" height="46" style="border:0" alt="About Me" /></a></td>
		<td colspan="2">
			<a href="contact.php"
				onmouseover="window.status='Contact';  return true;"
				onmouseout="window.status='';  return true;">
				<img src="images/contact_en.jpg" width="179" height="46" style="border:0" alt="Contact" /></a></td>
		<td>
			<img src="images/template_new_18.jpg" width="12" height="46" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/template_new_19.jpg" width="782" height="11" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/template_new_20.jpg" width="782" height="51" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/template_new_21.jpg" width="782" height="291" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/template_new_22.jpg" width="782" height="43" alt="" /></td>
	</tr>
	<tr>
		<td colspan="7">
			<img src="images/template_new_23.jpg" width="782" height="15" alt="" /></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="8" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="14" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="159" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="204" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="214" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="147" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="32" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="12" height="1" alt="" /></td>
		<td>
			<img src="images/spacer.gif" width="10" height="1" alt="" /></td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Attached image(s)

  • Attached Image
  • Attached Image

This post has been edited by edu2004eu: 04 January 2009 - 04:50 AM


Is This A Good Question/Topic? 0
  • +

Replies To: XHTML 1.0 Strict messes up table

#2 P4L  Icon User is offline

  • Your worst nightmare
  • member icon

Reputation: 34
  • View blog
  • Posts: 2,788
  • Joined: 07-February 08

Re: XHTML 1.0 Strict messes up table

Posted 29 December 2008 - 10:23 AM

Edu,
It looks as though you were using some incorrect tags. See if this works for you. As a good practice, run your code through W3C.org's validator. It will catch any errors you might have.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 1 September 2005), see www.w3.org">
<title>template_new</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body{
    background-color:#333333;
    margin:0;
}
table { margin-left:auto; margin-right:auto; text-align: center; }
td,tr{margin:0; padding:0; }
</style>

<style type="text/css">
 table.c4 {border-left:1px solid #000; border-right:1px solid #000; width:800px; height:601px;}
 img.c3 {border:0}
 img.c2 {width:782px; height:11px}
 img.c1 {width:8px; height:600px}
</style>
</head>
<body>
<!-- Save for Web Slices (template_new.psd) -->
<table class="c4" id="Table_01" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="14"><img src="images/template_new_01.jpg" class="c1" alt=""></td>
<td colspan="7"><img src="images/template_new_02.jpg" class="c2" width="782" height="11" alt=""></td>
<td rowspan="14"><img src="images/template_new_03.jpg" width="10" height="600" alt=""></td>
</tr>
<tr>
<td colspan="5" rowspan="6"><img src="images/template_new_04.jpg" width="738" height="112" alt=""></td>
<td><a href="#" onmouseover="window.status='English'; return true;" onmouseout="window.status=''; return true;"><img src="images/template_copy_05.jpg" width="32" height="21" class="c3" alt="English"></a></td>
<td rowspan="6"><img src="images/template_new_06.jpg" width="12" height="112" alt=""></td>
</tr>
<tr>
<td><img src="images/template_new_07.jpg" width="32" height="11" alt=""></td>
</tr>
<tr>
<td><a href="#" onmouseover="window.status='Romanian'; return true;" onmouseout="window.status=''; return true;"><img src="images/template_copy_08.jpg" width="32" height="21" class="c3" alt="Romanian"></a></td>
</tr>
<tr>
<td><img src="images/template_new_09.jpg" width="32" height="13" alt=""></td>
</tr>
<tr>
<td><a href="#" onmouseover="window.status='German'; return true;" onmouseout="window.status=''; return true;"><img src="images/template_copy_10.jpg" width="32" height="21" class="c3" alt="German"></a></td>
</tr>
<tr>
<td><img src="images/template_new_11.jpg" width="32" height="25" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="images/template_new_12.jpg" width="782" height="20" alt=""></td>
</tr>
<tr>
<td><img src="images/template_new_13.jpg" width="14" height="46" alt=""></td>
<td><a href="index.php" onmouseover="window.status='Home'; return true;" onmouseout="window.status=''; return true;"><img src="images/home_en.jpg" width="159" height="46" class="c3" alt="Home"></a></td>
<td><a href="portfolio.php" onmouseover="window.status='Portfolio'; return true;" onmouseout="window.status=''; return true;"><img src="images/portfolio_en.jpg" width="204" height="46" class="c3" alt="Portfolio"></a></td>
<td><a href="aboutme.php" onmouseover="window.status='About Me'; return true;" onmouseout="window.status=''; return true;"><img src="images/about_me.jpg" width="214" height="46" class="c3" alt="About Me"></a></td>
<td colspan="2"><a href="contact.php" onmouseover="window.status='Contact'; return true;" onmouseout="window.status=''; return true;"><img src="images/contact_en.jpg" width="179" height="46" class="c3" alt="Contact"></a></td>
<td><img src="images/template_new_18.jpg" width="12" height="46" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="images/template_new_19.jpg" width="782" height="11" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="images/template_new_20.jpg" width="782" height="51" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="images/template_new_21.jpg" width="782" height="291" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="images/template_new_22.jpg" width="782" height="43" alt=""></td>
</tr>
<tr>
<td colspan="7"><img src="images/template_new_23.jpg" width="782" height="15" alt=""></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="14" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="159" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="204" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="214" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="147" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="12" height="1" alt=""></td>
<td><img src="images/spacer.gif" width="10" height="1" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>



Was This Post Helpful? 0
  • +
  • -

#3 edu2004eu  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 81
  • Joined: 27-August 07

Re: XHTML 1.0 Strict messes up table

Posted 29 December 2008 - 10:47 AM

I am using the validator. And it passes the test with no error and no warning. And I tried your code, but it's still the same. :(
Was This Post Helpful? 0
  • +
  • -

#4 Kolix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 19
  • Joined: 03-January 09

Re: XHTML 1.0 Strict messes up table

Posted 03 January 2009 - 05:28 PM

Are Tables considered valid xhtml? I thought that was the point with reduced code via css positioning?
Was This Post Helpful? 0
  • +
  • -

#5 Mike007  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 7
  • View blog
  • Posts: 332
  • Joined: 30-August 07

Re: XHTML 1.0 Strict messes up table

Posted 04 January 2009 - 12:00 AM

View PostKolix, on 3 Jan, 2009 - 04:28 PM, said:

Are Tables considered valid xhtml? I thought that was the point with reduced code via css positioning?


No tables are still valid tags, the point of xhtml is to create an XML based version of the older HTML 4.01. Tables are still useful, very useful for tabular data. Therefore, tables cannot be dismissed.

@P4L he said he was using XHTML 1.0 strict, not HTML 4.01. In XHTML 1.0 all tags MUST have a closing tag or be self closed. Again, this is since it is based on XML, and all tags are closed in XML. Therefore, <img src="images/something.jpg"> is invalid in XHTML.

@edu2004eu are you using the correct doc type? or is it all going into quirk mode? I actually never used strict mode before, try using Transitional mode instead. You might also want to read this: http://www.quirksmod...quirksmode.html .

In general, the slices photoshop gives you and the code generated aren't really the best, far from it. You might want to use some <div> tags instead of tables for your page layout. Makes for much nicer and maintainable code.

This post has been edited by Mike007: 04 January 2009 - 12:00 AM

Was This Post Helpful? 1
  • +
  • -

#6 edu2004eu  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 81
  • Joined: 27-August 07

Re: XHTML 1.0 Strict messes up table

Posted 04 January 2009 - 04:48 AM

I am using the correct everything... if I weren't, then the W3C validator would warn me. I have tried using XHTML Transitional with divs but Photoshop makes the divs' position absolute so that I can't center my site... I have abandoned the idea of XHTML Strict so I am going for Transitional with tables, which looks great. The problem was only with Strict, I don't know why...
Thank you for your replies.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1