positioning puzzle

Discussion in 'HTML Development' started by JohnC, May 18, 2006.

  1. BurningSnowman Moderator

    Yes, I'm afraid. I just ran a test with a <div>. I'll try and find out what's wrong with your page in it later.

    Good work with the layout. :)
  2. JohnC < ? />

    Oh dear, a bit disappointing as I was hoping to use that on my commercial site eventually to add popup descriptions of restaurant menu items, dropdown navigation menus etc.

    Of course the preferred behaviour for a browser that didn't support :hover would be to do nothing- no popups, rather than permanent popups (Degrade Gracefully- my current Life Goal ;) ). However if Konqueror does support it then maybe something can be changed in the code to make it work.

    Any ideas would be most welcome indeed; if this can be made to work on most browsers other people might be interested as it's a very easy technique to use.

    Meanwhile in case it saves you any time here's the code for the band members' photo & popups:
    <div id="members"><img src="" width="723" height="60" etc>
      <div id="jo"><span>("John" in Japanese)</span></div>
      <div id="ma"><span>?????<br><a href="members.html#maruichi">???????</a></span></div>
      <div id="te"><span>??</span></div>
      <div id="is"><span>??</span></div>
      <div id="ru"><span>???</span></div>
      <div id="da"><span>????</span></div>
    #members{position:relative;width:723px; height:60px;}
    #members div{background-position:-100px;background-repeat:no-repeat;
    #jo {background:url(john.jpg);left:5px;}
    #ma {background:url(maruichi.jpg);left:130px;}
    #te {background:url(tero.jpg);left:245px;}
    #is {background:url(ishimaru.jpg);left:365px;}
    #ru {background:url(ruben.jpg);right:140px;}
    #da {background:url(daion.jpg);right:20px;}
    /* all these background images are 100x133px */
    #members div:hover{background-position:0;}
    /* following line now on d8.css for early browsers
    #members div span {display:none;} */
    #members div:hover span {display:block;position:absolute;left:45px;top:110px;
    	background:#fff;padding:0.3em;border:solid 1px;width:80px;font-size:0.8em;}
    btw, does Konqueror do the rollover image changes on ImpellGD's site here OK?
    (b&w changes to colour)
    It's the same shift-background-image technique I think, but with a link in this case.
  3. BurningSnowman Moderator

    Yep, it does. Which does at least suggest that your version can be fixed.
    Sorry, I can't test seriously right now, but I'm not entirely clear from a glance how the big image rollovers are meant to be hidden to begin with? Does a background position move the backgrounds to an invisible area outside the elements they're backgrounding, or something?

    Also, the text box type rollovers do work in Konqueror, when you hover over one of the (permanently visible) larger images. But the very right hand sides of those rollovers are obscured by the next larger, permanently visible, image. Seems the big images are getting 'preference' in rendering. The z-index property is probably a long shot (not knowing how the visibility change is meant to work), but might be relevant.
  4. JohnC < ? />

    There are little image-sized divs sprinkled (absolutely positioned) over the big members photo, so they can be hovered over. They each have a larger pic of a member as a background image (100x133px) but hidden (I thought :eek:) with:
    #members div{background-position:-100px;}
    then when hovered:
    #members div:hover{background-position:0;}
    The span with the text in is normally hidden with:
    #members div span {display:none;}
    but appears on hover with:
    #members div:hover span {display:block;position:absolute;left:45px;top:110px;
    background:#fff;padding:0.3em;border:solid 1px;width:80px;font-size:0.8em;}

    So the problem seems to be with the hiding of the background image.
    Perhaps I should be more explicit about what direction the "-100px" goes? (I thought it was horizontal by default)

    Another way could be another div inside the hovered one, same size but with the background-image permanently in place, z-indexed out of sight till the parent is hovered, or slewed way off to the left of the screen or something.

    I don't want to have those larger images in the html markup because they'd be displayed by non-css browsers, and the only way to put them in the css code is as a background-image I think?
  5. JohnC < ? />

    (I thought about starting a new thread for this but it's still css related and hopefully a small problem.)

    I've uploaded new pages for that popup image hover problem, with only the hover bit in, and all the css embedded at the top- no attached files (except images of course). The "if IE" conditional comment stuff is only seen by IE, but the problem now is Konqueror, and possibly Safari I have a suspicion.

    is the same code as before but I've cleaned it up a little bit adding a couple of spaces just before the opening curly brackets, just in case that was the problem.

    is the same again, but with vertical coordinates added for the background-position to see if that was the problem with Kr.

    If you have a moment BS (or anyone with Konqueror to hand) I'd appreciate a quick look.

    Also if anyone has a Safari... :)

    Many thanks.
  6. BurningSnowman Moderator

    Neither of those work (though it looks like both are trying a horizontal move?).
    I think Konqueror might be buggy. Possibly.

    I also think I've found a fix (CSS based, rather than altering the image as in that link), but I'm not too happy about it, because I don't understand what makes it work or what else it might break.

    Maybe Konqueror's not buggy but is doing something clever and vaguely related to CSS3 or something with the background-attachment property, because that seems to be the one. No other background settings successfully hid the backgrounds.

    The first oddity is that it doesn't want to move backgrounds horizontally outside the visible area of the div. Maybe it just won't hide backgrounds this way.

    Second oddity is that moving them vertically instead looked like it kind of worked, but the backgrounds seemed to be repeated (despite the no-repeat). They would begin n pixels down the background image and then start again at the top, making two half-backgrounds, but would always be visible in some form.

    The fix was to add this to #members div:
    background-attachment: fixed;
    and this to #members div:hover:
    background-attachment: scroll;
    I don't see why a background set up to scroll with an element that will not be scrolled anyway should be positioned any differently from one set up to stay fixed in the case of scrolling. It makes no sense, but hey, it works.

    You'll have to test to see if this breaks other browsers. Linux/Fx seemed okay.

    UAs that don't do fixed bg attachments are meant to just treat it like scroll anyway, so in theory this shouldn't kill other browsers, but it's a pretty strange tweak.
  7. JohnC < ? />

    With all the other messy stuff going on just now, thanks for your time here... :)
    Yes. I added the vertical coordinate "0" for completeness, just in case.
    Maybe so. There seems to be some relation between K. and Safari here, and if you google with Safari instead a lot of stuff about unwanted background repeating comes up.
    Well.. yes.
    It should do no harm in theory, but Opera 9.00 is a bit odd with it as it turns out.
    It puts up fragments of the first two images in the unhovered state. :confused:

    A few comments I found on the web:
    http://drupal.org/node/6400 (post #12 at the bottom)
    http://www.sitepoint.com/forums/showthread.php?t=409981 (new thread- waiting for a reply here)

    Anyway I've put up new versions of test-hover1 & 2.html, along with 3 to 6.

    1) set the offset to -50% as an experiment. If the background is being repeated there should be a complete background, split down the middle.

    2) tried a positive offset, instead of negative.

    3) put the no-repeat stuff ahead of the other code, thus:
    #members div {

    4) added the css3 values

    5) made the div a little bit bigger than the background image

    6) the BS tweak

    2) to 6) work in Fx1.5, IE6 and Opera9.00 except unfortunately for 6) on Opera.

    Be interested if any work in Konqeror, when you have a moment from helping people with these server troubles... ;)
  8. BurningSnowman Moderator

    Yes, there is.
    No move there, the hover images just show in full permanently, as with the original.
    As above. :(

    Aha! Bingo.
    I guess it doesn't think it's allowed to move backgrounds off-div in that way when the background isn't fixed or something. That one appears to work fully in Konqueror. :)
  9. JohnC < ? />

    That was really a stab in the dark, just based on something someone said in one of those postings or other...

    Thank you very much BS for sticking with this. :)

    Don't suppose anyone looking in has a Safari at hand to check if image pop-ups work OK in
    http://www.daihachiryodan.com/test-hover5.html ?
    I'll check with that Danvine site, but they seem to have a 2-3 day waiting list.
    Anyway, with Konqueror working, I feel optimistic...

Share This Page