PDA

View Full Version : After I attach my CSS, nothing appears in preview


georgewhite
12-05-2008, 04:02 AM
Hi everyone,

I'm a first-time Dreamweaver CS4 user who just finished a two-day class on DW and then also walked through a tutorial to boot. I have (what I hope) is a simple question.

I've created my own .CSS file, a style sheet I want to use on every page on my site. The weird thing is, when I associate the .CSS file to a page and then go to preview it in IE or Firefox, nothing but my selected background color appears in the test browser window. When I detact my .CSS from the page and then preview, all my page's text / tables / images / everything appears, but using DW's default style selections. I think my .CSS file is correctly importing the style selections I want, but then causing the test browser to ignore my page's actual content!

My .CSS file is not large (less then 2K). It only defines the background color for a page and five text headings under the paragraph formats. I created it trying to use as many of DW's defaults as possible. Is there some setting with the .CSS files that might explain the troubles I'm having?

Many thanks!
-George

edbr
12-05-2008, 05:09 AM
post ypur css file, it might be a problem with it

d a v e
12-05-2008, 06:20 AM
check the link to the stylesheet is correct - you can right click on the page in the DW files panel and choose Check links > Selected files.

can you upload it somewhere and post a url?
if not then post the code for the page and the css.

georgewhite
12-06-2008, 04:23 AM
Hi everyone, thanks for taking a little time to look at this. Below is my .CSS file in its entirety...
-George
================================================== ======
================================================== ======
@charset "utf-8";
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #00F;
text-decoration: none;
background-image: none;
background-repeat: no-repeat;
letter-spacing: normal;
text-align: justify;
vertical-align: middle;
word-spacing: normal;
white-space: normal;
display: none;
margin: 10px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #FFC;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24pt;
font-style: italic;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #F00;
text-decoration: none;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #00F;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: capitalize;
color: #00F;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: italic;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #F00;
}
h5 {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-style: italic;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #000;
}
h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}

georgewhite
12-06-2008, 04:28 AM
...and here's an example HTML page I just whipped up right now. When I attach my .CSS file (above), I only see the background, but all other input is suppressed. When I detach the .CSS file, my text and image are displayed in a test browser, but (obviously) reverting the default style.
Many thanks again!
-George
================================================== =======
================================================== =======
<!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>Test Page 101</title>
<link href="PDH Style Sheet.css" rel="stylesheet" type="text/css" />
</head>

<body>
<h1>Here is a test page</h1>
<p>Here's a test image:&nbsp; <img src="../PUHWLogo-tiny.gif" width="87" height="43" alt="MyLogo" /></p>
<h2>Here's more test text...</h2>
<p>&nbsp;</p>
</body>
</html>

d a v e
12-06-2008, 05:26 AM
take this away from the BODY in your css

display: none;

display:none does exactly what it says on the tin - and everything is inherited from the body, so you see nothing!

also don't use pts for screen display: use percentages or ems

e.g. set your body to say 76% font size and then size everything else from that

Cary
12-06-2008, 06:10 AM
Nevermind, Dave beat me too it. :)

georgewhite
12-07-2008, 12:06 AM
That did it! Thanks a million, seriously!!! (Why would HTML have a "display: none;" option anyway? Doesn't seem to have much use... :) )

Corrosive
12-07-2008, 12:24 AM
Why would HTML have a "display: none;" option anyway? Doesn't seem to have much use.

It does if you want to hide things that you will then activate with javascript or something. All CSS has its uses. :)

domedia
12-07-2008, 01:56 AM
That did it! Thanks a million, seriously!!! (Why would HTML have a "display: none;" option anyway? Doesn't seem to have much use... :) )
There's ton's of uses for this :)
The question is why you would use it for your page? ;)