...

View Full Version : Problem with background image placement in a div.



E-Liam
11-19-2010, 10:39 PM
Hi all,

this is a daft one..

http://www.liamsworld.org.uk/bfcgs/index.html

In IE the background image for the footer appears just where it should, but in FF Opera and Safari.. the browsers that know I've cocked up somewhere, the image is just under the "topmenu" div. I've spent the last couple of hours wondering why the div itself was in the wrong position until I identified each div with a line of text.. and noticed that the div was correctly positioned, just that the background image has gone astray.

Before I pull any more hair out.. PLEASE HELP a numpty.. :thumbsup:

Cheers

Liam

ps. The main site is just a storage facility at the moment, so I know that's rubbish. :) )

(Everything validates fine BTW.)




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Bracknell Forest Golf Society</title>

<style type="text/css">

body {
/*background-image: url(bgshadow.jpg);*/
background-repeat: repeat-y;
background-position: center;
background-color: #e3eccc;
text-align: center;
}

#container {
position:relative;
width: 800px;
height: 830px;
margin: 0 auto;
text-align: center;
}

#uppertrim {
position:relative;
background-image: url(topcurve2.gif);
height: 40px;
}

#banner {
position:relative;
background-image: url(bannerbg2.gif);
top: 0px;
height: 110px;
}

#topmenu {
position:relative;
background-image: url(menubg2.gif);
top: 0px;
height: 40px;
}

#left {
background-image: url(leftbg2.gif);
position:relative;
float:left;
top: 0px;
width: 200px;
height: 500px;
}

#content {
background-image: url(contentbg2.gif);
position:relative;
float:right;
top: 0px;
width: 600px;
height:500px;
}


#footer {
position:relative;
background-image: url(bottomcurve2.gif);
height: 40px;
}


</style>
</head>

<body>

<div id="container">

<div id="uppertrim">uppertrim 800x40</div>
<div id="banner"></div>
<div id="topmenu">top menu 800x40</div>
<div id="left">left div 200x500</div>
<div id="content">content div 600x500</div>
<div id="footer">footer 800x40</div>

</div>

</body>
</html>

DrDOS
11-19-2010, 11:12 PM
#footer {
position:relative;
background-image: url(bottomcurve2.gif);
height: 40px;
clear: both;
}
Added clear: both; There's more stuff to do but looks like that will be easy to figure out.

E-Liam
11-19-2010, 11:28 PM
Hi DrDos,

worked a treat in all browsers,

Now I can get on with the fun stuff.. :)


Cheers

Liam



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum