CSS Help

Basq

Hello all,

Bit of a CSS problem here.

Go here - the menu (under the slideshow) with Home, About Us, Property Listings (etc) is acting a bit troublesome and unpredictable.

If you highlight over it, it appears white (i.e the button disappears) but it seems to correct itself in time (when the onhover image is loaded I assume), CSS for it below:

#navigation {padding:8px 0;}
#navigation ul {margin:0 auto; padding:10px 0; list-style:none; display:table; white-space:nowrap; list-style:none; height:35px; position:relative; font-size:85%;}
#navigation li {display:table-cell; margin:0; padding:0;}
#navigation li a {display:block; float:left; height:45px; line-height:30px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor: pointer; background:url(../images/pro_six_0a.gif) no-repeat;}
#navigation li a b {float:left; display:block; padding:0 25px 5px 15px; background:url(../images/pro_six_0b.gif) no-repeat right top;}
#navigation li.current a {color:#fff; background:url(../images/pro_six_2a.gif) no-repeat;}
#navigation li.current a b {background:url(../images/pro_six_2b.gif) no-repeat right top;}
#navigation li a:hover {color:#fff; background: url(../images/pro_six_1a.gif) no-repeat;}
#navigation li a:hover b {background:url(../images/pro_six_1b.gif) no-repeat right top;}
#navigation li.current a:hover {color:#fff; background: url(../images/pro_six_2a.gif) no-repeat;}
#navigation li.current a:hover b {background:url(../images/pro_six_2b.gif) no-repeat right top;}

Was playing around with it so much (as it had an cascading effect in Internet Explorer that I have sinced fixed) that the CSS has me befuddled.

Any suggestions are appreciated?

Goodshape

You want to get rid of the delay (where it turns to white)?

The delay is caused by the loading of the second image when the user hovers over the menu item.

You can create the same roll-over effect using only one image and the 'background-position' attribute which will eliminate the delay.

See here for an example : http://www.citrikacid.com/index.php/2007/04/03/easy-css-rollover-buttons/

Basq

Perfect Goodshape.

Will give this a shot. Much appreciated mate.

daymobrew

Combine the background image pairs - sliding door technique.

Combined pro_six_1b.gif and pro_six_2b.gif into one and pro_six_1a.gif and pro_six_2a.gif into another.

Basq

daymobrew wrote: »

Combine the background image pairs - sliding door technique.

Combined pro_six_1b.gif and pro_six_2b.gif into one and pro_six_1a.gif and pro_six_2a.gif into another.

Cheers. Will give it a go.. in work now so don't really have a chance. Will let ye know how it works out.

EDIT: Could be wrong but I think the reasoning behind having both the b and a images is that the menu icons can be variable lengths.. as opposed to a fix length. If you merged them, the buttons would appear at a fixed length, right?

daymobrew

basquille wrote: »

EDIT: Could be wrong but I think the reasoning behind having both the b and a images is that the menu icons can be variable lengths.. as opposed to a fix length. If you merged them, the buttons would appear at a fixed length, right?

The example I linked to uses images that are left aligned, while you'll want the wider images to be right aligned. It should be possible.

Goodshape

or merge them vertically, rather than horizontally, and do background-position : left top and :hover background-position : left bottom

Your menu items seem to have the same height throught.

daymobrew

Goodshape wrote: »

or merge them vertically, rather than horizontally, and do background-position : left top and :hover background-position : left bottom

Agreed. I wasn't thinking straight when I mentioned joining the images horizontally.