SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)

    CSS pop-map issue IE6

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:
    Code:
    a:hover {visibility:visible}
    If that doesn't solve it I'll look properly when I come back later

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    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:
    Code:
    <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?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't added the code I gave you.

    Code:
    a:hover{visibility:visible}
    Adding this makes the pop up work in that snippet of code you gave me.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    * html label a {height:1&#37;}
    a:hover{visibility:visible}

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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?

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    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&#37; 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

  9. #9
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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?

    Quote Originally Posted by Paul
    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 : )

    Quote Originally Posted by Paul
    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. : )

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    height:1&#37; 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


Bookmarks

Posting Permissions

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