• 0

Background Image not showing in FF


Question

HTML

<div id="page"> 
	 <div id="header"> 
	   <img src="images/logo.gif" alt="ne14hockey.com" width="290" height="80" />
	 </div>
	 <div id="frametopbg">
		 <img id="frametoprightcorner" src="images/frametoprightcorner.gif" height="11" width="12" alt="" />
		 <img id="frametopright" src="images/frametopright.gif" height="11" width="13" alt="" />
		 <img id="frametopleftcorner" src="images/frametopleftcorner.gif" height="11" width="10" alt="" />
		 <img id="frametopleft" src="images/frametopleft.gif" height="11" width="13" alt="" />	
	</div>
</div>

CSS

* { 
 margin: 0; 
 padding: 0; 
} 
body{ 

	background-image: url('images/background.gif');
	background-repeat: repeat-x;
	background-color: #252525;
	font: 12px/18px "Verdana", sans-serif; 
 	text-align: center; 
 	color: #333; 
}
#page { 
 margin: 0 auto; 
 width: 960px; 
 text-align: left;
 height: 100%; 
} 
#header { 
 height: 80px; 
} 
#frametopleft, #frametopleftcorner {
	float: left;
}
#frametopbg {
	width: 100%; 
	background-image: url('images/frametopbg.gif');
	background-repeat: repeat-x;
	background-color: #000000;
	display: inline-table;
}
#frametopright, #frametoprightcorner {
	float: right;
}

In both browsers the 4 images are correctly ordered to either side of the 960px div but the background image doesn't show?

Also tried it with a span but got the same probem.

TIA for any help!

Link to comment
https://www.neowin.net/forum/topic/568995-background-image-not-showing-in-ff/
Share on other sites

Recommended Posts

  • 0

No mate, the best thing to do is simply add in the height and width properties. that will solve the problem

Infact after looking more at your code it seems a lot more code than it needs to be :)if you size everything properly you should be able to do the whole header panel as one div unless your looking to resize the header?

  • 0

I don't know I'm undecided really, I mean unlike my other project (urbanwarfare) I can't apply the same rules aka gamers have big screens where as hockey players could have anything lol

I think it will have to be a flexible in which case how do I make it expand up to 960 and down to 760 (whilst remain centred) as its not something I have ever managed to do :D

  • 0

Im not too sure if that can be done properly yet. would be done with min-width and max-width but not fully supported.

Your best bet would probably some php or js which gets the browser size and changes the number of the wrapper to the correct one ex:

if browser = 800x600 wrapper1

and wrapper 1 would be 800px wide etc you follow?

maybe this would help http://www.antix.co.uk/code/css/imposing_minimum_width/

  • 0

rgr that or i suppose I could allow users to select what size.

I mean some people might like an 800px site on the 19" same as someone mgiht want there 21" full side to side so I may do what you suggested but give the user the option to override it if they want.

  • 0

set the line height of the part causing the trouble to something like 1 ensuring that the height is the correct height as per the image in the bg.

also, try aligning the bg to top.

Edit: You should also justify the text. it will make it look much nicer

Edited by karma
  • 0

this is what bugs me about being compliant..... IE6 needed the content to be narrower but then it makes the latest events not level with the header in FF but IE 7 acts like nothing has changed lol

(thats fixed btw)

What i now have a problem with is there is white background at the bottom of the page from the page content if the total height of the page is less then 100 not a major problem for the main pages but for the homepage I didn't wan't it to scroll.

http://www.ne14hockey.com/ne14hockey/content.html

  • 0

ok i have done the basic part of the layout and i guess you are ok to add the rest?

http://www.fatbasturd.co.uk/playtime/njt/hockey

and the zip file is here http://www.fatbasturd.co.uk/playtime/njt/hockey/hockey.zip

Tested in Firefox and IE7

Set at 900px at the moment in #wrapper but you can choose a percentage too as it will stretch :) let me know if you need any more help

  • 0

thanx thats much smaller than my amount of code lol

erm having trouble with the content, if i set anything to float the background dissapears in IE (didn't look at FF)?

http://www.ne14hockey.com/ne14hockey/

and as it stands now they don't look right in FF ( no background beyond th e text test) and in IE6 the footer has no grey border?

  • 0

ok reuploaded :) for some reason the content are was knocking the footer out on IE6 when i added padding so i had to use a div within the content area to take care of the padding and add some more positioning properties to take care of IE6

Page should be right and zip file :)

  • 0

Cheers Karma.

Got everything working in all 3 browsers with my header etc footer and content except:

in IE6 the footer goes for a little trip about 200-300px further down the page than it should? its fine in IE7 and FF?

http://www.ne14hockey.com/ne14hockey/index.html

  • 0

* { 
 margin: 0; 
 padding: 0; 
} 
body{ 

	background-image: url('images/background.gif');
	background-repeat: repeat-x;
	background-color: #252525;
	font: 12px/18px "Verdana", sans-serif; 
 	text-align: center; 
 	color: #333; 
}
a { 
 font-size: 12px; 
 line-height: 12px; 
 text-decoration: none; 
 color: #339933; 
} 
a:hover { 
 color: #000000; 
} 
h1 { 
 margin-bottom: 11px; 
 margin-left: -0px; 
 padding: 10px 0 10px 0px; 
 border-bottom: 1px solid #ccc; 
 font-style: italic;
 font-size: 24px;
 font-family: Trebuchet MS, sans serif; 
 font-weight: normal;
 color: #000000; 
} 
h2, h3{ 
 font-weight: normal; 
 font-size: 14px; 
 line-height: 14px; 
} 
h2 { 
 margin-left: -0px; 
 padding: 5px 0px 0px 0px; 
 background: url(h2_ornament.gif) 3px 0 no-repeat; 
 font-size: 14px; 
 text-transform: capitalize;
 font-variant: small-caps; 
 color: #339933; 
} 
h3 { 
 padding-bottom: 4px;
 padding-left: 4px;  
 font-weight: bold; 
 text-transform: capitalize; 
 letter-spacing: -1px; 
 margin-left: 10px;
 font-variant: small-caps; 
 color: #339933; 
} 
#header { 
	padding-top: 20px;
	background-color: #000000;
 	height: 80px;
 	background-image: url('images/background.gif');
	background-repeat: repeat-x; 
} 
#header #logo {
	float: left;
}
#header ul { 
 padding-top: 28px; 
 padding-right: 12px; 
 text-align: right; 
 list-style: none;
 float: right;  
} 
#header li { 
 display: inline; 
 margin: 0 12px; 
} 
#header li a { 
 font-size: 12px; 
 line-height: 12px; 
 text-decoration: none; 
 color: #fff; 
 padding-left: 10px;
 padding-right: 10px;
} 
#header li a:hover { 
 color: #339933; 
} 

/* Green Banner */

#green_bg {
	background-image: url(images/green_top_mid.gif);
	background-repeat: repeat-x;
	height: 169px;
	position: relative;
}
#green_main {
	height: 169px;
	float: left;
	width: 90%;
	position: relative;
}
#green_main img { float: left; }
#green_main p { float: left; padding: 10px 8px 10px 8px; width: 400px; font-size: 18px; text-align: center; line-height: 24px; font-family: Arial }

#green_wpad {
	padding-top: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: 139px;
	text-align: left;
	line-height: 18px;
	position: relative;
}
#green_left {
	background-image: url(images/green_top_left.gif);
	background-repeat: no-repeat;
	float: left;
	height: 169px;
	width: 5%;
	background-position: left;
	position: relative;
}
#green_right {
	background-image: url(images/green_top_right.gif);
	float: right;
	height: 169px;
	width: 5%;
	background-position: right;
	background-repeat: no-repeat;
	position: relative;
}
/* Links */
#ehalogo {
	margin-top: 15px;
	margin-bottom: 15px;
}

#sportenglandlogo {
	margin-top: 15px;
	margin-bottom: 15px;
}

#exiles {
	margin-top: 15px;
	margin-bottom: 15px;
}

#rsc {
	margin-top: 15px;
	margin-bottom: 15px;
}
#grey_bg {
	background-image: url(images/grey_bot_mid.gif);
	background-repeat: repeat-x;
	height: 169px;
	position: relative;
	float: left;
	width: 100%;
}
#grey_main {
	height: 159px;
	float: left;
	width: 89%;
	position: relative;
}
#grey_wpad {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: 159px;
	line-height: 159px;
	position: relative;
	vertical-align: middle;
}
#grey_left {
	background-image: url(images/grey_bot_left.gif);
	background-repeat: no-repeat;
	float: left;
	height: 169px;
	width: 5%;
	background-position: left;
	padding: 0px;
	position: relative;
}
#grey_right {
	background-image: url(images/grey_bot_right.gif);
	float: right;
	height: 169px;
	width: 5%;
	background-position: right;
	background-repeat: no-repeat;
	padding: 0px;
	position: relative;
}
#content {
	background-color: #FFFFFF;
	border-top-width: 0px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #676767;
	border-right-color: #676767;
	border-bottom-color: #676767;
	border-left-color: #676767;
	text-align: left;
	position: relative;
	float: left;
}
#content_inner {
	width: 734px;
	padding: 10px;
	float: left;
	position: relative;
}
#content-primary { 
 float: right;
 width: 460px; 
 margin-right: 10px;
} 
#content-primary p { 
 padding-bottom: 10px; 
 border-bottom: 1px solid #ccc; 
} 
#content-primary img { 
 float: left; 
 margin: 10px 18px 6px 0px; 
 padding: 6px; 
 border: 3px solid #eee; 
 background: #fff; 
} 
#content-secondary { 
 margin: 0px 0px 0px 0px; 
 background-color: #E3E7E3;
 width: 230px; 
 font-size: 11px; 
 color: #300; 
} 
#content-secondary p { 
 padding: 5px 15px 5px 15px;
 width: 200px;
} 

#content-secondary img.event { 
 padding: 0px 0px 5px 0px;
 background: #E3E7E3; 
} 

/* News */
#newspanel img, #blogpanel img { border: 0; }
#newspanel {
	width: 190px; 
	float: left;
}

#blogpanel {
	width: 190px; 
	float: right;
}

#footer { 
 margin: 0; 
 width: 100%; 
 height: 40px;
 text-align: center;
 font-size: 10px; 
 line-height: 40px; 
 color: #fff; 
 position: relative;
 float: left;

}
#wrapper {
	width: 760px;
	margin-right: auto;
	margin-left: auto;
}

<!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>Untitled Document</title>
<link href="hockey_globalb.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
	<div id="header"> 
	   <ul> 
		   <li><a href="#">home</a></li>
		   <li><a href="#">news</a></li>
		   <li><a href="#">events</a></li>
		   <li><a href="#">forum</a></li>
		   <li><a href="#">contact us</a></li>
		 </ul> <img src="images/logo.gif" id="logo" alt="ne14hockey.com" width="290" height="80" />
	 </div>
<!-- HEADER -->
<div id="green_bg">
<div id="green_left"></div>
<div id="green_main"><div id="green_wpad"><img src="images/greenstickball.gif" height="158" width="165" alt="" /><p><br/>100% Field Hockey<br/> 24/7 & 365 days a year</p><img src="images/greenmap.gif" height="158" width="100" alt="" /></div></div>
<div id="green_right"></div>
</div>
<!-- HEADER END -->
<!-- CONTENT START -->
<div id="content">
<div id="content_inner">
	<div id="content-primary"> 
		 <h1>Welcome to ne14hockey.com</h1> 
		 <h2>100% Field Hockey 24/7, 365 days a year</h2> 
		 <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Non porttitor urna libero vitae nibh. Ut convallis eros sed magna. </p> 
		 <div id="blogpanel">
		 <h2>Latest Blogs…</h2> 
		 <p><img src="images/blog.gif" height="65" width="75"  alt="" /><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Etiam venenatis.</p>
		 </div>
		 <div id="newspanel">
		 <h2>Latest News…</h2> 
		 <p><img src="images/stickball.gif" height="65" width="75"  alt="" /><a href="#">Ut aliquet</a>, aliquet ut, congue at, tempus in, nunc. leo et lectus.</p>
		 </div> 
	   </div> 
<div id="content-secondary"> 
	   	<img src="images/lightgreytop.gif" width="230" height="13" alt="" /><br/>
		 <h3>Latest Events</h3> 
		 <p><img src="images/event-default.gif" class="event" alt="" height="70" width="200" /><br/> <a href="#">Read more →</a> </p>
		 <p><img src="images/event-default.gif" class="event" alt="" height="70" width="200" /><br/><a href="#">Read more →</a> </p>
		 <img src="images/lightgreybottom.gif" width="230" height="13" alt="" style="vertical-align: bottom;"/><br/> 
	   	</div>
  </div>
</div>
<!-- CONTENT END -->
<!-- FOOTER START -->
<div id="grey_bg">
<div id="grey_left"></div>
<div id="grey_main">
	<div id="grey_wpad">
		<img src="images/eha.gif" height="129" width="124" alt="" id="ehalogo" />
		<img src="images/rsc.gif" height="129" width="124" alt="" id="rsc" />
		<img src="images/exiles.gif" height="129" width="138" alt="" id="exiles" />
		<img src="images/sportengland.gif" height="129" width="124" alt="" id="sportenglandlogo" />
	</div>
</div>
<div id="grey_right"></div>
</div>
<!-- FOOTER END -->
</div>
<div id="footer">2007 © ne14hockey.com</div>
</body>
</html>

  • 0

try this matey. i cant seem to replicate the error.

<!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>Untitled Document</title>
<link href="hockey_globalb.css" rel="stylesheet" type="text/css" />
<link href="hockey_globalb.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
	<div id="header"> 
	   <ul> 
		   <li><a href="#">home</a></li>
		   <li><a href="#">news</a></li>
		   <li><a href="#">events</a></li>
		   <li><a href="#">forum</a></li>
		   <li><a href="#">contact us</a></li>
	  </ul> <img src="images/logo.gif" id="logo" alt="ne14hockey.com" width="290" height="80" />  </div>
<!-- HEADER -->
<div id="green_bg">
<div id="green_left"></div>
<div id="green_main"><div id="green_wpad"><img src="images/greenstickball.gif" height="158" width="165" alt="" /><p><br/>100% Field Hockey<br/> 24/7 & 365 days a year</p><img src="images/greenmap.gif" height="158" width="100" alt="" /></div></div>
<div id="green_right"></div>
</div>
<!-- HEADER END -->
<!-- CONTENT START -->
<div id="content">
<div id="content_inner">
	<div id="content-primary"> 
		 <h1>Welcome to ne14hockey.com</h1> 
		 <h2>100% Field Hockey 24/7, 365 days a year</h2> 
		 <p><strong>Primary content.</strong> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Non porttitor urna libero vitae nibh. Ut convallis eros sed magna. </p> 
		 <div id="blogpanel">
		 <h2>Latest Blogs…</h2> 
		 <p><img src="images/blog.gif" height="65" width="75"  alt="" /><a href="#">Ut erat nibh</a>, aliquet ut, congue at, tempus in, nunc. Etiam venenatis.</p>
		 </div>
		 <div id="newspanel">
		 <h2>Latest News…</h2> 
		 <p><img src="images/stickball.gif" height="65" width="75"  alt="" /><a href="#">Ut aliquet</a>, aliquet ut, congue at, tempus in, nunc. leo et lectus.</p>
		 </div> 
	  </div> 
<div id="content-secondary"> 
		   <img src="images/lightgreytop.gif" width="230" height="13" alt="" /><br/>
		 <h3>Latest Events</h3> 
		 <p><img src="images/event-default.gif" class="event" alt="" height="70" width="200" /><br/> <a href="#">Read more →</a> </p>
		 <p><img src="images/event-default.gif" class="event" alt="" height="70" width="200" /><br/><a href="#">Read more →</a> </p>
		 <img src="images/lightgreybottom.gif" width="230" height="13" alt="" style="vertical-align: bottom;"/><br/> 
	  </div>
  </div>
</div>
<!-- CONTENT END -->
<!-- FOOTER START -->
<div id="grey_bg">
<div id="grey_left"></div>
<div id="grey_main">
	<div id="grey_wpad">
		<img src="images/eha.gif" height="129" width="124" alt="" id="ehalogo" />
		<img src="images/rsc.gif" height="129" width="124" alt="" id="rsc" />
		<img src="images/exiles.gif" height="129" width="138" alt="" id="exiles" />
		<img src="images/sportengland.gif" height="129" width="124" alt="" id="sportenglandlogo" />	</div>
</div>
<div id="grey_right"></div>
</div>
<!-- FOOTER END -->
<div id="footer">2007 © ne14hockey.com</div></div>

</body>
</html>

* { 
margin: 0; 
padding: 0; 
} 
body{ 

	background-image: url('images/background.gif');
	background-repeat: repeat-x;
	background-color: #252525;
	font: 12px/18px "Verdana", sans-serif; 
	text-align: center; 
	color: #333; 
}
a { 
font-size: 12px; 
line-height: 12px; 
text-decoration: none; 
color: #339933; 
} 
a:hover { 
color: #000000; 
} 
h1 { 
margin-bottom: 11px; 
margin-left: -0px; 
padding: 10px 0 10px 0px; 
border-bottom: 1px solid #ccc; 
font-style: italic;
font-size: 24px;
font-family: Trebuchet MS, sans serif; 
font-weight: normal;
color: #000000; 
} 
h2, h3{ 
font-weight: normal; 
font-size: 14px; 
line-height: 14px; 
} 
h2 { 
margin-left: -0px; 
padding: 5px 0px 0px 0px; 
background: url(h2_ornament.gif) 3px 0 no-repeat; 
font-size: 14px; 
text-transform: capitalize;
font-variant: small-caps; 
color: #339933; 
} 
h3 { 
padding-bottom: 4px;
padding-left: 4px;  
font-weight: bold; 
text-transform: capitalize; 
letter-spacing: -1px; 
margin-left: 10px;
font-variant: small-caps; 
color: #339933; 
} 
#header {
	padding-top: 20px;
	background-color: #000000;
	height: 80px;
	background-image: url('images/background.gif');
	background-repeat: repeat-x;
	position: relative;
} 
#header #logo {
	float: left;
}
#header ul { 
padding-top: 28px; 
padding-right: 12px; 
text-align: right; 
list-style: none;
float: right;  
} 
#header li { 
display: inline; 
margin: 0 12px; 
} 
#header li a { 
font-size: 12px; 
line-height: 12px; 
text-decoration: none; 
color: #fff; 
padding-left: 10px;
padding-right: 10px;
} 
#header li a:hover { 
color: #339933; 
} 

/* Green Banner */

#green_bg {
	background-image: url(images/green_top_mid.gif);
	background-repeat: repeat-x;
	height: 169px;
	position: relative;
}
#green_main {
	height: 169px;
	float: left;
	width: 90%;
	position: relative;
}
#green_main img { float: left; }
#green_main p { float: left; padding: 10px 8px 10px 8px; width: 400px; font-size: 18px; text-align: center; line-height: 24px; font-family: Arial }

#green_wpad {
	padding-top: 11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: 139px;
	text-align: left;
	line-height: 18px;
	position: relative;
}
#green_left {
	background-image: url(images/green_top_left.gif);
	background-repeat: no-repeat;
	float: left;
	height: 169px;
	width: 5%;
	background-position: left;
	position: relative;
}
#green_right {
	background-image: url(images/green_top_right.gif);
	float: right;
	height: 169px;
	width: 5%;
	background-position: right;
	background-repeat: no-repeat;
	position: relative;
}
/* Links */
#ehalogo {
	margin-top: 15px;
	margin-bottom: 15px;
}

#sportenglandlogo {
	margin-top: 15px;
	margin-bottom: 15px;
}

#exiles {
	margin-top: 15px;
	margin-bottom: 15px;
}

#rsc {
	margin-top: 15px;
	margin-bottom: 15px;
}
#grey_bg {
	background-image: url(images/grey_bot_mid.gif);
	background-repeat: repeat-x;
	height: 169px;
	position: relative;
	float: left;
	width: 100%;
}
#grey_main {
	height: 159px;
	float: left;
	width: 89%;
	position: relative;
}
#grey_wpad {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	height: 159px;
	line-height: 159px;
	position: relative;
	vertical-align: middle;
}
#grey_left {
	background-image: url(images/grey_bot_left.gif);
	background-repeat: no-repeat;
	float: left;
	height: 169px;
	width: 5%;
	background-position: left;
	padding: 0px;
	position: relative;
}
#grey_right {
	background-image: url(images/grey_bot_right.gif);
	float: right;
	height: 169px;
	width: 5%;
	background-position: right;
	background-repeat: no-repeat;
	padding: 0px;
	position: relative;
}
#content {
	background-color: #FFFFFF;
	border-top-width: 0px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #676767;
	border-right-color: #676767;
	border-bottom-color: #676767;
	border-left-color: #676767;
	text-align: left;
	position: relative;
	float: left;
}
#content_inner {
	padding: 10px;
	position: relative;
	clear: both;
}
#content-primary { 
float: right;
width: 460px; 
margin-right: 10px;
} 
#content-primary p { 
padding-bottom: 10px; 
border-bottom: 1px solid #ccc; 
} 
#content-primary img { 
float: left; 
margin: 10px 18px 6px 0px; 
padding: 6px; 
border: 3px solid #eee; 
background: #fff; 
} 
#content-secondary { 
margin: 0px 0px 0px 0px; 
background-color: #E3E7E3;
width: 230px; 
font-size: 11px; 
color: #300; 
} 
#content-secondary p { 
padding: 5px 15px 5px 15px;
width: 200px;
} 

#content-secondary img.event { 
padding: 0px 0px 5px 0px;
background: #E3E7E3; 
} 

/* News */
#newspanel img, #blogpanel img { border: 0; }
#newspanel {
	width: 190px; 
	float: left;
}

#blogpanel {
	width: 190px; 
	float: right;
}

#footer {
	margin: 0;
	height: 40px;
	text-align: center;
	font-size: 10px;
	line-height: 40px;
	color: #fff;
	clear: both;

}
#wrapper {
	width: 760px;
	margin-right: auto;
	margin-left: auto;
}

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.