Z-index, not working right?

HTML & CSS
1

Hi,

I’ve got a bit of an annoying issue!

http://www.chambresdhote.org/cgi-bin/links/page.cgi?g=Chambre_D_Hote_Isere

You should see a popup load when you hover over (I’ve disabled the auto-close for now, to make it easier to inspect via Firebug etc)

For some reason, there are 2 issues:

  1. In Chrome, it doesn’t seem to be positioning the popup in the right place (seems about 100px out)
  2. In Firefox, it seems to not take into account the z-index with the images below (they overlap the popup). The .link_grid has a z-index of 11, and the .previewBox has a z-index much higher (10030, for test purposes). Even with such a high z-index, it just refuses to show OVER the picture

I did have it working when the popup was at the end of .link_grid, but for issues relating to mouseenter/leave, I had to put it inside the .listing_image_fixed_grid div - which is when this issue arose.

Any suggestions?

TIA!

Andy

2

Weird - I don’t seem to be able to edit my post. I’ve made a simpler version of the page:

http://www.chambresdhote.org/new/test.html

As the other link is a bit heavy, for the bit you need to look at :slight_smile:

UPDATE - Eugh, I found it!

.listing_image_fixed_grid.lazyload {
z-index:250;
}

That was overwriting the other z-index I was passing!!!
Thanks!

Andy

3

Thanks very much, @ultranerds for notifying us you fixed it.
Hopefully this will be useful to someone else in the future.

4

Hi,

Sorry, I tried to add this to my last post - but for some reason its locked? (seems a bit silly to lock it, in case anyone else had a question in the future… no?). Feel free to unlock that post, and detach this post and add it to it :slight_smile:

Anyway - I’ve kinda got it working now - but I’m still having some issues:

http://www.chambresdhote.org/cgi-bin/links/page.cgi?g=Chambre_D_Hote_Isere

For some reason, its pushing the contents of the block behind, to the right.

The grid element (the bit with the picture in), is:

.link_grid {
	border: 2px solid #eee;
	margin: 2px;
	margin-left: 12px;
	margin-bottom: 12px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow:    1px 1px 4px 4px #ccc;
	-webkit-box-shadow: 1px 1px 4px 4px #ccc;
	box-shadow:         1px 1px 4px 4px #ccc;
	padding: 7px;
	height: 258px;
	width: 200px;
	float: left;
	z-index: 2000;
}

…and the popup box is:

.previewBox {
	position: relative;
	display:none;
	width:654px;
	height: 260px;
	background: #fff;
	border: 2px solid #eee;
	-webkit-border-radius: 9px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	padding:15px;
	-moz-box-shadow:    1px 1px 4px 4px #BBBBFF;
	-webkit-box-shadow: 1px 1px 4px 4px #BBBBFF;
	box-shadow:         1px 1px 4px 4px #BBBBFF;
	left: -250px;
	top: 80px;
	z-index: 10030;
}

As you can see, the .previewBox has a z-index of well over the 2000 from the .link_grid… so I’m baffled as to why its not simply “overlapping” it, and playing nice?

TIA

Andy

5

[ot]

Done. :)[/ot]

6

Thanks :cool:

Hopefully someone can help me with this, as its driving me up the wall :confused:

Ok - I managed to sort the “text moving” issue out in FF - for some reason I had to define .link-controls as float: left. So that fixes it in FF, but now Chrome is being crappy still. Guess I’ll have to plod on again. Damn you wouldn’t think this would be so hard!

Cheers

Andy

7

Ok, so to throw another spanner in the works! Someone else has tested it for me, and it works fine in Chrome for them, but not in FF. It works in Safari and IE for them

For me, it works in FF IE and Safari, but not Chrome. They are the exact same page… so I’m wondering… what works for who on here? This is the link again:

http://www.chambresdhote.org/cgi-bin/links/page.cgi?g=Chambre_D_Hote_Isere;

TIA

8

Hi,

Sorry I got a bit lost with where we are with this so if you can re-clarify what the problem is again I’ll take a look :slight_smile: Otherwise I’m not quite sure what I am looking for.

9

Hi Paul,

Thanks for the reply. Well thats just sods law… its working this morning!!! I just tested in IE, FF, Chrome and Safari… and all look exactly the same (as they should). Not sure if it was some weird caching going on in Chrome or not (I’ve got it setup so that when I have developer tools open, its supposed to stop caching… so not sure why it was doing that)

Anywho, it seems to be working ok now :slight_smile: Still had some weird stuff with the .popup_ad , .popup_desc and .map_holder, where I’ve had to stick in a -15px margin-top, to get it to align with the top of .previewBox. That causes problems a little higher up with the ads (they use the same class), but hopefully I can track that one down now

Cheers

Andy

10

Glad you are making progress :slight_smile: