Forum Moderators: not2easy

Message Too Old, No Replies

Firefox and Absolutely Positioned Divs

         

Umbra

1:57 pm on Dec 13, 2007 (gmt 0)

10+ Year Member



If a DIV is absolutely positioned over another element, and the DIV is empty or partially empty, then IE allows you to click *through* the empty part of the DIV. Firefox doesn't.

Like in this example, in IE, you can click the link, in Firefox you can't.

<HTML>
<HEAD></HEAD>
<BODY>
<DIV><A HREF="test">test</A></DIV>
<DIV style="position:absolute;top:0px;left:0px;width:100px;height:100px"></DIV>
</BODY>
</HTML>

Is there any workaround in Firefox, some sort of hack?

Using Z-index is the obvious suggestion, but in my case, that's not an option. Instead, I'd like to mimic the IE behavior in Firefox, if at all possible.

ratman7

3:14 pm on Dec 13, 2007 (gmt 0)

10+ Year Member



You hack IE, not FF. Figure out how to accomplish what you're trying to do in FF, then hack IE if you need to. FF is most likely rendering it according to the standards.

Umbra

4:36 pm on Dec 13, 2007 (gmt 0)

10+ Year Member



You hack IE, not FF

I would agree if the priority is about "standards", but that's a subjective thing to treat coding standards like some sort of constitutional law. The fact is that Amazon.com's of today are not W3C valid and IE is the most common browser. Therefore, without trying to getting embroiled in a debate about standards, I must reject that ultimatum as unhelpful and too "ivory-tower".

Xapti

5:33 pm on Dec 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Over half the population of the united states are obese, it doesn't mean we should cater to their obesity even more. There's nothing wrong with designing to standards, and fixing browsers like IE afterwards, which is all he seemed to mean.
What he also may mean is that IE is buggy as hell, and therefore accepts hacks (as well as conditional comments), and other workaround quirks. As a standards-compliant and not very buggy browser, there are very few, if any, real hacks out there for firefox, and it doesn't have anything like conditional comments either. It supports the standards effectively, just like many other browsers. IE is the browser isolated from the pack which is buggy and doesn't support as much, and is often easily fixable, so why not fix it?

Note that if you remove the link, the text underneath is no longer selectable. This is just some feature/bug IE implemented for links.
You were looking for a workaround, but you say you can't use z-index? what are you looking for then? this is the CSS forum, and it's a stacking (z-index) issue. What other solutions can't you use? HTML, and javascript too?

[edited by: Xapti at 5:50 pm (utc) on Dec. 13, 2007]

Umbra

6:36 pm on Dec 13, 2007 (gmt 0)

10+ Year Member



There's nothing wrong with designing to standards

My issue is those who forgo practicality due to an almost blind devotion to standards. If following the standards generates more revenue, decrease page load, etc. then that's fine, but in most cases, there's a good reason why today's major retailers generally ignore standards. Catering to obesity has nothing to do with it.

Now I just discovered... Run a Google search for "IE event transparency" and it seems that Mozilla has/is been looking into it, so (if I understood correctly) it doesn't even seem to be a standards issue anyway.

If you have numerous small layers (like a snow falling effect) or floating ads with irregular shapes, it can be really nice and convenient (depending on the exact application) to use one big div and be able to click through the empty parts.

In hind site, I guess it's not a CSS question per se. I posted this, because I thought this issue would be interesting to some of you. I just didn't expect to get ambushed by the Web Standards Evangelists.

SuzyUK

1:09 pm on Dec 15, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Umbra, I think you have picked something up wrongly, perhaps not but, that's my reading of this thread

in the first instance I would've given a similar answer as ratman7 to your original question

Is there any workaround in Firefox, some sort of hack?

There are no Firefox/Opera/Safari hacks

To expand, if you want to use hacks then that is entirely up to you, but you have to do it other way around. FF is Standards Compliant - by the way do you know that the CSS 'Standards' are only recommendations they are not set in stone, if Mozilla chooses to follow the recommendations then that is their choice, we work with what there is - it would be so much easier for all concerned if there was an actual "standard" - but the recommendations/specifications are the closest thing we have to a manual. Them together with the knowledge of which browsers support what, and how they implement it, is part of our crazy world ;)

So the 'mantra/ around these parts:
..design for FF and hack for IE..
is not to do with ideals - its meant as sound, practical advice

Fact: IE is the one browser with 'legal' loopholes that enables 'hacks'/workarounds, unlike the good ol' days, and we can't help that, that is the way it is.

I don't consider myself a standard evangelist, more a specification realist.

In your OP you said:

Using Z-index is the obvious suggestion,

That is the only answer, based on the sample you gave, as inferred by Xapti. If you can't use z-index in this simple testcase then you can't successfully manipulate the stacking order in Standards Compliant browsers (which most are now).

I must reject that ultimatum as unhelpful and too "ivory-tower".

It didn't read that as an ultimatum, it was a fact, rejecting it means a possible wild-goose chase based on the info we have from you so far anyway

The fact is that Amazon.com's of today are not W3C valid and IE is the most common browser.

Oh boy do we ever know about the ongoing debate between validation and IE, but this is not the thread to discuss that - feel free to start another topic or search here at WebmasterWorld to find past history regarding the evolution to this point

Nobody actually mentioned anything about 'W3C validation', that is a different thing altogether and I'm sure folks would be quite happy to give you a FF hack if there were one.. we know it's possible to have a fully functional site that does not validate - in fact some here probably help write them ;)

Run a Google search for "IE event transparency"

ahh, now that possibly makes the question entirely different if you'd said that then the answer might not have been as simple as z-index. (though that I don't actually know yet, am only surmising)

In hind site, I guess it's not a CSS question per se. I posted this, because I thought this issue would be interesting to some of you. I just didn't expect to get ambushed by the Web Standards Evangelists.

On the surface it does sound like a CSS issue, and yes is possibly interesting - but just remember we can't work without the full facts. Standards Evangelist or Specification Realist labels aside, any answer will stem from the fact that it depends on how any particular browser implements a particular specification.

The early CSS hackers HAD to know their 'standards' inside out in order to even invent hacks, much the same as any language I expect, so please give a little respect to the folks that take their time to try and help and don't throw 'labels' around, please :) - You just might need the 'evangelists' if you want a hack..

If you can give us the full example (if it's different from the OP) then perhaps we can find you the best way to get it work, for you

Suzy

[edited by: SuzyUK at 1:10 pm (utc) on Dec. 15, 2007]

SuzyUK

4:21 pm on Dec 15, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



OK had a look around now and find it's been reported as a bug [bugzilla.mozilla.org], in Mozilla

whether or not it should actually be classed as a bug seems open to debate - the entire issue appears to have other repercussions. e.g. how would the :hover pseudo class, when applied to the AP div, then be treated? - but that is no help to you and way outside the scope of this question and up to the mozilla developers to figure out!

----

I ran a couple of tests and found that IE and Opera cope with a simple case but the if you try to apply a

:hover
event to the AP div then only Opera gives the likely desired result - while this is of no help to you it does show that even IE is not quite treating the scenario 'properly' either although it's enough for your needs

I still have not found any solution without using z-index, which is not surprising as the whole issue is based on Stacking Contexts [w3.org] - can you clarify why it is you can't use z-index on the link?

I have been able to find a solution which avoids using z-index on the link but involves specifying a negative z-index on the AP div and a z-index on an existing containing element - would that be an option you could use?

With the latter it is going to depend on the contents of the div whether this would be effective.. alternatively it seems that some use sniffing techniques and just don't show the AP div/effect to FF users..

Umbra

7:00 pm on Dec 15, 2007 (gmt 0)

10+ Year Member



How about Firefox's lack of support for inline-block? Or if not that, there must be some other examples of past/present/future Firefox bugs (I don't have an encyclopedic brain, so I can't cite more specifics right now).

And if I really needed to use inline-block, and someone hit me with the ultimatum that you don't hack Firefox, well, that's just unhelpful and I may just give up instead of finding some workaround (like using a -moz class)

Especially when the statement is so curt and bereft of context ("you can't hack firefox" or "you shouldn't hack firefox"?) is it any wonder that someone coming from a different angle could misinterpret that statement?

Or are we getting caught up with the definition of "hack"? I did originally ask if there was a "workaround in Firefox, some sort of hack?" which is worded vaguely enough that I hope we're not arguing about semantics.

The way I see it, if it works out in the end as elegantly as possible, then who cares if you work with the most popular browser first and then try a workaround with Mozilla? And sometimes that may mean doing something non-standard like using a proprietary IE element (like colored scrollbars or whatever) because you like it and it makes sense to you, and THEN you look at the other minority browsers who just don't get the same level of attention until the day they get more market share.

(Back to the original issue, I don't know that I'm at liberty to discuss the exact concept here... if I can find another moment during this busy holiday time, will try to post a similar example later for discussion)

ratman7

7:34 pm on Dec 19, 2007 (gmt 0)

10+ Year Member



Umbra, the reason there aren't FF hacks is because Firefox follows the CSS specification more rigorously than IE in most instances. This is a generally accepted fact, not a statement about browser fanboyism or standards evangelism.