CSS - What Am i Doing Wrong?

**iGoD ReLeNtLeS** · 11-07-10

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:

Code:

[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.

Code:

.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:

Code:

[div class="Title"]Open 7 Days A Week![/div]

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?

Cheers.

**Toonshorty** · 11-07-10

You got:

Code:

<.Div class="Title".>

and the same for General assigned in the html document?

**Rhys** · 11-07-10

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]<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

**iGoD ReLeNtLeS** · 11-07-10

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

PHP Code:


<!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"><!-- InstanceBegin template="/Templates/General.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Havant Dog Grooming - Home</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<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"><!-- InstanceBeginEditable name="Page Content" --><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><!-- InstanceEndEditable --></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>
<!-- InstanceEnd --></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

code is probably really pants :/ bit of a novice at this.

**Rhys** · 11-07-10

theres no . before the title.

**iGoD ReLeNtLeS** · 11-07-10

Originally Posted by Rhys

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

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

Try something like:

PHP Code:


.Title Span {
font-family:comic sans;
font-size:30;
}

Then in the HTML use:

PHP Code:


Open 7 Days A Week!

</general>

**iGoD ReLeNtLeS** · 11-07-10

tried

PHP Code:


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

and

PHP Code:


<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

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

**iGoD ReLeNtLeS** · 11-07-10

Originally Posted by Rhys

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

Again nothing

**DoubleTop** · 11-07-10

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

DT,

**Shakyj** · 11-07-10

Originally Posted by DoubleTop

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** · 11-07-10

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.

PHP Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/General.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Havant Dog Grooming - Page Name Here</title>
<!-- InstanceEndEditable -->
<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>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</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=""><!-- InstanceBeginEditable name="Page Content" --><div class="Title" align="center">Hi There</div>
        <div class="General" align="center">Hi There</div><!-- InstanceEndEditable --></TD>
        </TABLE>
</TABLE>
</body>
<!-- InstanceEnd --></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** · 11-07-10

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

Thread: CSS - What Am i Doing Wrong?

Thread Tools

CSS - What Am i Doing Wrong?

Posting Permissions