Bill Sagert

Bill,

> I use pure CSS popups for article excerpts, which work fine in IE and
> Firefox, but not in Opera 9.01

Ouch. That's an ugly little bug. It actually does not relate to z-index at
all. Opera just forgets to draw the complete positioned element. The reason
is that it is a child of a relatively positioned inline element. I could not
find a way to force it to draw it while leaving it as an inline element.

If you make it a block element, it will work. However, that then makes it
look different. Ok, so if you also float it, it looks almost exactly the
same as it does with your current style, but it also makes it block display
(since block display is implied by floats).

So the fix is this (you might want to add a left or right margin to make it
spaced correctly):
.pop {
  float: left;
}

Now of course, that will be applied to all browsers, not just Opera, but  it
looks the same in all of them, so it should not hurt.

The popups do not stay open in Opera like they do in the other browsers when
you release the mouse button though. This is because Opera correctly treats
active as being while the mouse button is pressed down, and :focus is only
actvated when some text is selected. This should not matter too much, they
can keep their mouse down if they want to read it (the only options here
would be either a :hover effect, or to use a script - I did try using
onmousedown="this.focus()" but I had some trouble getting it to hide again
;) ).

I am preparing testcases to report these bugs to Opera.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

Bill,

> However, there is a strange behaviour in IE6
> ...
> If you can spot any obvious mistake I have made

The first and most important fault is expecting CSS to work reliably in a
browser that was released 8 years ago. IE 6 is well known to be the worst
browser at CSS of all those that are currently in common use. It's already
been replaced 3 years ago by one major upgrade (IE 7), and is just about to
be replaced by yet another (IE 8), which has finally gained proper CSS 2
support. Users of that broken old browser should be expected to update, and
not have Web pages constantly broken to suit them. Best recommendation; drop
IE 6.

In particular, IE 6 has numerous hideous and bizzare problems with CSS
floats. Your page fails because of this. What happens is; a relatively
positioned block, containing an absolutely positioned block that is not
displayed, containing a regular block, containing a right float. Two inline
links follow the relatively positioned block. However wide the float was,
that much of the first inline link will be covered by the second inline
link; even though visibly, the second link is in the right place, it
responds to the mouse as if it were in the wrong place. I set up a demo
here:

http://www.howtocreate.co.uk/ieBugs/floatinlinelink.html

The second mistake you have made is using quite poor HTML. Sure, it
validates, but it's nonsense (the validator only checks if it is allowed,
not if it makes sense). This, for example, is not good markup:

<a ...>&nbsp;&raquo;&nbsp;</a>&nbsp;&nbsp;&nbsp;<a ...>some text</a><br>
<div class="pop">...</div>
<a ...>&nbsp;&raquo;&nbsp;</a>&nbsp;&nbsp;&nbsp;<a ...>some text</a><br>
<div class="pop">...</div>

You're using &nbsp; instead of using CSS to add padding and margins. That
alone is messy. You are using inline <a> elements, without a proper parent
element like a paragraph, as siblings of block elements, using <br> to add
linebreaks. In a non-visual medium, this makes no sense at all. What you
should be using is some markup which groups the items semantically. When you
display them, you want them to look like a list, so you should be putting
them in a list. The good news is that this also has the unexpected side
effect of fixing it in IE 6, by giving the inline links some block to be a
child of:

<ul>
  <li>
    <a ...>&raquo;</a> <a ...>some text</a>
    <div class="pop">...</div>
  </li>
  <li>
    <a ...>&raquo;</a> <a ...>some text</a>
    <div class="pop">...</div>
  </li>
  ...
</ul>

Of course, I still also recommend dropping IE 6 completely - don't actively
block it, just let it attempt to render whatever you have used for proper
browsers, and ignore it if it fails to get it perfect. You will find so much
more freedom when using CSS, if you don't have to cater to such an out of
date and (to be honest) pathetic excuse for a browser.