How to Hide Css

designer21

11-03-2011, 08:39 PM

Hi
i'm sorry if this has been posted here before but i'm new to the forums. i'm currently working in Dreamweaver and have attached a css document to my webpages however every time i look at my pages in the browser, the css shows at the top of the page above my actual design, does anybody know how to stop this from happening?
thanks
Adam

alykins

11-03-2011, 08:43 PM

can't... see here (http://www.codingforums.com/showthread.php?t=4437)

Edit:unless you mean <link> (http://www.w3schools.com/tags/tag_link.asp)-ing it. but if trying to hide it so no one can get it see above

Excavator

11-03-2011, 08:46 PM

Hello designer21,
That sounds like your document is not formed correctly. You are likely missing a closing tag or something.
You could post the entire code here for us to look at, use the code tags, [code][/code] or you could run your code through the validator and likely fix it yourself.

See the links about validation in my signature line below.

...

Subyne Simean

11-03-2011, 08:52 PM

Hi Adam,

This might just be a problem with unclosed tags. To use an external style sheet, make sure the code is correct...

In the web page, link to the style sheet:

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles\style.css" />
</head>
<body>

</body>
</html>

Inside the style.css file, make sure your declarations are in this format:

body {
background-color: beige;
font-family: Arial;
font-size: 14px;
color: black;
}

h1 {
font-size: 16px;
}

h2 {
font-size: 14px;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

ul {
list-style-type: none;
padding: 0%;
}

img {
border: 0px;
}

...etc.

designer21

11-03-2011, 09:04 PM

thank you for your help so far, i've tried validating however it says there are errors, and my css is already laid out like that,
here is the code that i have at the top of the page, please feel free to check it out and tell me what i've done wrong

<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>doodledesign - index</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Doodle Design" />

<style type="text/css" media="all">@import "file:///Macintosh HD/Users/Danny/Desktop/design-website/css/main.css";</style> <style type="text/css" media="all">@import "file:///Macintosh HD/Users/Danny/Desktop/design-website/css/main.css";</style>
</head>

cheers again

Excavator

11-03-2011, 09:11 PM

thank you for your help so far, i've tried validating however it says there are errors, and my css is already laid out like that, ...

Yes, the errors found by the validator are what you need to fix.

You could post the entire code here for us to look at, use the code tags, [code][/code]

...

designer21

11-03-2011, 09:19 PM

sorry it's suppose to say, there was no errors when i validated it.

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>doodledesign - index</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Doodle Design" />

<style type="text/css" media="all">@import "css/main.css";</style> <style type="text/css" media="all">@import "css/main.css";</style>

Excavator

11-03-2011, 09:24 PM

That little snippet you keep posting is not near enough information for us to figure out what the problem is. That's why I keep asking for your entire code. A link to the test site would be best.

designer21

11-03-2011, 09:30 PM

i'm sorry, i'm being old fashioned and making the site using tables instead of divs so sorry for it being basic. urmm i'll give you all the code i've got now on here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>doodledesign - portfolio</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

<style type="text/css" media="all">
</style> <style type="text/css" media="all">
</style>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="760" border="0" align="center">
<tr>
<td width="210" height="145" rowspan="2"><img src="images/layout-images/logo.png" width="210" height="145" /></td>
<td width="550" height="95"> </td>
</tr>
<tr>
<td width="550" height="50" class="nav"><table width="550" border="0">
<tr>
<td height="50"> </td>
<td width="100" align="center" valign="bottom"><a href="index.html" class="nav">HOME</a></td>
<td width="100" align="center" valign="bottom"><a href="portfolio.html" class="nav">PORTFOLIO</a></td>
<td width="100" align="center" valign="bottom">CONTACT US</td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" colspan="2"><img src="images/layout-images/break-bar.png" width="760" height="5" /></td>
</tr>
<tr>
<td height="440" colspan="2"><table width="760" border="0">
<tr>
<td width="210"><table width="210" border="0">
<tr>
<td width="210" height="110"> </td>
</tr>
<tr>
<td width="210" height="110"> </td>
</tr>
<tr>
<td width="210" height="110"> </td>
</tr>
<tr>
<td width="210" height="110"> </td>
</tr>
</table></td>
<td width="550" height="440"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="5" colspan="2"><img src="images/layout-images/break-bar.png" width="760" height="5" /></td>
</tr>
<tr>
<td height="75" colspan="2"> </td>
</tr>
</table>
</body>
</html>

sorry if i'm being difficult i've never used this forum before, i am sorry

Excavator

11-03-2011, 09:41 PM

sorry if i'm being difficult i've never used this forum before, i am sorry

No worries :)
I can't see any reason for your CSS to show up in your browser with what you've given us so far. Post your main.css too so we can see if there are any problems there.

designer21

11-03-2011, 09:43 PM

/* CSS Document */
<style type='text/css'>
TextRollover-1
a:link { color:#FFCC00; text-decoration:underline}
a:visited { color:#FFCC00; text-decoration:underline;}
a:hover { color:#FFFFFF; text-decoration:underline;}
a:active { color:#FFCC00; text-decoration:underline}

.main_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
}

body {
background-color: #FFFFFF;
background-position: 0px 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.Copyright {color: #FFFFFF}

</style>
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
font-weight: normal;
color: #0066cc;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #990099;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
font-weight: bold;
color: #990099;
}
.INTRO {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 20px;
color: #990099;
}
.TITLE {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
font-weight: bold;
color: #0066cc;
}
.caption {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
line-height: 16px;
color: #000000;
}
a.nav:link {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
color: #C1272D;
text-decoration: bold;
}
a.nav:visited {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
color: #C1272D;
text-decoration: bold;
}
a.nav:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
color: #C1272D;
text-decoration: bold;
}
a.nav:active {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
color: #C1272D;
text-decoration: bold;
font-weight: bold;
}
a.nav1:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #0066cc;
text-decoration: underline;
}
a.nav1:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #0066cc;
text-decoration: underline;
}
a.nav1:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #990099;
text-decoration: underline;
}
a.nav1:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
color: #FFFFFF;
text-decoration: underline;
}
a.h1nav:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
color: #0066cc;
text-decoration: none;
}
a.h1nav:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
color: #0066cc;
text-decoration: none;
}
a.h1nav:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
color: #0066cc;
text-decoration: none;
}
a.h1nav:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
color: #0066cc;
text-decoration: none;
}
.sub-head-italic {
font-family: Times, serif;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #990099;
font-style: italic;

}
.sign-off {
font-family: Times, serif;
font-size: 14px;
line-height: 16px;
font-weight: bold;
color: #0066cc;
font-style: italic;
}
.sub-head {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
font-weight: bold;
color: #000066;
}
.white_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
color: #FFFFFF;
}
.background01 {
background-attachment: fixed;
background-image: url(../images/nursery-cleaning-specialists-bg1.jpg);
background-repeat: repeat;
background-position: center top;
}
.background02 {
background-attachment: fixed;
background-image: url(../images/nursery-cleaning-specialists-bg2.jpg);
background-repeat: repeat;
background-position: center top;
}

thank you so much for your help

Excavator

11-03-2011, 09:52 PM

Doesn't look like anything wrong there either.
The only things I do see odd is the snippet you posted has the CSS being imported but the entire code you posted has a linked css file. Could it be some version control issues?
Make sure the latest edits of your code are what your using and that your browser is not caching an earlier version.

Other than that, once I finally got all the code and put it together here locally ... the CSS does not display on the rendered website.

designer21

11-03-2011, 09:56 PM

sorry, please could you show me the code for the bit you thought was odd

VIPStephan

11-03-2011, 09:58 PM

Excavator

11-03-2011, 10:04 PM

Well, looks like you’ve overseen somethin, Excavator:

I did see that. It does not seem to be causing his problem though.

designer21

11-03-2011, 10:05 PM

THANK YOU THANK YOU THANK YOU

Problem solved, i was about to start again from scratch so thank you so much.

designer21

11-03-2011, 10:09 PM

THANK YOU THANK YOU THANK YOU
Problem Solved!!!
i was about to start again from scratch so thank you

thanks everyone for your time

Excavator

11-03-2011, 10:11 PM

THANK YOU THANK YOU THANK YOU

Problem solved, i was about to start again from scratch so thank you so much.

/* CSS Document */
<style type='text/css'>
TextRollover-1
a:link { color:#FFCC00; text-decoration:underline}
a:visited { color:#FFCC00; text-decoration:underline;}
a:hover { color:#FFFFFF; text-decoration:underline;}
a:active { color:#FFCC00; text-decoration:underline}

/...snip

.Copyright {color: #FFFFFF}

</style>
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
line-height: 24px;
font-weight: normal;
It did not cause any troubles on my end. I viewed your site in FF8 and IE9...

designer21

11-03-2011, 10:13 PM

It's okay don't worry about it

i'm grateful for your help anyway

designer21

11-03-2011, 10:15 PM

sorry another quick question, how do i get rid of the underline on my links, it's not there on my css

Excavator

11-03-2011, 10:16 PM

Tested it now in FF8, IE9, and IE8/IE7 emulation.
I cannot reproduce the problem at all. Are you certain that was the cause?

I'm still inclined to suspect a chaching problem that was loading an earlier version of your code.

VIPStepan: Are you able to reproduce the problem on your end?

Excavator

11-03-2011, 10:19 PM

sorry another quick question, how do i get rid of the underline on my links, it's not there on my css

a.nav:link {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 16px;
color: #C1272D;
text-decoration: none;
}

There is no such thing as text-decoration: bold;

VIPStephan

11-03-2011, 11:01 PM

VIPStepan: Are you able to reproduce the problem on your end?

I haven’t even tried and I’m currently too lazy to do so.

Subyne Simean

11-03-2011, 11:06 PM

Well, looks like you’ve overseen somethin, Excavator:

/* CSS Document */
<style type='text/css'>
TextRollover-1
a:link { color:#FFCC00; text-decoration:underline}
a:visited { color:#FFCC00; text-decoration:underline;}
a:hover { color:#FFFFFF; text-decoration:underline;}
a:active { color:#FFCC00; text-decoration:underline}

.main_text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
line-height: 16px;
}

body {
background-color: #FFFFFF;
background-position: 0px 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.Copyright {color: #FFFFFF}

</style>

designer21, the code I highligted in red is HTML (or at least not CSS) which doesn’t belong in a stylesheet.

Adam you lied to me!! j/k

For an external style sheet, this: <style type="text/css"></style> now becomes this: <link rel="stylesheet" type="text/css" href="styles\style.css" />, and then any styles that would've come between the <style type="text/css"></style> tags would now be in your external css file. But yes, like VIPStephan said, in simple terms - no HTML in your external style sheet! :D

Excavator

11-03-2011, 11:46 PM

I haven’t even tried and I’m currently too lazy to do so.

Too funny, thanks for the chuckle :thumbsup:

UGGYAHOO

11-04-2011, 08:58 AM