Member Avatar for maxicube

ehh, this is a wierd one...
only a small fraction of my css is working when i put it in a external sheet.
works perfectly in internal/embedded css.
here's my css code:

body,td,th {
	background-image: url(images/bg.png);
	background-color: #828281;
	font-family: Arial, Helvetica, sans-serif;
}

#top {
	width:851px;
	height:201px;
}

#middle {
	background-image:url(images/middle.png);
	width:791px;
	padding-left:30px;
	padding-right:30px;
}

#bottom {
	background-image:url(images/bottom.png);
	width:851px;
	height:45px;
}

#all {
	position:absolute;
	width:851px;
	left:50%;
	margin-left:-425.5px;
	top:50px;
}

#ad {
	background-image:url(ads/ad1.jpg);
	position:absolute;
	width:811px;
	height:102px;
	left:20px;
	top:98px;
}

.high
{
	position:absolute;
	background-image:url(images/highlight.png);
	width:66px;
	height:31px;
}

and my html if you want it..

<!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>Leading Edge Computers - Sale</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />


</head>

<body>
<div id="all">
<div id="top"><img src="images/top.png" border="0" usemap="#Map">
</div>
<div id="middle">
  <p><h2>Content</h2></p>
Content Content Content</div>
<div id="bottom"></div>
<div id="ad"></div>
<div class="high" style="visibility:visible; left:20px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:87px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:153px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:220px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:288px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:354px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:422px; top:66px;"></div>
<div class="high" style="visibility:hidden; left:488px; top:66px;"></div>
</div>

<map name="Map" id="Map">
<area shape="rect" coords="20,66,87,98" href="index.html" />
<area shape="rect" coords="87,66,153,97" href="location.html"/>
<area shape="rect" coords="153,66,220,97" href="contact.html" />
<area shape="rect" coords="220,66,288,97" href="about.html" />
<area shape="rect" coords="288,66,354,97" href="promotions.html" />
<area shape="rect" coords="354,66,422,97" href="services.html" />
<area shape="rect" coords="422,66,488,97" href="links.html" />
<area shape="rect" coords="488,66,572,97" href="store.html" />
<area shape="rect" coords="19,15,314,64" href="index.html" />
</map>

</body>
</html>
Edited by maxicube because: n/a
  • 3 Contributors
  • 2 Replies
  • 182 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by pritaeas
Member Avatar for ko ko

I tested with your codes, and it is fine. What is your problem? Is your css file located in the css folder? Check your file location. If the html and css in the same root, create a folder named css you gave it, and move your css file into it. There is no error founds.

Member Avatar for pritaeas

I'm guessing url(image/xx) should now be url(../images/xx) since the css has moved to a subfolder.

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.