CSS will not display in live view or browser preview!

Question

kellyA 0 Newbie Poster

14 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!

display html-css web-browser web-design

Edited 11 Years Ago by TrustyTony because: fixed formatting

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

Lusiphur 185 Practically a Posting Shark

14 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

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