SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Blanes
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question div background image disappears in ie

    This code shows two images in the header:

    Code:
    #header{
       background:url(head.png)0 0 no-repeat;
    	height:111px;
    	width:auto;
    	
    }
    #header img{/*logo*/
    	margin-left:30px;
    }
    
    #header h1{
    	font-size:2.0em;
    	margin:0;
    	background:url(foto_cabecera.jpg)100% 0 no-repeat;
    	width:510px;
    	height:111px;
    	position:absolute;
    	z-index:101;
    	top:10px;
    	right:10px;
    }
    #header h1 span{
    	visibility:hidden;
    }
    I can't find the reason why the two background images are not showing in i.e.. They do show with Firefox.
    The complete layout uses a wrapper and it's not floated.
    Also included in the header there is a navigation div with buttons which I don't know if it could be making the bug appear:

    Code:
    .navlinks {
    	 clear:both;
        float:left;
    	 position:relative; 	 
        font-size:93%;
        line-height:normal;
    }
    Any clues?
    Thanks!

  2. #2
    SitePoint Zealot Freelander's Avatar
    Join Date
    Dec 2004
    Location
    Arizona
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what i have learned so far from CSS, is that you can only have 1 background image. I am not sure on that. But try and get rid of one of the images.

  3. #3
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    - I don't know if putting the comment inside that spot may be causing it.

    - z-index only goes up to 100

    - That 100% is probably pushing it into negative space.

  4. #4
    SitePoint Member
    Join Date
    Dec 2004
    Location
    Blanes
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Found a solution

    I don't know why but I removed no-repeat 0 0; and no-repeat 100% 0; from both images and now they show in i.e..
    The repetition wasn't affecting the sliding image efect. The h1 background slides over the header background when the browser resolution changes which I needed for my liquid design.
    I wonder if it was the way I wrote the css definition, but don't exactly know what.


Bookmarks

Posting Permissions

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