SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: CSS pop-map issue IE6
-
Oct 29, 2007, 09:24 #1
- 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
-
Oct 29, 2007, 12:31 #2
- 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}
-
Oct 30, 2007, 06:35 #3
- 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; }
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>
I though maybe IE6 was showing the popups behind something, but z-index doesn't show any change either.
Any ideas?
-
Oct 30, 2007, 07:51 #4
- 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}
-
Oct 30, 2007, 07:59 #5
- 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%} a:hover{visibility:visible}
-
Oct 30, 2007, 08:36 #6
- 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?
-
Oct 30, 2007, 08:46 #7
- 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?
-
Oct 30, 2007, 08:54 #8
- 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?.
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?
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
-
Oct 30, 2007, 09:08 #9
- 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?
Originally Posted by Paul
Originally Posted by Paul
Thanks again. You've just prevented another steaming pile of Javascript from existing in the world. : )
-
Oct 30, 2007, 09:47 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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?
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