CSS issue? Please help.

[DanUK]

Hi there.
Another qu ;).
When validating my site, I get these 3 errors:


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


Line 32:
<td background="theme/forums/images/pl_bdr_3.gif" class="gensmall" width="100%"><img src="theme/forums/images/spacer.gif" width="200" height="12" alt="theme image" /></td>

Line 92:
<table width="150" height="23" border="0" cellpadding="0" cellspacing="0" background="theme/images/block-title.gif">

To try and rid this so it's w3 compliant, I added the following CSS:


.theme1 {
background-image: url('theme/forums/images/pl_bdr_3.gif');
}

.theme2 {
background-image: url('theme/images/block-title.gif');
height : 23px;
}


I then changed the lines to:

32:

<td class="theme1" width="100%"><img src="theme/forums/images/spacer.gif" width="200" height="12" alt="theme image" /></td>

92:

<table class="theme2" width="150" border="0" cellpadding="0" cellspacing="0">

However, the two images do not load from this, leaving the website looking very odd indeed!
Any advice on this is much appreciated.
I have attached my CSS as txt-file :)
Thanks.

[DaveSW]

Is style.css in the same directory as the files? you may need to change the path if it is in a sub folder.


Otherwise, try using a div, setting the height and width, and setting the background of that.

[DanUK]

Thanks, yes, style.css is being called correclty, other changes are fine.

Thanks for your advice with that, so for example, if I understood you:

<table width="150" height="23" border="0" cellpadding="0" cellspacing="0" background="theme/images/block-title.gif">

would become:

<table><div width="150" height="23" border="0" cellpadding="0" cellspacing="0" background="theme/images/block-title.gif"> blah blah </table></div> ?

[DaveSW]

Do you need the table if all that's in it is a div?

<div style="width:150px; height:23px; border:0px; background-image:url('theme/images/block-title.gif');"> blah blah</div>

[DanUK]

thanks!!!

[DaveSW]

I've examined your stylesheet, and I don't know whether or not the text got scrambled, but it looked a bit of a mess - lots of characters that shouldn't have been there.

Try pasting this into a new file, in notepad, and then saving it as style02.css
Then change your link on your page to reflect that change.

BODY {
background-color: #E5E5E5;
scrollbar-face-color: #DEE3E7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #DEE3E7;
scrollbar-3dlight-color: #D1D7DC;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EFEFEF;
scrollbar-darkshadow-color: #98AAB1;
font-family : Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
}
A:link {
color : #4682b4;
text-decoration : none;
}
A:active {
color : #4682b4;
text-decoration : none;
}
A:visited {
color : #4682b4;
text-decoration : none;
}
A:hover {
color : #000000;
text-decoration : none;
}
.title {
color : #000000;
font-size : 14px;
font-weight : bold;
text-decoration : none;
}
.theme1 {
background-image: url('theme/forums/images/pl_bdr_3.gif');
}
.theme2 {
background-image: url('theme/images/block-title.gif');
height : 23px;
}
.storytitle {
font-size : 12px;
font-weight : bold;
text-decoration : none;
}
.storycat {
font-weight : bold;

text-decoration : underline;
}
.option {
color : #000000;
font-weight : bold;

.small {
color : #000000;
font-size : 9px;
}
.texte {
font-size : 12px;
}
input , textarea , select {
color : #000000;
font : normal 11px Tahoma, Arial, Helvetica, sans-serif;
border : 1px solid #000000;
}
input.post , textarea.post , select {
background-color : #fefefe;
}
input {
text-indent : 2px;
}
input.button {
background-color : #bbd2ee;
font-size : 11px;
border : 1px solid #202020;
}
input.radio {
background-color : #fefefe;
}
input.mainoption {
background-color : #c9e1f3;
font-weight : bold;
}
input.liteoption {
background-color : #c9e1f3;
font-weight : normal;
}

I've ditched a lot of repeated stuff, but without seeing the html I can't cut any more out.

If it doesn't work then just forget it, otherwise it may be more structured than what you've currently got. (depending if it got scrambled.)