CSS - What Am i Doing Wrong? [Archive] - Aria Forums - UK's #1 Performance Hardware Community

View Full Version : CSS - What Am i Doing Wrong?

iGoD ReLeNtLeS

11-07-10, 21:20

Im just revamping my website with a bit of CSS and i can't get it to set the properties im giving it. I have embedded it with this line in-between the Head Tags:

[link type="text/css" rel="stylesheet" href="style.css"]

both the index page and CSS are in the same folder so i don't need to apply a filepath? i have tried with "/HTML/style.css" as well to no avial.

.Title
{
font-family:comic sans;
font-size:30;
}
.General
{
font-family:comic sans;
font-size:20;
color:FF33FF;
}

That is the CSS i am using just for testing and below is the HTML i am applying it to:

Open 7 Days A Week!

and when i load the page in chrome, IE8 for firefox it appears just bog standard with no formatting what so ever. Anyone care to shine a light for me? :o:rolleyes:

Cheers.

Toonshorty

11-07-10, 21:21

You got:

<.Div class="Title".>
and the same for General assigned in the html document?

Rhys

11-07-10, 21:25

can you possibly show the top code in the PHP tags.

doesnt show up sadly in code lol.

the css should be in <style type="text/" css=""> </style> tags.
not link tags.

it should also be in the head tag.

the . also means its not an id but a style.

could you paste in all of your html/css or just cut out the bits needed into one small bit so i can have a lil read through :D

iGoD ReLeNtLeS

11-07-10, 21:47

well i've made the few changes you said and still no workie

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Havant Dog Grooming - Home</title>



<style type="text/css">Title
{
font-family:comic sans;
font-size:30;
}
General
{
font-family:comic sans;
font-size:20;
color:FF33FF;
}</style>
</head>

<body>
<TABLE WIDTH=100% height="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD background="HTML/images/left.jpg" WIDTH=50% style="background-position:top right "HEIGHT=100% ALT=""></TD>
<TD height="100%"><TABLE WIDTH=751 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="100%">
<TR>
</TR>
<TR>
<TD WIDTH=751 HEIGHT=61 ALT=""><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
</tr>
</table>
</TD>
</TR>
<TR>
<TD background="/HTML/images/3.jpg" WIDTH=751 HEIGHT=191 ALT=""></div></TD>
</TR>
<TR>
<TD> <TABLE WIDTH=751 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD> <IMG SRC="HTML/images/m0.jpg" WIDTH=3 HEIGHT=26 ALT=""></TD>
<TD><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image26','','HTML/images/m11.jpg',1)"><img src="/HTML/images/m1.jpg" name="Image26" width="124" height="26" border="0"></a></TD>
<TD><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image27','','HTML/images/m21.jpg',1)"><img src="/HTML/images/m2.jpg" name="Image27" width="118" height="26" border="0"></a></TD>
<TD><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image28','','HTML/images/m31.jpg',1)"><img src="/HTML/images/m3.jpg" name="Image28" width="151" height="26" border="0"></a></TD>
<TD><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image29','','HTML/images/m41.jpg',1)"><img src="/HTML/images/m4.jpg" name="Image29" width="127" height="26" border="0"></a></TD>
<TD><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image30','','HTML/images/m51.jpg',1)"><img src="/HTML/images/m5.jpg" name="Image30" width="109" height="26" border="0"></a></TD>
<TD><a href="" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image31','','HTML/images/m61.jpg',1)"><img src="/HTML/images/m6.jpg" name="Image31" width="116" height="26" border="0"></a></TD>
<TD> <IMG SRC="HTML/images/m7.jpg" WIDTH=3 HEIGHT=26 ALT=""></TD>
</TR>
</TABLE></TD>
</TR>
<TR>

</TR>
<TR>
</TR>
<TR>
<TD></TD>
</TR>
<TR>
<TD WIDTH=751 HEIGHT=100% ALT=""><div align="center"><center><p><img src="http://img337.imageshack.us/img337/8960/homepage1.jpg" width="277" height="208" /></p>
<div class="Title">Open 7 Days A Week!</div></center></div></TD>
</TR>
</TABLE></TD>
<TD background="/HTML/images/right.jpg" WIDTH=50% style="background-position:top left " HEIGHT=100% ALT=""></TD>
</TR>
</TABLE>
</body>
</html>

page is from scratch as i didn't want to take it from the file server where the website is working and screw things up, as i have :P code is probably really pants :/ bit of a novice at this.

Rhys

11-07-10, 22:02

theres no . before the title.

iGoD ReLeNtLeS

11-07-10, 22:11

theres no . before the title.

Still nothing, tried with and without the .'s before them and dreamweaver notices no different. And still doesn't work in any browser.

Toonshorty

11-07-10, 22:16

You need to put the . before Title/General in the CSS otherwise it'll become a tag (e.g. <general>)

Try something like:

.Title Span {
font-family:comic sans;
font-size:30;
}
Then in the HTML use:

Open 7 Days A Week!
</general>

iGoD ReLeNtLeS

11-07-10, 22:32

tried

<div><span class="Title">Open 7 Days A Week!</span></div>

and

<div class="Title"><span>Open 7 Days A Week!</span></div>

with and without the . again with the span tag in the CSS.

Really Really stumped by this. Lucky i didn't go and savage what is currently working

Rhys

11-07-10, 22:37

im sure div and span dont work together o.0.

iGoD ReLeNtLeS

11-07-10, 22:55

im sure div and span dont work together o.0.

Again nothing :confused:
:mad::mad::censored::censored::censored::censored: :o:surprised:

DoubleTop

11-07-10, 23:18

shouldn't "comic sans" actually be "comic sans MS"?

DT,

Shakyj

11-07-10, 23:28

shouldn't "comic sans" actually be "comic sans MS"?

DT,

Yeah, it is. But do "Comic Sans MS, cursive". Not everyone has Sans on their PC. It's a MS font too ;)

iGoD ReLeNtLeS

12-07-10, 00:03

right we are making progress, cleaned out a lot of the code and managed to get it to set the font to comic sans and set the size. Changed font to that which Double Top and Shakyj suggested, however it is still not setting the colour.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Havant Dog Grooming - Page Name Here</title>

<style type="text/css">
.Title
{
font-family:Comic Sans MS, cursive;
font-size:30;
color:FF33FF;
}
.General
{
font-family:Comic Sans MS, cursive;
font-size:20;
color:FF33FF;
}</style>


</head>

<body>
<TABLE WIDTH=100% height="100%" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TD height="100%"><TABLE WIDTH=751 BORDER=0 CELLPADDING=0 CELLSPACING=0 height="100%" align="center">
<TD WIDTH=751 HEIGHT=61 ALT=""><table width="100%" border="0" cellspacing="0" cellpadding="0">
</table></TD>
<TR>
<TD background="/images/banner.jpg" WIDTH=751 HEIGHT=191 ALT=""></TD>
</TR>
<TD><TABLE WIDTH=751 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TD><a href=""><img src="/images/menu1.jpg" width="124" height="26" border="0"></a></TD>
<TD><a href=""><img src="/images/menu2.jpg" name="Image27" width="118" height="26" border="0"></a></TD>
<TD><a href=""><img src="/images/menu3.jpg" name="Image28" width="151" height="26" border="0"></a></TD>
<TD><a href=""><img src="/images/menu4.jpg" name="Image29" width="127" height="26" border="0"></a></TD>
<TD><a href=""><img src="/images/menu5.jpg" name="Image30" width="109" height="26" border="0"></a></TD>
<TD><a href=""><img src="/images/menu6.jpg" name="Image31" width="116" height="26" border="0"></a></TD>
</TABLE>
<TR>
<TD WIDTH=751 HEIGHT=100% ALT=""><div class="Title" align="center">Hi There</div>
<div class="General" align="center">Hi There</div></TD>
</TABLE>
</TABLE>
</body>
</html>

got this all clean and tidied to this so far. Just the colour now.

EDIT: Got it all sorted now :) thanks for the help guys.

Smifis

12-07-10, 00:59

Try not to format your page using a table and using lowercase letters for each <xx> is good practice should you want to go to xHTML.

I cant see why you shouldn't, Strict xHTML wiht formating via CSS is the biz :D