Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background Image Problem

    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
    Code:
    /* 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

  • #2
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    anybody?

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    try using this instead:

    #container
    {
    width:775px;
    position:relative;
    background-image:url("images/quad.jpg");
    background-repeat:no-repeat;
    }

    see if that works.

  • #4
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately not... but thanks anyway.

    I dont know why but i am also unable to change the color..

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm ok, last suggestion...

    #container
    {
    visibility:visible;
    position:absolute;
    width:900px;
    top:12px;
    left:12px;
    height:200px;
    background-image: url(/images/quad.jpg);
    background-repeat:no-repeat;
    }


    Im guessing you know what to do with Width, Top, Left and height?

  • #6
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still no i dont know why its not working properly in ff but perfectly in ie

  • #7
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmmm strange... i my experience its usually the other way around.
    When you say "not working properly" is it actually showing something? or is the div not displaying at all? Im guessing container is a div anyway...

  • #8
    Regular Coder
    Join Date
    Oct 2006
    Posts
    181
    Thanks
    1
    Thanked 6 Times in 6 Posts
    i am not sure of the problem, but having no positioning on header div, and with it being same width as container, could the header be blocking the quad background image.. ??
    Quote Originally Posted by Excavator
    write it for firefox then hack it for IE

  • #9
    New Coder
    Join Date
    Feb 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It could be, but if he's used TOP to plot where the div is, there should be no reason its blockin it... but thats if they've used TOP.

    They could always use Z-index to force the container infront i suppose.

    hmmm, maybe adding. Z-index:10; could do the trick, but personally i dont really use Z-index that much, so im not sure about this.

  • #10
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,277
    Thanks
    28
    Thanked 272 Times in 266 Posts
    You need to clear your floats: div#container { overflow: auto; }.

    Quote Originally Posted by haveacigar View Post
    i dont know why its not working properly in ff but perfectly in ie
    This is actually a flaw in Internet Explorerís float model, not the other way around.

    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •