2 Replies - 1314 Views - Last Post: 06 February 2007 - 04:16 PM

#1 haveacigar   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 15
  • Joined: 03-February 07

Background Image Problem

Posted 03 February 2007 - 03:04 PM

Hey, I am having a problem with a background image. It works fine in ie but doesnt show up in firefox. The thing is the quadbike in the right hand corner
( http://www.alanmonger.co.uk/keypitts )

Here is the css
/* CSS Document */

a	{
		color:#000066;
		text-decoration:none;
		font-size:1.4em;
	}
a:hover
	{
		color:#009900;
	}
#container
	{
		width:775px;
		position:relative;
		background:url("images/quad.jpg") no-repeat bottom right;
	}
#images
	{
		float:right;
		margin: 0 10px 0 10px;
		width:320px;
		height:auto;
		border-style:solid;
		border-width:1px;
		margin-top:5px;
	}
#content
	{
		width:425px;
		float:left;
		border-left:solid;
		border-width:1px;
		border-color:#999999;
		padding-left:5px;

	}
#header
	{
		width:775px;
		background-color:#ffffff;
		margin-bottom:15px;
	}
a img
	{
		border:none;
		display:block;
	}


Thanks for any help :D

Is This A Good Question/Topic? 0
  • +

Replies To: Background Image Problem

#2 rockstar_   User is offline

  • D.I.C Head
  • member icon

Reputation: 34
  • View blog
  • Posts: 189
  • Joined: 16-October 06

Re: Background Image Problem

Posted 03 February 2007 - 11:51 PM

View Posthaveacigar, on 3 Feb, 2007 - 03:04 PM, said:

Hey, I am having a problem with a background image. It works fine in ie but doesnt show up in firefox. The thing is the quadbike in the right hand corner
( http://www.alanmonger.co.uk/keypitts )

Here is the css
/* CSS Document */

a	{
		color:#000066;
		text-decoration:none;
		font-size:1.4em;
	}
a:hover
	{
		color:#009900;
	}
#container
	{
		width:775px;
		position:relative;
		background:url("images/quad.jpg") no-repeat bottom right;
	}
#images
	{
		float:right;
		margin: 0 10px 0 10px;
		width:320px;
		height:auto;
		border-style:solid;
		border-width:1px;
		margin-top:5px;
	}
#content
	{
		width:425px;
		float:left;
		border-left:solid;
		border-width:1px;
		border-color:#999999;
		padding-left:5px;

	}
#header
	{
		width:775px;
		background-color:#ffffff;
		margin-bottom:15px;
	}
a img
	{
		border:none;
		display:block;
	}


Thanks for any help :D

Hm, I took a look at your site. What tools are you using to debug the Firefox problem? I took a look with Firefox 2.0 with the Web Developer and Firebug extensions. After inspecting the DOM, it appears as though your container class is tiny. When I investigated further, I noticed that it's because your #images and #content divs are floating, but they are floating oddly. It might be a good idea to add a div with clear:both in the style. Also, you might want to relatively position both of those divs as well.

Let me know if that works.

rockstar_
Was This Post Helpful? 0
  • +
  • -

#3 Arbitrator   User is offline

  • D.I.C Addict
  • member icon

Reputation: 52
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Background Image Problem

Posted 06 February 2007 - 04:16 PM

I provided the solution to this question on a different forum. It appears that the relevant background image has been removed from his page since.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1