Argh! This is mad!

[DanUK]

Hey there.
I hope someone can help me.

I'm validating my HTML theme for our LAN site, I have attached it, and I get these errors on w3.org:


Line 29, column 15: there is no attribute "BACKGROUND" (explain...).
<td background="theme/forums/images/pl_bdr_3.gif" class="gensmall" width="100%">
^
Line 89, column 26: there is no attribute "HEIGHT" (explain...).
<table width="150" height="23" border="0" cellpadding="0" cellspacing="0" backgr
^
Line 89, column 85: there is no attribute "BACKGROUND" (explain...).
...dding="0" cellspacing="0" background="theme/images/block-title.gif">


I've tried doing it with CSS, but then the images disappear as they made up the "edges" of the tables.
My CSS validates as fine at the moment, both are attached.

IF you can help me to get this compliant, it would be gratefully appreciated!

CSS:


/* $Id: style.css 5.3 2003/10/27 01:31:03.
*/

FONT {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

TD {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

BODY {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

P {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

DIV {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

FORM {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
}

A:link {
background : none repeat;
color : #4682b4;
font-size : 10px;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

A:active {
background : none repeat;
color : #4682b4;
font-size : 10px;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

A:visited {
background : none repeat;
color : #4682b4;
font-size : 10px;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

A:hover {
background : none repeat;
color : #000000;
font-size : 10px;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

.title {
background : none repeat;
color : #000000;
font-size : 14px;
font-weight : bold;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

.content {
background : none repeat;
color : #000000;
font-size : 10px;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.block-title {
background : none repeat;
color : #000000;
font-size : 10px;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

.storytitle {
background : none repeat;
color : #000000;
font-size : 12px;
font-weight : bold;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

.option {
background : none repeat;
color : #000000;
font-size : 10px;
font-weight : bold;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

.tiny {
background : none repeat;
color : #000000;
font-size : 10px;
font-weight : normal;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

.small {
background : none repeat;
color : #000000;
font-size : 9px;
font-weight : normal;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration : none;
}

.texte {
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 12px;
color : #000000;
}

input , textarea , select {
color : #000000;
font : normal 10px Tahoma, Arial, Helvetica, sans-serif;
border : 1px solid #202020;
border-color : #000000;
}

/* Blue-type Buttons. */

input.mainoption {
background-color : #C9E1F3;
font : normal 10px Tahoma, Arial, Helvetica, sans-serif;
border : 1px solid #202020;
border-color : #000000;
}

input {
text-indent : 2px;
}

/* index.php Log In field
This part of style.css is (c) of PHPbb.com
*/

.forumline {
background-color: #FFFFFF;
}

td.catHead {
height: 29px;
border-width: 0px 0px 0px 0px;
}

td.row1 { background-color: #EFEFEF; }
td.row2 { background-color: #DEE3E7; }
td.row3 { background-color: #D1D7DC; }

.gensmall { font-size : 10px; }

[DaveSW]

Rather than fiddling around in the dark can you zip the images too? perhaps a screen shot of how it should look? thanks

[DanUK]

Sure sorry, I did a screenshot as the images are quite large and lots of them.

Thanks again.

[DaveSW]

Are you currently doing a screenshot or have I missed something?

[DanUK]

heresorry about the quality, trying to get it to fit on here.

[DaveSW]

Right. So the pictures above and below each item are the same for each box? (as in the same file for all the tops, same file for all the bottoms)

Could you just insert the image? This would remove the need for height and background attributes.
<img src="image.gif" alt="Hello Charles!" style="width: xxpx; height: xxpx; padding: 0px; margin:0px;">

If there is text to go in front of the image,

how about in your css:
(assumming gensmall is the class for all the rounded tops)
td.gensmall {
background: #ffffff url(../../graphics/theme/forums/images/pl_bdr_3.gif) left no-repeat;
}

I would like to suggest you move your images and css into folders closer to the actual pages.
e.g. put styles into a folder called styles, so your link in html would be

<link rel="stylesheet" type="text/css" src="styles/style.css">

then put images into a folder called images

so from your stylesheet you would refer to them as

background-image: url(../images/back,gif);


That's just to make your life easier. Maybe try experimenting on a new page before you use it in your design.

In your external stylesheet your path to the images is from your external stylesheet, not from your html document.

[DanUK]

Okay thanks.
They're the only errors i haven't been able to "fix" to date, but i'll try what you said thanks.