Chat LIVE With Programming Experts! There Are 23 Online Right Now...

Programming Help

Web Development



What's Here?

  • Members: 244,297
  • Replies: 693,160
  • Topics: 113,166
  • Snippets: 3,863
  • Tutorials: 935
  • Total Online: 852
  • Members: 65
  • Guests: 787

Welcome to Dream.In.Code
Become an Expert!

Join 244,297 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 852 people online right now. Registration is fast and FREE... Join Now!




XHTML 1.0 Strict messes up table

 
 Reply to this topicStart new topic

XHTML 1.0 Strict messes up table
edu2004eu
29 Dec, 2008 - 06:52 AM
Post #1

New D.I.C Head
Group Icon

Joined: 26 Aug, 2007
Posts: 47


Dream Kudos: 25
My Contributions
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.

CODE
<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>


This post has been edited by edu2004eu: 4 Jan, 2009 - 03:50 AM


Attached thumbnail(s)
Attached Image Attached Image
User is offlineProfile CardPM
+Quote Post


P4L
RE: XHTML 1.0 Strict Messes Up Table
29 Dec, 2008 - 09:23 AM
Post #2

Geek 4 Life
Group Icon

Joined: 7 Feb, 2008
Posts: 1,754



Thanked: 9 times
Dream Kudos: 125
My Contributions
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.

html

<!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>
User is offlineProfile CardPM
+Quote Post

edu2004eu
RE: XHTML 1.0 Strict Messes Up Table
29 Dec, 2008 - 09:47 AM
Post #3

New D.I.C Head
Group Icon

Joined: 26 Aug, 2007
Posts: 47


Dream Kudos: 25
My Contributions
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. sad.gif
User is offlineProfile CardPM
+Quote Post

Kolix
RE: XHTML 1.0 Strict Messes Up Table
3 Jan, 2009 - 04:28 PM
Post #4

New D.I.C Head
*

Joined: 3 Jan, 2009
Posts: 19


My Contributions
Are Tables considered valid xhtml? I thought that was the point with reduced code via css positioning?
User is offlineProfile CardPM
+Quote Post

Mike007
RE: XHTML 1.0 Strict Messes Up Table
3 Jan, 2009 - 11:00 PM
Post #5

D.I.C Regular
Group Icon

Joined: 30 Aug, 2007
Posts: 287



Thanked: 4 times
Dream Kudos: 75
My Contributions
QUOTE(Kolix @ 3 Jan, 2009 - 04:28 PM) *

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.quirksmode.org/css/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: 3 Jan, 2009 - 11:00 PM
User is offlineProfile CardPM
+Quote Post

edu2004eu
RE: XHTML 1.0 Strict Messes Up Table
4 Jan, 2009 - 03:48 AM
Post #6

New D.I.C Head
Group Icon

Joined: 26 Aug, 2007
Posts: 47


Dream Kudos: 25
My Contributions
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.
User is offlineProfile CardPM
+Quote Post

Fast ReplyReply to this topicStart new topic

Time is now: 7/4/09 04:46PM
Invision Power Board v2.1.7 © 2009  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month