Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Hello.

    I have never really played with z-index before but I am creating a website at the moment and I need a <hr /> to appear behind an image

    Kinda like

    Quote Originally Posted by mock
    - - - [image] - - - - - - -
    In IE7 it does as I expect it to, but in Firefox when I add the z-index: -1; to the <hr /> and the <hr /> vanishes.

    When I remove the z-index: -1; the <hr /> goes in front of the image.

    Heres the CSS when the <hr /> is behind the image in IE but not in FF

    Code:
    #collectionItem hr
    {
    	background-color: #4E2614;
    	color: #4E2614;
    	height: 15px;
    	width: 100%;
    	position: absolute;
    	top: 30px;
    	left: 0;
                         z-index: -1;
    }
    And heres where the <hr /> is in front of the image in IE and FF

    Code:
    #collectionItem hr
    {
    	background-color: #4E2614;
    	color: #4E2614;
    	height: 15px;
    	width: 100%;
    	position: absolute;
    	top: 30px;
    	left: 0;
    }
    Thanks.

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Any chance we could see an example? This may actually just be a rendering bug in Gecko. Try scrolling around and making sure it's there. Also try checking in Firebug if it gets highlighted at all and that all the style rules are applying correctly.

  4. #3
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    Wow, after firefox died on me a while back (pre 3) and I lost all my add-ons I forgot how freaking cool Firebug is.

    Anyway, I may see the problem. Hovering over the <hr /> in Firebug highlights where the <hr /> is, its just that it is not "visible"...

    However - the positioned <hr /> is inside a div which is also position, so I am thinking if I give the div a z-index of -2 and <hr /> a z-index of -1 that should fix it?

    Or I could be talking complete cheese, I will go test.
    Edit: Also not enough data to scroll, I tried jiggling mouse about though and Ctrl + A'ing the page but no joy.

    Edit after testing: fixed it. I gave the positioned div (which is the parent of the <hr /> a z-index of 0 and the <hr /> kept its z-index of -1.

    Courtesy edit: thank you Shadowfiend

  5. #4
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Awesome. I didn't do much in this case, just pointed to the tool Glad to be of help, however.


Remove Ads

Posting Permissions

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

Search tags for this page

css hr z-index

,

hr z-index

Click on a term to search for related topics.
All times are GMT -6. The time now is 09:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com