CSS pop-map issue IE6

[Stomme poes]

Hallo all,

I've replaced a nasty Javascript with CSS from Mike Cherim's popup page http://mikecherim.com/experiments/css_map_pop.php and surprise, it doesn't work in IE6 when I do it. However, my html and css are different enough that I can't see where he's got something IE6 needs. If this is a common problem, all I need is the name so I can find it in the stickies.

My code is at http://stommepoes.jobva.nl/Pizzaatje/invoeren.html and css is the same path but pizza.css

I have widths and positions, so I don't think it's haslayout. I found IE7 and Konqueror have a different idea of where the negative margin should begin, so I added left and top coords. IE6 sees the anchor at least; I get a little pointer hand. But I wonder if it has to do with where the text span is hiding before the hover? (-5000 px left and top like Mike did).

In any case, I'm pretty sure this can still work in IE6 because otherwise it's back to the Javascript which I really think is poorly written. (you can see the intended effect with Js at http://www.pizzaatje.nl/invoeren.php along with icky code I'm replacing).

Anyone know which IE issue this is? Oprah, FF, Konq and IE7 do it well. Can't test Saffy but I'm not worried about it yet.

Thx
Poes

[Paul O'B]

HI,

I 'm just on my way out so I haven't looked at your page but the usual fix for pop ups not showing in IE is simply this:

a:hover {visibility:visible}

If that doesn't solve it I'll look properly when I come back later

[Stomme poes]

I've stuck that in both hovers (there are two spans, one which is moved around and another inside with the pop-up text) and still no go but I have another idea. This is all happening in a float.

I thought of this because I've been seeing things about clears and floats and things being funny in IE6. I could not in any browser use a clearing element to clear a float that I have inside a float. I ended up with overflow: hidden since :auto gave me scrollbars in FF. So I already know there could be something goofy I'm doing here.

The most relevant CSS:

label a {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
}

label a span.verbergen { 
  position: absolute;
  margin: -5000px 0 0 -5000px; 
}

label a:hover span.verbergen, label a:focus span.verbergen, label a:active span.verbergen {
  background-color: #ffde02;
  border: 1px solid #000;
  display: block;
  visibility: visible;
  width: 190px;
  height: auto;
  color: #000;
  font: bold .9em/1em Georgia, "Times New Roman", serif;
  text-decoration: none;
  left: 0;
  top: 0;
  margin-left: -190px;
  margin-top: 0;
}

label a:hover span.verbergen span, label a:focus span.verbergen span, label a:active span.verbergen span {
  display: block;
  visibility: visible;
  width: 180px;
  padding: 5px;
  text-align: center;
}

The HTML:

<div>
      <label for="naam"><a href="#formblok"><span class="verbergen"><span>Vul de volledige naam in.<br />Voorbeeld: Het Blauwe Paard</span></span>Naam restaurant:</a></label>
      <input type="text" name="naam" id ="naam" maxlength="80" size="30" value="" />
    </div>
    <div>
    <label for="postcode"><a href="#formblok"><span class="verbergen"><span>Voorbeeld: 1234 AG</span></span>Postcode:</a></label>
      <input type="text" name="postcode" id="postcode" maxlength="6" size="30" value="" />
  </div>
  <div>
      <label for="adres">Adres:</label>
      <input type="text" name="adres" id="adres" maxlength="80" size="30" value="" />
  </div>
  <div>
    <label for="plaats">Plaats:</label>
      <input type="text" name="plaats" id="plaats" maxlength="80" size="30" value="" />
  </div>
  <div>
    <label for="telefoon"><a href="#formblok"><span class="verbergen"><span>Voorbeeld: 0184-123456</span></span>Telefoon:</a></label>
      <input type="text" name="telefoon" id="telefoon" maxlength="11" size="30" value="" />
  </div>
  <div>
    <label for="website"><a href="#formblok"><span class="verbergen"><span>Vul de website in zonder http:// <br />Voorbeeld: www.pizzaatje.nl</span></span>Website:</a></label>
      <input type="text" name="website" id="website" maxlength="80" size="30" value="" />
  </div>
  <div>
    <label for="email"><a href="#formblok"><span class="verbergen"><span>Voorbeeld: iemand@ergens.net</span></span>Email:</a></label>
      <input type="text" name="email" id="email" maxlength="80" size="30" value="" />
  </div>

The labels are in a form, and the form is in a div called #formblok (for positioning reasons). #formblok is floated inside #inhoud which holds everything after the header (if I don't float #formblok, I lose continuity of my side borders). The labels themselves are also floated as this seemed the easiest positioning method.

I though maybe IE6 was showing the popups behind something, but z-index doesn't show any change either.

Any ideas?

[Paul O'B]

Hi,

You haven't added the code I gave you.

a:hover{visibility:visible}

Adding this makes the pop up work in that snippet of code you gave me.

[Paul O'B]

It also fixes it in your page as I have copied it locally and tested it now

IE does need to have "layout" forced on the element to make sure the positioning is correct though.

This is the exact code you should be using:

* html label a {height:1%}
a:hover{visibility:visible}

[Stomme poes]

Sorry Paul, I thought you meant add visibility:visible to the hover, which I did. You meant have another a:hover with only visibility:visible listed?

Ah no, it needed to be on the label! Since I've made the label display:block (I forget why now, as it's already floated anyway), I could just put the height : 1% without the Holly hack, right? As I've set a line-height that overrides it?

[Stomme poes]

Yup. I can get away with this:
label a {
position: relative;
display: block;
text-decoration: none;
color: #fff;
height: 1%; /*IE */
}

label a:hover {
visibility: visible; /*IE*/
}

Thanks much. Now I want/need to know, is this a BUG or is it one of those rare things where IE is doing the right thing by demanding visibility:visible and the rest of the browsers are ignoring it because they can?

[Paul O'B]

You meant have another a:hover with only visibility:visible listed?

yes you originally applied the code I gave you to a span (i.e. .... a:hover span {visibility:visible}) which wasn't what I told you to do .

IE won't action any change on the span unless something else is addressed on the anchor hover state also. This could be something like changing the background color on hover for the anchor (not the span) but that of course would have a visual effect. Just setting the visibility to visible fixes the bug without affecting any of the anchors appearance (unless it was hidden of course but then you wouldn't see it to hover anyway )

I suggested just using a:hover{visibility:visible} because this would fix all issues of this bug in your page wherever you decided to use it. If you made it specific e.g.label a:hover{visibility:visible}, then you would still get a problem if you used the technique elsewhere on your site.

Since I've made the label display:block (I forget why now, as it's already floated anyway), I could just put the height : 1% without the Holly hack, right? As I've set a line-height that overrides it?

You are a little confused there

The holly hack is the height:1% which is given to IE using the star selector hack (* html) because other browsers must not get the height:1% or you will see nothing as 1% is very small (or content will overflow the element and may upset the flow of the following elements).

In my code above the height:1% hack is applied to the anchor because that is what you are using as a stacking context and although you may have set the anchor to display:block it does not give the element "haslayout" (see the faq on haslayout). When "haslayout" is applied IE gets the positioning correct for your span pop up.

line-height does not force "layout on the element and doesn't enter in the equation at all.

Hope that explains it better

[Stomme poes]

I didn't think that line-height gave "layout" for something, but that it set the size of the space for my text and thus made my "content" bigger than 1% (so height:1% would be okay sitting in open code).

I haven't used the *html when applying height:1% for haslayout because I always had stuff (content) inside which would of course override that and be the same height as before. So now I wonder if somewhere in the future I'll see flow problems?

IE won't action any change on the span unless something else is addressed on the anchor hover state also. This could be something like changing the background color on hover for the anchor...

Aha, which tells me why I didn't have this problem before... I often have the text change to bold also on hover, which must have taken care of it without me knowing : )

I suggested just using a:hover{visibility:visible} because this would fix all issues of this bug in your page wherever you decided to use it. If you made it specific e.g.label a:hover{visibility:visible}, then you would still get a problem if you used the technique elsewhere on your site.

I suppose I should get in the habit of declaring globals but I never do. I just don't have a{ stuff;} at the top because I like to wait to see what I want where and I keep in mind that in the future another anchor may come along with different properties, so almost all my anchor code is something like "#menu li a" instead of just a. This probably makes me write more code than necessary but it helps me know exactly where it's doing whatever (I am easily lost).

Thanks again. You've just prevented another steaming pile of Javascript from existing in the world. : )

[Paul O'B]

height:1% for haslayout because I always had stuff (content) inside which would of course override that and be the same height as before. So now I wonder if somewhere in the future I'll see flow problems?

Yes you've probably been lucky so far but when you set the element to a height then browsers (apart from IE6 and under) will honor that height. If your main page div had a height of 1% then any content that was over 1% in height would cease to exist as far as the browser was concerned. The content would just spill out over whatever followed next in the page.

Background's would be invisible because there would be no background into which they could be painted. You would see the foreground content because the default for overflow is visible which means the content just spills out and overlaps whatever is in the way.

IE treats height as a minimum and expands the parent to accommodate which is why the hack works for ie only and should not be given to other browsers.

Setting a line-height of 1% is neither useful or necessary and means you are doing something wrong if you think that it is solving something. For the most part CSS is quite logical and if you do things correctly then things start working a lot better