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 4 of 4

Thread: z-index problem

  1. #1
    Regular Coder
    Join Date
    Aug 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    z-index problem

    hey, I'm working on the following site
    http://beforethestores.com/newbts/
    What im worried about is the product links are sowing up behind the image and other stuff...I'll explain

    I have .productsite that contains all the elements that format the image, name, price, etc. The only CSS I have for that is setting the z-index low
    Code:
    .productsite{
    	z-index:100;
    }
    and then I have .productlink which is the link that I want over the entire product box, it has the following CSS to make it block, absolute so its out of the flow, and a high z-index to put it in front of everything else
    Code:
    .view-products .view-content .views-row .productlink{
    	display:block;
    	position:absolute;
    	top:0;
    	left:0;
    	height:100%;
    	width:100%;
    	z-index: 1000;
    }
    This shows up how I would like it to in some browsers, but in IE6,7,8 and Opera (all the browsers I have tested in other than FF, Safari, and Chrome) the link is behind all the other elements and prevents clicking. Any ideas what could be up. I had a similar problem before, and I thought it was because of invalid HTML, but I fixed all that and its pretty much the same. Any help is appreciated. Thanks!

  • #2
    Regular Coder Jazzo's Avatar
    Join Date
    Apr 2008
    Location
    New York City
    Posts
    164
    Thanks
    20
    Thanked 2 Times in 2 Posts
    Well, this probably isn't the answer you want, but avoid using position: absolute. Nothing on your website seems to warrant the use of it. It's very difficult to figure out what different browsers do with z-index, which is only required when you use position absolute. Instead of putting your product links absolutely positioned on top of your site, put them in divs as part of .productsite. You can then position your divs with CSS.

    Sorry if this is not the answer you want.

    Julian
    ~Julian
    14 y/o web developer, drummer, and Bridge player

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 Posts
    Hello Bobbo171,
    You need to clear your floats and fix your box model.

    Read how this clears your floats in #content -
    Code:
    #content {
    overflow: auto;
    padding: 5px;
    }
    In each 160px high .views-row you have a 160px PLUS 10px margin high .prodDispImg.
    margin/padding/border are all included in the total width/height. See how the box model works here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Jazzo View Post
    Well, this probably isn't the answer you want, but avoid using position: absolute. Nothing on your website seems to warrant the use of it. It's very difficult to figure out what different browsers do with z-index, which is only required when you use position absolute. Instead of putting your product links absolutely positioned on top of your site, put them in divs as part of .productsite. You can then position your divs with CSS.

    Sorry if this is not the answer you want.

    Julian
    Well I'm using position absolute to take the link block out of the flow so everything can be placed over/under it, and if these browsers agreed with each other I would be good as gold (that's the biggest most unrealistic if I've ever said) I want to avoid putting the link in there 4 times because that's kinda messy. Ideally there is something I overlooked or that I am not aware of that would make this work in the IEs and Opera

    Quote Originally Posted by Excavator View Post
    Hello Bobbo171,
    You need to clear your floats and fix your box model.

    Read how this clears your floats in #content -
    Code:
    #content {
    overflow: auto;
    padding: 5px;
    }
    In each 160px high .views-row you have a 160px PLUS 10px margin high .prodDispImg.
    margin/padding/border are all included in the total width/height. See how the box model works here.
    Thanks, I was unaware of using overflow to clear floats, and I must have not been thinking right when I was typing out .prodDispImg. Thanks for pointing those out


  •  

    Posting Permissions

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