CSS wont work unless i put style information into the html file why?

D

danilhastings

New member
im trying to set a background image for a div and in dreamweaver having this code in the css makes the image appear fine.
#main {
width:90%;
padding-top:6px;
background-image:url(Images/egyptian-papyrus-t5-peach.jpg);
}

this is the div in the html file
<div id="main">
<div align="center">
<script src="acac1.js" type="text/javascript"></script><!-- Accordion Script by Gokhan Dagli --><script>ac1init_doc('',0);</script>
</div>
</div>
but when i open it in the browser everythin but the image works. it seems that the browsers dont want to read that bit of code but it will read the rest from css.

if i copy the style for that div and put it into the html file by making a style in the header it works just fine. so for some reason when i set the background image in the css it doesnt work but when i put the exact same code from the css into the html style it works just fine.

i have also found that ie and chrome completely ignore the css altogether so im sure its some error with the css. i have the css in the same folder as all the html files and the images are in sub folder.

live view in dreamweaver does not display the background either it only shows up in design view. i have checked the code over and over and i cant fins any problems in it at all.

full html

<html>
<head>

<title>Home</title>
<link rel="stylesheet" type="text/css" href= style.css/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>
<div id="header"> <img src="Images/Untitled-1.png" width="531" height="112" alt="sandyLaneLogo">
<h2 align="left"> SPORTS THERAPY & BEAUTY</h2>
</div>


<div id="menuContainer">
<div>
<div align="right"></div>
</div>
</div>

<div id="main">

<div align="center">
<script src="acac1.js" type="text/javascript"></script><!-- Accordion Script by Gokhan Dagli --><script>ac1init_doc('',0);</script>
</div>
</div>

<div id="footer">
<a href="index.html"> Home</a>|<a href="ContactUs.html">Contact Us</a></div>

</body>

</html>

and the css
body {
color: #000;
padding-left:10%;
background-image:url(Images/Sand-Dunes-Soft.jpg);
}

#main {
width:90%;
padding-top:6px;
background-image:url(Images/egyptian-papyrus-t5-peach.jpg);
}

#menuContainer {
width:90%;
text-align:right;
}
#footer{
width: 90%;
text-align: center;
background-color: #FFC;
background-image:url(Images/egyptian-papyrus-t5-peach.jpg);

}

#header {
width: 90%;
padding:2px;
background-color: transparent;
text-decoration:overline;
text-align:left;


}
#header p {
color: #000;

}
 
Back
Top