HTML Forum

**Jaryth000** · 10:45 PM

EDIT:
Problem Solved. Thanks for everyone that helped, and especially Arenlor for the answer!

Ok. So, my website was originally valid 'HTML 4.01 Transitional'. But then i pulled a change and wanted it valid 'XHTML 1.0 Strict'. SO... I worked on it, and worked hard, got though all the errors and finally got it valid. However, ran into one problem. I worked, and worked, and worked on this TINY little problem... and just could NOT figure it out!
ok... yes, Im totally sure there are CSS Alternatives I can try, but I want to know why this is not working. I, for the life of me, and not figure it out no matter what Iv tired. So... now I just want to figure out what Im doing wrong.

So. Down to the actual problem.
Iv stripped down the code so all thats left are the basic things that show the problem.
The code is all still valid 'XHTML 1.0 Strict'.
(ok... this code was ORIGINALLY from photoshop.... exported image template... yes I know... horrible stuff... but I fixed up most of it).

So, you have a table. Inside this table you have images that make up the website. For some reason, and ONLY when useing the doctype:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

The images/cells the images are in have a slight... padding to the bottom of them. I cant figure out why at all. Iv tried every combination of table, cell and image attributes I could find. CSS attributes, direct HTML, everything. and I just can NOT get rid of the padding. All the images should touch, and you should NOT be able to see the background though them.
Well.. that is to say, In Firefox theres the slight Vertical padding. In IE it just DIES. yet it was fine before. And its only under this Doctype. yet its all valid.

So.. heres the code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jaryth</title>
</head><body>

<table width="800" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">
            <img src="http://www.webmaster-talk.com/images/Layout1_01.gif" alt="" />
    </td>
    </tr>
    <tr>
        <td>
    <img src="http://www.webmaster-talk.com/images/Home.gif" alt="" />
    </td>
        <td rowspan="8">
            <img src="http://www.webmaster-talk.com/images/Layout1_03.gif" alt="" />
    </td>
    </tr>
    <tr>
        <td>
         <img src="http://www.webmaster-talk.com/images/Site.gif"  alt="" />
    </td>
    </tr>
    <tr>
        <td>        
                <img src="http://www.webmaster-talk.com/images/About-Me.gif"  alt="" />
    </td>
    </tr>
    <tr>
        <td>
            <img src="http://www.webmaster-talk.com/images/My-art.gif" alt="" />
    </td>
    </tr>
    <tr>
        <td>
            <img src="http://www.webmaster-talk.com/images/Layout1_07.gif" alt="" />
    </td>
    </tr>
    <tr>
        <td>
            <img src="http://www.webmaster-talk.com/images/Links.gif" alt="" />
      </td>
    </tr>
    <tr>
        <td>
                <img src="http://www.webmaster-talk.com/images/Projects.gif" alt="" />
    </td>
    </tr>
    <tr>
        <td>
            <img src="http://www.webmaster-talk.com/images/Layout1_10.gif" alt="" />
    </td>
    </tr>
</table>

</body></html>

Here is the page that the code represents: http://jaryth.net/index6.html and here is what the page should look like (with content) http://jaryth.net/ (note, that page is not Valid). (and like I said, I stripped out any unnecessary tags)

Iv tried everything I can with 'border' (on the images and the table, in both html and css), 'cellpadding', 'cellspacing', 'colspan', 'rowspan', and Iv checked http://www.w3schools.com/css/css_reference.asp#table that http://www.w3.org/TR/2004/WD-xhtml2-...od-tables.html that http://webdesign.about.com/od/htmlta...s_tabletag.htm that http://www.w3.org/TR/REC-CSS2/tables.html that... and a bunch of other places.. and just can not find an answer to this SIMPLE thing.

but... it may also be that its 5am and Iv been trying to fix this one problem for the last 2 hours or so.... hmm that might be it too.

So? Any help? What am I doing wrong that the images/cells are padded? I mean, even if there is no solution, it doesn't matter because im planning to completely and totally redesign my site... but I just want to know whats wrong here (and maybe how to fix it).

ahhhh evil XD.
Well, thanks for taking the time to read it! and thank you for any help!
-Jaryth

Edit: Updated Code

**chrishirst** · 02-27-2008, 06:47 AM

This colspan="0px" and this rowspan="0px" is not valid code for ANY doctype

colspan and rowspan tell the cell to occupy the number of columns or rows specified NOT how many pixels.

Quote:

What am I doing wrong that the images/cells are padded?

Using tables to build a site is where you are going wrong

**audiomad** · 02-27-2008, 07:14 AM

Try css here are some blank css templates http://www.dragonstardesign.com/page...templates.html

**Jaryth000** · 02-27-2008, 09:35 AM

@chrishirst
http://validator.w3.org/check?uri=ht...Inline&group=0
:P it still says its Valid.

And it wasn't in px originally, that was just one of the things I tired out of desperation in my sleep deprived state, that I never changed back XD.
As for making it with tables, well it was a wile back that I made this design originally, and like I said I was remaking the entire site anyway.

@audiomad

Quote:

Originally Posted by Jaryth000

yes, Im totally sure there are CSS Alternatives I can try, but I want to know why this is not working.

Like I was saying, I don't want CSS Alternatives, I know how to do it in CSS, I want to know what I did wrong.

Even with the original working values,

HTML Code:

        <td colspan="2">
            <img src="images/Layout1_01.gif" alt="" />
    </td>
    </tr>
    <tr>
        <td>
    <img src="images/Home.gif" alt="" />
    </td>
        <td rowspan="8">
            <img src="images/Layout1_03.gif" alt="" />
    </td>

there are still spaces. Meaning the original problem still has not been solved.

Anyone else?

**Arenlor** · 02-27-2008, 09:50 AM

Code:

/*CSS*/
img,td,tr,table {padding:0;}

Try that. http://www.w3schools.com/css/css_padding.asp also tables are out of style. With HTML5 in the working I am not sure if you want to use XHTML, I'm actually reverting back to use HTML4.01 myself.

**Jaryth000** · 02-27-2008, 10:09 AM

Quote:

Originally Posted by Arenlor

Code:

/*CSS*/
img,td,tr,table {padding:0;}

Try that. http://www.w3schools.com/css/css_padding.asp also tables are out of style. With HTML5 in the working I am not sure if you want to use XHTML, I'm actually reverting back to use HTML4.01 myself.

Hmm, well I tried that (and tried similar things before posting this topic), but still no luck. Even with that, it still shows spaces. Hence why I was so confused, and gave up... its not that I don't know how to fix it.... its that I don't even know whats Causing the spaces. it just does not make sense.

Well, with a few quick tweaks (I tested a wile back, things such as taking out the self closing tags <br />), I can quickly make my page HTML4.01 Valid as well. but now I still get the same spacing problem.

Its kinda driven me nuts.

**LadynRed** · 02-27-2008, 03:05 PM

Ok, 1 thing you need to do is put the height and width values ON THE IMAGES in your HTML. Leaving that out is sloppy coding and it's forcing the browser to basically guess. You DO have proper dimensions on your HTML 4.01 version.

2 - using XHTML Strict and then using tables for layout is just contra to what XHTML is all about.

3 - Using position:absolute to nail things is place is generally a bad idea, especially when you're sticking stretchy table inside.

**Jaryth000** · 02-27-2008, 05:57 PM

@LadynRed

1. yes I know, and they did originally have the tags, however when I ruled them out as the source of the problem for the particular issue, I removed them. The only tags I left where once I thought would be absolutely necessary to still be valid, and help solve the issue at hand.

2. Yes I know. As I said, I made this site design a long wile back, and am planning to redo the whole site now that I know CSS more. But XHTML Strict still does support tables, as well as all the attributes used, so I can not understand why its rendering the page wrong.

3. hmmm really? I think I was using relative at one point, but IE and FF decided to use different positions for relative... but that was a a wile back (IE6). As of yet, the absolute position seamed to work fine on multiple browsers and resolutions, as well as resizing windows, wile keeping everything in the right place.

But all the same, that still doesn't explain whats causing this random spacing. Iv had all the height and width tags in there, and it still did this.
but still, thank you for the suggestions.

**serandfae** · 02-27-2008, 08:00 PM

Something I've gotten in the habit of doing is putting *{margin: 0; padding: 0;} in my CSS first and foremost (I used to put it on body, but got clued in that the variable works better). I don't think anyone yet has mentioned the margin part of that. But LnR is right (as usual) in regard to the rest.

**Jaryth000** · 02-27-2008, 08:14 PM

@serandfae
hmm, well no one mentioned it, and it does solve another issue that I was having before (way back when I originally made the site), so thank you for that, however, it still did not fix the space between the images/cells

.

**serandfae** · 02-27-2008, 08:29 PM

table, tr, td{border: none;} And put the dimensions back in on the cells. The tables will ALWAYS stretch to fit the largest thing and put space around everything else.

I know you're probably tired of hearing this, but it would be a lot easier for you to do your links as a styled unordered list and going completely CSS. I finally broke out of tables for layout recently and despite the initial migraines have been a lot happier. If you're going to go for validating to XHTML Strict, why not go all the way?

**Jaryth000** · 09:24 PM

Yeah, Iv always hated tables... But... these tables where automatically generated... so, that just made my life easier when I designed the site. Like I said, Im planning to redesign my entire site from scratch. But for now I just want to know what is causing this problem XD.

So, this is the current code for this page: http://jaryth.net/index6.html :

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jaryth</title>
<style type="text/css"><!--
table, tr, td{border: none;}
--></style>
</head><body>

<table width="800" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2">
            <img src="images/Layout1_01.gif" width="800" height="139" alt="" /></td>
    </tr>
    <tr>
        <td>

                <img src="images/Home.gif" width="156" height="23"  alt="Home" /></td>
        <td rowspan="8">
            <img src="images/Layout1_03.gif" width="644" height="581" alt="" /></td>
    </tr>
    <tr>
        <td>

                <img src="images/Site.gif" width="156" height="24"  alt="About this Site" /></td>
    </tr>
    <tr>
        <td>

                <img src="images/About-Me.gif" width="156" height="24"  alt="About Me" /></td>
    </tr>
    <tr>
        <td>

                <img src="images/My-art.gif" width="156" height="25"  alt="My Art" /></td>
    </tr>
    <tr>
        <td>
            <img src="images/Layout1_07.gif" width="156" height="25" alt="" /></td>
    </tr>
    <tr>
        <td>

                <img src="images/Links.gif" width="156" height="24"  alt="Links" /></td>
    </tr>
    <tr>
        <td>

                <img src="images/Projects.gif" width="156" height="22"  alt="Project" /></td>
    </tr>
    <tr>
        <td>
            <img src="images/Layout1_10.gif" width="156" height="414" alt="" /></td>
    </tr>
</table>

</body></html>

As you can see, even with the table, tr, td{border: none;} and all the dimensions, there is still the random spacing. Its still XHTML Strict Valid http://validator.w3.org/check?uri=ht...%2Findex6.html .

So, if I change the Doctype and totally kill all the XML... Thus startting it off like this instead:

HTML Code:

<html>
<head>

all the images fit nice and neat, and look like they should (In FF and IE). So it has something to do with the way Tables are rendered when its set to XML....

gah... but whats the root of the problem? :'( its driving me crazy XD.

Just to be clear, YES I know it would be much easier/better/valid to JUST do it in CSS. But thats not the point of this topic. I just want to know whats causing the problem, and how to solve it. If not to fix my site, then just so I can learn and further my knowledge.

but still... thank you for the suggestion serandfae.

Any other ideas?

**Arenlor** · 02-27-2008, 10:35 PM

Well I think part of the problem is that you're trying to use tables for layout and not just for marking up. Anyway to solve this issue just add this along with the 0 bordering line-height:.5;

**serandfae** · 02-27-2008, 10:38 PM

In what you just posted you still don't have margin and padding zeroed out. Put td img{overflow:hidden;} in your CSS to see what's pushing your tables out.

**Jaryth000** · 02-27-2008, 10:41 PM

Holy crap! Arenlor you win!

^_^ Thank you!

table, tr, td{border: none; line-height:.5;}

It works!

Thank you! That was driving me CRAZY. Excellent work ^_^.

**Arenlor** · 02-27-2008, 10:47 PM

Now drop the tables and use CSS ^_^, as you can see it's quite powerful.

**Jaryth000** · 02-27-2008, 10:51 PM

:P yes yes, I know full well. I hate tables... I really do... I always have. CSS is my love ^_^.
Just... I wanted to fix up my old site before moving on to my new one.... and I wanted to get it perfect! but then this stupid little problem decided to say NO YOU CANT, and give me a bunch of trouble :P.

God I hate tables.

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!