stevecopley
05-12-2007, 07:28 PM
Hello
This is driving me nuts - can anyone help?!
All I want is to add background images to some divs. Nothing to it... but the images are not showing in some browsers (Safari, FF2) but show fine in others (Camino). The code validates (both HTML and CSS).
I've been through endless websites looking for clues. The images are there, the paths to them are correct (I've tried both absolute and relative paths, but no difference)
What am I doing wrong?!
Here is a test example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Copleys</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Steve Copley">
<style type="text/css">
body {
background-color: #F5F4F4;
color: #666;
font: normal 15px/1.1em Helvetica, Arial, sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
}
#container {
width: 700px;
margin: 20px auto;
padding: 0px;
text-align: left;
}
#home {
width: 700px;
padding: 0;
margin: 0 0 20px 0;
border: 1px solid #666;
background-color: #999;
text-align: left;
clear: both;
height: 400px;
background-image: url(http://www.copleys.org/images/banners/banner_main.jpg);
}
h1 {
font-family: Helvetica, Verdana, Arial, Sans-Serif;
font-weight: bold;
text-align: left;
clear: both;
margin: 360px 0 0 30px;
padding: 0;
font-size: 26px;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="home">
<h1>TEST TITLE</h1>
</div>
</div>
</body>
</html>
The code is in use at http://www.copleys.org
Any help greatly appreciated (and I'm quite happy to have someone point out that I've done something stupid!)
Best regards
Steve Copley
This is driving me nuts - can anyone help?!
All I want is to add background images to some divs. Nothing to it... but the images are not showing in some browsers (Safari, FF2) but show fine in others (Camino). The code validates (both HTML and CSS).
I've been through endless websites looking for clues. The images are there, the paths to them are correct (I've tried both absolute and relative paths, but no difference)
What am I doing wrong?!
Here is a test example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Copleys</title>
<meta name="generator" content="TextMate http://macromates.com/">
<meta name="author" content="Steve Copley">
<style type="text/css">
body {
background-color: #F5F4F4;
color: #666;
font: normal 15px/1.1em Helvetica, Arial, sans-serif;
margin: 0px;
padding: 0px;
text-align: center;
}
#container {
width: 700px;
margin: 20px auto;
padding: 0px;
text-align: left;
}
#home {
width: 700px;
padding: 0;
margin: 0 0 20px 0;
border: 1px solid #666;
background-color: #999;
text-align: left;
clear: both;
height: 400px;
background-image: url(http://www.copleys.org/images/banners/banner_main.jpg);
}
h1 {
font-family: Helvetica, Verdana, Arial, Sans-Serif;
font-weight: bold;
text-align: left;
clear: both;
margin: 360px 0 0 30px;
padding: 0;
font-size: 26px;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="home">
<h1>TEST TITLE</h1>
</div>
</div>
</body>
</html>
The code is in use at http://www.copleys.org
Any help greatly appreciated (and I'm quite happy to have someone point out that I've done something stupid!)
Best regards
Steve Copley