Bridget Morison

Hi there Mark,

First of all I'd like to thank you for a really amazing site and for providing 
so many resources to people from one end of the experience spectrum to the 
other.  I spent weeks trying to find a decent collapsible menu and not only did 
I find it here, but I also found a lot more - so BIG thanks from me!

Right.  And now to the problem. ;-)

Here's a snapshot I took so you can see:
[attached]

In Opera 9 (Mac 9.10, 9.20 and 9.21 Mac and Win) parts of the buttons are being 
left behind or are ghosting.  This happens on both the Mac and Windows (XP).   
It doesn't do it for Opera 7 on Mac though.

I've tested in IE 6+, FF (mac and Win), Safari, Camino and all browsers display 
the images correctly.  The CSS and XHTML are all valid.  There's nothing 
terribly remarkable or different with the CSS - in fact it's very similar to 
what you have on your demo page, I just changed the colours, margins, padding 
and to seat it in a left nav div on the site I've done.

#navigation {
display: inline;
    float: left;
    width: 180px;
    margin-top: 0;
    background-color: #72a29f;
    padding: 0;
    margin-left:-180px;
    position:relative;
    left:-2px;
    top:-1px;
z-index:999;
}
#odo {
margin-top: 80px;
width: 160px;
background-color: #72a29f;
margin-left: 5px;
}
a img {border:0;
padding: 0;
vertical-align:bottom;
}


Any help would be appreciated.  It's not a huge issue but it would definitely be 
nicer if it didn't do it.


Thanks again,
Bridget

> Interesting. This is a redraw bug. It is triggered when an image is wider
> than its parent, and has vertical-align:bottom, and the image is moved.

Right.  I had tried removing the vertical-align but the behaviour continued.

> 1. Remove the vertical-align:bottom style - I assume you put that in there
> for a reason though, so I doubt that is an option.
>
> 2. The "right" fix; you have made the images wider than their parents, so
> they are overflowing at least one element. This may be a result of some of
> the other styles you are using, but without seeing your actual page, I
> cannot say for certain which one. Try making #odo a little wider, for
> example.

I  had the vertical-align included as in Opera the hover and samePage colour
was showing through between the buttons and the vertical-align fixed that
problem.

The buttons are 160px wide and so is odo but increasing odo to 163px wide
fixes the redraw problem and there's no ill effect (ie IE) for any of the
other browsers.
[Ed. The width of the parent needs to be as big as the images, _plus_ the
width of any margins, paddings, borders, etc.]


Thanks very much!!

Kind regards,
Bridget

> The buttons are 160px wide and so is odo but increasing odo to 163px wide
> fixes the redraw problem and there's no ill effect (ie IE) for any of the
> other browsers.

I spoke too soon - IE 6 doesn't like it but I think that just needs a bit of
IE 6 specific tweaking ... or I need to review the whole code for the menu items.
[Ed. probably the page is in quirks mode, but without seeing it, I cannot say]

Thanks again,
Bridget