CSS will not display in live view or browser preview!

Question

kellyA 0 Newbie Poster

16 Years Ago

I designed my webpage in PS and sliced, optimized and saved it as images and html. I imported it into dreamweaver CS4, aligned it in the center and so far it displayed correctly. Then I added a new div tag to create a new CSS style sheet where I changed the background color to match the new site's, and added some padding along the top.

I can see all the changes I made in design view, but when I select Live View or preview in browser, none of the CSS styles have been implemented. I have tried to find an answer to this, but cannot. PLEASE help!

The CSS code I added was:

@charset "ISO-8859-1";
#site_layout {
    background-color: #d5dbd3;
    height: 100%;
    width: 100%;
    padding-top: 35px;
}

And the Source Code is as follows:

<html>
<head>
<title>sliced & optimized</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/site_layout.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (sliced & optimized.tif) -->
    <div id="site_layout">
      <table width="800" height="601" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
        <tr>
          <td colspan="25">
            <img src="images/top_background.gif" width="800" height="21" alt="background above banner"></td>
          </tr>
        <tr>
          <td colspan="25">
            <img src="images/banner.jpg" width="800" height="113" alt="Peony Banner"></td>
          </tr>
        <tr>
          <td colspan="25">
            <img src="images/bottom_background.gif" width="800" height="16" alt="background below banner"></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="3">
            <img src="images/background_leftofhome.gif" width="9" height="80" alt="background to the left of the home button"></td>
          <td colspan="4">
            <img src="images/home_button.gif" width="100" height="38" alt="Home Button"></td>
          <td rowspan="3">
            <img src="images/background_btw_homeabout.gif" width="15" height="80" alt="background btw home and about me button"></td>
          <td colspan="3">
            <img src="images/about_button.gif" width="100" height="38" alt="About Me Button"></td>
          <td rowspan="3">
            <img src="images/background_btw_aboutshop.gif" width="14" height="80" alt="background btw about me and shop buttons"></td>
          <td colspan="5">
            <img src="images/shop_button.gif" width="100" height="38" alt="Shop Button"></td>
          <td rowspan="2">
            <img src="images/background_btw_shopblog.gif" width="13" height="58" alt="background btw shop and blog buttons"></td>
          <td>
            <img src="images/blog-button.gif" width="100" height="38" alt="Blog Button"></td>
          <td rowspan="2">
            <img src="images/background_btw_blogcontact.gif" width="8" height="58" alt=""></td>
          <td>
            <img src="images/contact_button.gif" width="100" height="38" alt="Contact Button"></td>
          <td rowspan="2">
            <img src="images/background_btw_contactfaq.gif" width="15" height="58" alt="background btw contact and faq buttons"></td>
          <td>
            <img src="images/faq_button.gif" width="100" height="38" alt="FAQ Button"></td>
          <td rowspan="2">
            <img src="images/background_btw_faqpress.gif" width="9" height="58" alt="background btw faq and press buttons"></td>
          <td>
            <img src="images/press_button.gif" width="100" height="38" alt="Press Button"></td>
          <td rowspan="13">
            <img src="images/background_right.gif" width="17" height="450" alt="background column all the way to the right"></td>
          </tr>
        <tr>
          <td colspan="4" rowspan="2">
            <img src="images/background_home.gif" width="100" height="42" alt="background under home"></td>
          <td colspan="3" rowspan="2">
            <img src="images/background_about.gif" width="100" height="42" alt="background under about me"></td>
          <td colspan="5">
            <img src="images/background_shop.gif" width="100" height="20" alt="background under shop"></td>
          <td>
            <img src="images/background_blog.gif" width="100" height="20" alt="background under blog"></td>
          <td>
            <img src="images/background_contact.gif" width="100" height="20" alt="background under contact"></td>
          <td>
            <img src="images/background_faq.gif" width="100" height="20" alt="background under faq"></td>
          <td>
            <img src="images/background_press.gif" width="100" height="20" alt="background under press"></td>
          </tr>
        <tr>
          <td colspan="4">
            <img src="images/background_shop_xtra.gif" width="45" height="22" alt="background under shop background and above logo"></td>
          <td colspan="9" rowspan="8">
            <img src="images/feature.gif" width="500" height="331" alt="feature box"></td>
          </tr>
        <tr>
          <td rowspan="10">
            <img src="images/background_leftoflogo.gif" width="8" height="370" alt="background to the left of logo"></td>
          <td colspan="13">
            <img src="images/logo.gif" width="269" height="146" alt="Kelly Ash Photography Logo"></td>
          <td rowspan="8">
            <img src="images/background_rightoflogo.gif" width="6" height="340" alt="background to the right of logo before feature boxes"></td>
          </tr>
        <tr>
          <td colspan="13">
            <img src="images/background_underlogo.gif" width="269" height="21" alt="background under logo"></td>
          </tr>
        <tr>
          <td colspan="3" rowspan="3">
            <img src="images/background_leftofhortphotog.gif" width="66" height="105" alt="background to the left of horticulturist & Photographer"></td>
          <td colspan="6">
            <img src="images/hortphotog_text.gif" width="150" height="43" alt="text for horticulturist and photographer"></td>
          <td colspan="4" rowspan="3">
            <img src="images/background_righthortphotog.gif" width="53" height="105" alt="background to the right of hort & photog"></td>
          </tr>
        <tr>
          <td colspan="6">
            <img src="images/background_under_hortphotog.gif" width="150" height="49" alt="background under hort & photographer"></td>
          </tr>
        <tr>
          <td>
            <img src="images/background_leftoftele.gif" width="7" height="13" alt="background to the left of the tele number"></td>
          <td colspan="4">
            <img src="images/telephone.gif" width="136" height="13" alt="telephone number"></td>
          <td>
            <img src="images/background_rightoftele.gif" width="7" height="13" alt="background to the right of the tele number"></td>
          </tr>
        <tr>
          <td colspan="2" rowspan="5">
            <img src="images/background_left_bottom.gif" width="40" height="98" alt="background to the left at bottom of page"></td>
          <td colspan="9">
            <img src="images/email.gif" width="199" height="18" alt="email address"></td>
          <td colspan="2">
            <img src="images/background_rightemail.gif" width="30" height="18" alt="background to the right of email address"></td>
          </tr>
        <tr>
          <td colspan="10">
            <img src="images/area.gif" width="200" height="19" alt="Greater Portland Area Maine"></td>
          <td rowspan="2">
            <img src="images/background_rightarea.gif" width="29" height="50" alt="background to the right of the email address, right above copyright"></td>
          </tr>
        <tr>
          <td colspan="9">
            <img src="images/background_underarea.gif" width="199" height="31" alt="background under area"></td>
          <td>
            <img src="images/testing_45.gif" width="1" height="31" alt=""></td>
          <td colspan="9">
            <img src="images/background_under_feature.gif" width="500" height="31" alt="background under feature box"></td>
          </tr>
        <tr>
          <td colspan="5" rowspan="2">
            <img src="images/background_underarea2.gif" width="113" height="30" alt="background under area at very bottom"></td>
          <td colspan="15">
            <img src="images/copyright.gif" width="522" height="12" alt="copyright tag at bottom"></td>
          <td rowspan="2">
            <img src="images/background_rightofcopy.gif" width="100" height="30" alt="background to the right of copyright"></td>
          </tr>
        <tr>
          <td colspan="15">
            <img src="images/background_bottom.gif" width="522" height="18" alt="background at bottom of page under copyright"></td>
          </tr>
        <tr>
          <td>
            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="39" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="26" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="7" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="28" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="15" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="37" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="56" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="7" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="14" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="29" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="6" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="55" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="13" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="100" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="8" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="100" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="15" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="100" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="9" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="100" height="1" alt=""></td>
          <td>
            <img src="images/spacer.gif" width="17" height="1" alt=""></td>
          </tr>
      </table>
    </div>

<!-- End Save for Web Slices -->
</body>
</html>

Any an all help will be very appreciated!
Thank you!

html-css:bootstrap web-design

Edited 13 Years Ago by TrustyTony because: fixed formatting

3 Contributors
5 Replies
551 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by darc.mosch

Dani AI

Generated 10 Months Ago

Short answer: this is almost always a path or syntax problem. ’s stylesheet started working when suggested importing it because the original link was resolving differently when previewing locally. For others (like ) the page contains a few HTML/CSS syntax issues that will prevent the browser from loading or parsing later rules.

Quick checklist (do these in order)

Confirm the CSS file is saved in the same folder you think it is. A leading slash in a link (an absolute root path) will point at the server root and usually fails when you open the file locally. Use a relative path for local testing.
Put a stylesheet link in the document head (before other rules) and force-refresh the browser (Ctrl/Cmd+F5).
If you use an @import inside a <style> block it must come before any rules in that block; likewise @charset in an external file must be the very first thing (no BOM/whitespace before it).
Look for CSS syntax errors (missing }) — one unclosed block stops the rest of the sheet being applied.
Use the browser’s dev tools (Network tab / Inspector) to confirm the CSS file loads (200 OK) and to see which rules actually apply.

Small, targeted fixes (examples)

<link rel="stylesheet" href="site_layout.css" type="text/css">

Fix malformed HTML/CSS from (examples of correct forms)

<div id="Content">...</div>
<li><a href="#">Home</a></li>

/* correct descendant selector */
#Main #Content h1 { font-size:1.5em; }

If the stylesheet still doesn’t apply: validate your HTML/CSS (quickly finds missing braces and bad attributes), remove any BOM by resaving without it, and check the devtools Network panel for 404s. These steps will locate the single error that’s stopping the rest of your CSS from being applied.

All 5 Replies

Lusiphur 185 Practically a Posting Shark

16 Years Ago

First, (silly question but I have to ask) is the .css file saved?

Second, try adding

<style type="text/css">
<!--
@import url("site_layout.css");
-->
</style>

For some reason I find @import works better than "<link href="/site_layout.css" rel="stylesheet" type="text/css">" for me.

Hope this helps :) Please mark as solved if this resolves your issue.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kellyA 0 Newbie Poster · Answer 1 · 2010-07-09T03:45:28+00:00

It was saved (I know you had to ask!) :)

When I added the @import - it all magically started working!!!

Thank you so much!!
(I will now mark this as solved)
:)

Lusiphur 185 Practically a Posting Shark Team Colleague Featured Poster · Answer 2 · 2010-07-09T03:51:46+00:00

Lusiphur 185 Practically a Posting Shark

16 Years Ago

Glad to help :)

darc.mosch 0 Newbie Poster · Answer 3 · 2010-07-18T02:51:55+00:00

Could someone also help too? I am having the exact same problem with mine

<!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>Untitled Document</title>
<style type="text/css">


#Banner {
background-color: #66F;
background-image: url(html/images/ThePokeStore_Banner2_edited.gif);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 1024px;
height: 256px;
clear: both;
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding: 0px;
border: medium solid #FFF;
}
#horizonnav {
margin: 0px;
padding: 0px;
background: #28446C;
list-style: none;
float: left;
width: 1024px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000000;
border-left-color: #000;
}
#horizonnav li {
margin: 0px;
padding: 0px;
float: left;
}
#horizonnav a {
color: #FFFFFF;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFFFFF;
float: left;
width: 145.1px;
text-align: center;
font-size: 90%;
}
#horizonnav a:hover {
background: #83A5CB;
}
#horizonnav #hornav_last a {
border-right-style: none;
}


#Main {
background-color: #000;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: none;



body {
background-color: #306;
border: thick outset #339;
}


body,td,th {
color: #FFF;
font: Trebuchet MS;
}
p {
color: #99F;
}
body {
background-color: #000;
}


#Main #Disclaimer {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 24px;
font-style: oblique;
font-variant: small-caps;
font-weight: bolder;
color: #F00;
width: auto;
}
@import url("site_layout.css");
</style>


</head><body>
<div id="Banner"></div>


<div id="Main">
<ul id="horizonnav">
<li> <a href"#"="">Home</a></li>
<li> <a href"#"="">News</a></li>
<li> <a href"#"="">Shop</a></li>
<li> <a href"#"="">Videos</a></li>
<li> <a href"#"="">Listings</a></li>
<li> <a href"#"="">About US</a></li>
<li li="" id="hornav_last"> <a href"#"="">Contact Us</a></li>
</ul>
<div id="Disclaimer"> Disclaimer: We do not buy or sell pokemon, they are registered trademarks of nintendo company. we are charging you for a service provided. </div>
<div id="#Content"><p>I like to see people running in the yard.  Who does not like that?  I cannot believe how many people live in deep, dark caves around Transylvania.  Is there anyone in there named Belle?  Are they still alive? Did they not kill themselves when they learned of their namesake?</p></div>
</div>



</body></html>

darc.mosch 0 Newbie Poster · Answer 4 · 2010-07-18T03:47:32+00:00

Ok, I got the first issue worked out, then added in a header and the same problem persists

<!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>Untitled Document</title>
<style type="text/css">


#Banner {
background-color: #66F;
background-image: url(html/images/ThePokeStore_Banner2_edited.gif);
background-repeat: no-repeat;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 1024px;
height: 256px;
clear: both;
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
padding: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: medium;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}
#Main ##Content h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: xx-large;
font-style: italic;
line-height: normal;
font-weight: bolder;
font-variant: normal;
color: #99F;
}
#horizonnav {
margin: 0px;
padding: 0px;
background: #28446C;
list-style: none;
float: left;
width: 1024px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000;
border-right-color: #000;
border-bottom-color: #000000;
border-left-color: #000;
}
#horizonnav li {
margin: 0px;
padding: 0px;
float: left;
}
#horizonnav a {
color: #FFFFFF;
text-decoration: none;
line-height: 2;
border-right: 1px solid #FFFFFF;
float: left;
width: 145.1px;
text-align: center;
font-size: 90%;
}
#horizonnav a:hover {
background: #83A5CB;
}
#horizonnav #hornav_last a {
border-right-style: none;
}


#Main {
background-color: #000;
width: 1024px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
float: none;
}


body {
background-color: #306;
border: thick outset #339;
}


body,td,th {
color: #FFF;
font: Trebuchet MS;
}
p {
color: #99F;
}
body {
background-color: #000;
}


#Main #Disclaimer {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 24px;
font-style: oblique;
font-variant: small-caps;
font-weight: bolder;
color: #F00;
width: auto;
}
@import url("style.css");
</style>



<body>
<div id="Banner"></div>


<div id="Main">
<ul id="horizonnav">
<li> <a href"#">Home</a></li
>
<li> <a href"#">News</a></li
>
<li> <a href"#">Shop</a></li
>
<li> <a href"#">Videos</a></li
>
<li> <a href"#">Listings</a></li
>
<li> <a href"#">About Us</a></li
>
<li li id="hornav_last"> <a href"#">Contact Us</a></li
>
</ul>
<div id="Disclaimer">
<div align="center">Disclaimer: We do not buy or sell pokemon, they are registered trademarks of nintendo company. we are providing you a service. </div>
</div>
<div id="#Content">
<ul id="horizonnav">
<li> <a href"#">Home</a></li
><li> <a href"#">News</a></li
><li> <a href"#">Shop</a></li
><li> <a href"#">Videos</a></li
><li> <a href"#">Listings</a></li
><li> <a href"#">About US</a></li
><li> <a href"#">Contact Us</a></li
></ul><h1>Welcome!</h1>
<p>  Hello everyone and welcome to the new PokeStore!  My name is Darc Mosch. My contributor's name is EaglesFury, and we are avid fans when it come to Pokemon. What we do is take all the tedious experience out of Pokemon and let you have nothing but fun when it comes to your games. </p></div>
</div>


</body>


</html>

CSS will not display in live view or browser preview!

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers