CSS help (background images and nav links)

November 17th, 2005, 10:25 am

Ok so I have been wrestling with this all day and can't figure out why the hover effect on the nav works fine in Firefox but as soon as I take it into IE6 it doesn't display the correct height for the hovered background image.

I realise IE sucks for webstandards, but there are usually work arounds for such things.

Any ideas, anyone, Bueller?

http://www.pixelghetto.com/area51/

I am fairly new to the whole CSS design thing, being from the old school of tables and image slicing.

November 17th, 2005, 11:38 am

Change the navigation section of your css to something like this:

Code: [ Download ] [ Select ]

#navigation {
    background-image: url(nav.jpg);
    height: 34px;
    padding-top: 18px;
    }

#navigation ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

#navigation li {
    height: 34px;
    display: inline
    }

#navigation li a{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: small;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    padding: 16px; height: 34px
    }

#navigation li a:hover {
    color:#ffffff;
    background: #99cc33 url(nav-on-bg.jpg) repeat-x
    }

#navigation li a:active {
    color:#000000;
    }

1. #navigation {
2.     background-image: url(nav.jpg);
3.     height: 34px;
4.     padding-top: 18px;
5.     }
7. #navigation ul {
8.     list-style-type: none;
9.     padding: 0;
10.     margin: 0;
11.     }
13. #navigation li {
14.     height: 34px;
15.     display: inline
16.     }
18. #navigation li a{
19.     font-family: Verdana, Arial, Helvetica, sans-serif;
20.     font-size: small;
21.     font-weight: bold;
22.     color: #ffffff;
23.     text-decoration: none;
24.     padding: 16px; height: 34px
25.     }
27. #navigation li a:hover {
28.     color:#ffffff;
29.     background: #99cc33 url(nav-on-bg.jpg) repeat-x
30.     }
32. #navigation li a:active {
33.     color:#000000;
34.     }

I made numerous changes ... too many to list in a explanation type thing.

I think that's it ... if not, don't hesitate to get back in touch.

November 17th, 2005, 12:14 pm

Thanks mate, worked a treat! Cheers kidda!