Background image not appearing in Firefox [Archive]

View Full Version : Background image not appearing in Firefox

pemps

29th August 06, 10:23 PM

i am slamming my head against the desk... someone help! i have been using css for about 4 weeks. its driving me to an early grave.

the background doesnt appear in firefox yet does in ie. (middle bit should expand with the background showing when i add content to it)

http://www.designsource.co.uk/temp.html

here's the code:

CSS bit (file called sys.css):

body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#f8e999;}
#master {
margin:0 auto;
width:770px;}
#header {
padding:0px;
margin:0px;
height:10px;
background-image:url(n_images/top-bar.gif);
background-repeat:no-repeat;
background-position:bottom;}
#middle {
position:relative;
padding:0px;
margin:0px;
background-image:url(n_images/middle-bar.gif);
background-repeat:repeat-y;
height:100%;}
#nav {
float:left;
width:164px;
padding:5px;}
#main {
float:right;
width:586px;
padding:5px;}
#footer {
clear:both;
padding:0px;
margin:0px;
height:20px;
postion:absolute;
background-image:url(n_images/bottom-bar.gif);
background-repeat:no-repeat;}

HTML bit

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="sys.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="master">
<div id="header"></div>
<div id="middle">
<div id="nav"></div>
<div id="main"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Zerce

29th August 06, 11:13 PM

this once worked for me, add height: 100%; to the body part on CSS

frankiejr

30th August 06, 05:00 AM

pemps,

You have an extra closing div between the end of #main and the beginning of #footer. Remove that and you should be fine.

Also, you can remove position: absolute; from #footer (unless it's there for some specific reason).

.frankiejr

pemps

30th August 06, 11:10 AM

hi and thanks,

tried your comments but still doesnt work.

any more ideas??

cheers

chris

frankiejr

30th August 06, 12:49 PM

pemps,

I edited your code so we can figure out if we're talking about the same thing here. First, I added your CSS to the actual page... I just wanted to make it easier for us to copy/paste so we can figure out your problem.

Copy/paste the code below into a new file. Look at the rendered page. Since I don't have your images, I gave each individual div it's own background color.

What div do you want to "stretch" with content? If I understand correctly, you want #middle to stretch... I gave that a bg color of silver, and it seems to be stretching properly on my end (after moving the proper end div).

Here it is. Let me know your results:

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
background:#f8e999;
}

#master {
margin:0 auto;
width:770px;
}

#header {
padding:0px;
margin:0px;
height:10px;
background:url(n_images/top-bar.gif) red bottom left no-repeat;
}

#middle {
position:relative;
padding:0px;
margin:0px;
background:url(n_images/middle-bar.gif) silver repeat-y;
height:100%;
}

#nav {
float:left;
width:164px;
padding:5px;
background: olive;
}

#main {
float:right;
width:586px;
padding:5px;
background: gray;
}

#footer {
clear:both;
padding:0px;
margin:0px;
height:20px;
background:url(n_images/bottom-bar.gif) red no-repeat;
}

</style>
</head>
<body>
<div id="master">
<div id="header">header</div>
<div id="middle">
<div id="nav">
nav<br />
nav<br />
nav<br />
nav<br />
nav<br />
</div>
<div id="main">
<p>main text. Maecenas sit amet odio non turpis volutpat semper. Praesent dignissim sapien id neque. Nunc libero purus, gravida non, commodo vitae, porttitor vitae, tellus. Sed adipiscing. Phasellus ac purus sit amet nisl cursus ullamcorper. Nam porttitor tincidunt magna. Nullam pretium vestibulum mi. Praesent sed mauris at nulla ornare semper. Fusce augue. Suspendisse ligula tortor, adipiscing sed, mollis et, eleifend sit amet, sem.</p>
</div>
<div id="footer">
footer
</div>
</div>
</div>
</body>
</html>

.frankiejr

pfmac

30th August 06, 01:27 PM

Here is an alternative solution. In FF the #middle div was not clearing properly.
I added a .clearfix class to it and it clears properly and the background image can be seen.

To get it working add this to your css:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

and change this in your html : <div id="middle" class="clearfix"></div>

You can read about the clearfix solution here: http://www.positioniseverything.net/easyclearing.html

pemps

30th August 06, 02:05 PM

frankiejr.... you are a god! a Conjurer of Superb Stylesheets

thank you all very much for the help. i have had 2 days of frustration over something so simple.

c

frankiejr

30th August 06, 04:25 PM

pfmac: I thought the same thing, but while looking at his stylesheet I realized that he'd already accounted for that by clearing both columns with the footer (by putting clear: all; in #footer).

The extra closing div was closing #middle prematurely, so #footer couldn't do it's clearing magic.

pfmac

31st August 06, 08:10 AM

frankiejr,

I realised that as well. I wasn't sure if the footer needed to stay outside the middle div so I went for the clearfix. I like your solution as well and it was probably what pemps was looking for.

pemps

4th September 06, 04:57 PM

did a bit more on the site yesterday... thought you would like to see where i was going with this!

thanks again

chris

http://www.designsource.co.uk/temp.html

Game Makker

4th September 06, 06:51 PM

I quite like it. Its a nice design you have. My one floor is the images on the right. I like them being there but they seem a bit sharp. Even the trees in the background draw my attention and so the picture then becomes to look to busy. If i make any sense :S lol

pemps

29th September 06, 09:44 AM

hi, thanks again for the info you gave a few months back.

i may have some work which i would require your help. the way i see it is this:

1. i create a some visuals for a company
2. you take a look and decide whether all is possible in css
3. when approved we would create the templates for the site

first of all i would need to know if you would be interested. you could work out a price based upon each visual.

let me know, it work would commence on monday 2nd october

thanks

chris

ca@designsource.co.uk