...

View Full Version : 2 CSS errors



andysjones
11-23-2005, 11:03 PM
Hey. I'm making a website for my university project, and it has to validate with HTML and CSS. The HTML im fine on, but I have 2 problems with the CSS. First is that, when opened in Internet Explorer, the blue borderes around the table doesnt show. The second is that when validating the CSS it says:

* Line : 61 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 61 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : P.title
* Line : 68 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 68 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : P.bodytext
* Line : 73 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 73 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : P.picturetext
* Line : 78 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 78 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : P.newsdate
* Line : 84 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 84 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : P.refence
* Line : 102 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 102 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : TR#titlerow
* Line : 114 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 114 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : TR#linksrow
* Line : 129 font-family: You are encouraged to offer a generic family as a last alternative
* Line : 129 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : TR#contact

.
I'd be very greatful for any help with those two problems- asap too, as the website has to be in in friday.


-------------------------------------------
Here is my CSS stylesheet::

BODY {
background: black;
color: white;
}

a.linkrow:link {
color: white;
text-decoration: none;
background: black;
}

a.linkrow:visited {
color: white;
text-decoration: none;
background: black;
}

a.linkrow:hover {
text-decoration: underline;
background: black;
color: white;
}

a.contact:link {
color: yellow;
text-decoration: none;
background: black;
}

a.contact:visited {
color: yellow;
text-decoration: none;
background: black;
}

a.contact:hover {
text-decoration: underline;
background: black;
color: yellow;
}

a.bodylink:link {
color: blue;
text-decoration: none;
background: yellow;
}

a.bodylink:visited {
color: blue;
text-decoration: none;
background: yellow;
}

a.bodylink:hover {
text-decoration: underline;
background: yellow;
color: blue;
}

P.title {
font-family: verdana;
font-weight: bold;
text-decoration: underline;
font-size: 125%;
}

P.bodytext {
font-family: verdana;
text-align: justify;
}

P.picturetext {
font-family: verdana;
text-align: center;
}

P.newsdate {
font-family:verdana;
text-decoration: underline;
font-style: italic;
}

P.refence {
font-family: verdana;
text-align: left;
font-size: 75%;
}

TABLE {
width: 80% ;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
table-layout: fixed;
}

TR#titlerow {
border-top: 4px solid blue;
border-left: 4px solid blue;
border-right: 4px solid blue;
background: black;
font-family: verdana;
text-align: center;
font-size: 450%;
font-weight: bold;
color: yellow;
}

TR#linksrow {
border-bottom: 8px solid blue;
border-left: 4px solid blue;
border-right: 4px solid blue;
background: black;
font-family: verdana;
text-align: center;
font-size: 125%;
color: white;
}

TR#maincontent {
border: 4px solid blue;
background: yellow;
color: black;
}

TR#contact {
border: 4px solid blue;
background: black;
font-family: verdana;
font-size: 75%;
color: yellow;
}

IMG.thumbnail {
height: 100px;
width: 133px;
}

IMG.largethumbnail {
height: 200px;
width: 250px;
}

----------------------------------------------
Here is a HTML page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE> Halesowen Town: Home </TITLE>
<LINK REL="stylesheet" HREF="stylesheet.css" type="text/css">
</HEAD>
<BODY>
<TABLE>
<TR id="titlerow">
<TH colspan= 4>
Town
</TR>

<TR id="linksrow">
<TH><A class="linkrow" href="about.htm">About</A></TH>
<TH><A class="linkrow" href="placestovisit.htm">Places to Visit</A></TH>
<TH><A class="linkrow" href="links.htm">Links</A></TH>
<TH><A class="linkrow" href="feedback.htm">Feedback</A></TH>
</TR>

<TR id="maincontent">
<TD colspan = 4>
<P class="bodytext">
Ya di ya
</P>
<P class="bodytext">
<A class="bodylink" href="index.htm"> Click here to view the disclaimer </A>
</P>
<P class="title">
News
</P>
<P class="newsdate">
22nd November 2005
</P>
<P class="bodytext">
Website design finished.
</P>
</TR>

<TR id="contact">
<TD colspan = 4>
<A class="contact" href="mailto:andysjones@blueyonder.co.uk">Contact me by e-mail: andysjones@blueyonder.co.uk</A>
</TR>
</TABLE>
</BODY>
</HTML>


Thanx in advance ,'_',

_Aerospace_Eng_
11-23-2005, 11:13 PM
I wouldn't use tables for this but because you are beginner its all you know. I'm not sure why the borders aren't showing. I can tell you how to get your CSS valid though. Just give another font in the font-family, like right now all you have is verdana, just add a comma and then put sans-serif.

andysjones
11-24-2005, 02:22 PM
Thanks =) I'll just have to pretend i didnt want the borders if he looks in IE :D lol. The validation is more important though, so thanks- you've been a big help!

redcoupe
11-24-2005, 03:46 PM
Try this -

In your css file, change every line that has:


font-family: verdana;

...to be:


font-family:Verdana, Arial, Helvetica, sans-serif;



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum