...

View Full Version : How to Hide Css



designer21
11-03-2011, 09: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, 09: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, 09: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, &#91;code&#93;&#91;/code&#93; 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, 09: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, 10: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, 10: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, &#91;code&#93;&#91;/code&#93;


...

designer21
11-03-2011, 10: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, 10: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, 10: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">&nbsp;</td>
</tr>
<tr>
<td width="550" height="50" class="nav"><table width="550" border="0">
<tr>
<td height="50">&nbsp;</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">&nbsp;</td>
</tr>
<tr>
<td width="210" height="110">&nbsp;</td>
</tr>
<tr>
<td width="210" height="110">&nbsp;</td>
</tr>
<tr>
<td width="210" height="110">&nbsp;</td>
</tr>
</table></td>
<td width="550" height="440">&nbsp;</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">&nbsp;</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, 10: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, 10: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, 10: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, 10:56 PM
sorry, please could you show me the code for the bit you thought was odd

VIPStephan
11-03-2011, 10:58 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.

Excavator
11-03-2011, 11: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, 11: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, 11: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, 11: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, 11:13 PM
It's okay don't worry about it

i'm grateful for your help anyway

designer21
11-03-2011, 11: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, 11: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, 11: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-04-2011, 12:01 AM
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-04-2011, 12:06 AM
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-04-2011, 12:46 AM
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, 09:58 AM
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

:thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum