Can anybody reccomend a good Horizontal CSS rollover menu (Clean!) tutorial

DJMK4

DJMK4

DJMK4

Soldato
Joined
1 Dec 2004
Posts
23,075
Location
S.Wales
Im looking for a guide on creating a good clean menu navigation (rollover effect) using CSS. If possible i dont want no bodgy hacks in there it must work purely with good browser support.

Thanks
 
I made my own from scratch, although im having a few problems it displaying differently in IE7.

Here is the link...


if you open it up in firefox, you will see how it is supposed to be layed out, now open it up in IE7, how comes the ul>li is not displaying with the correct margins?

below is my css code


Code: 
#nav ul {
        width: 100%;
        margin: 0px auto;
        padding: 0px auto;
        text-align: center;
}

#nav li {
        border-left: 1px solid #8e8e8e;
        border-right: 1px solid #8e8e8e;
        display: inline;
        list-style-type: none;
}       

#nav ul li a{
        color: #000000;
        text-decoration: none;
        font-family: Arial, Verdana, Sans-Serif;
        font-size: 0.8em;
        padding: 2px 20px 0px 20px;
}
 
Last edited:
Butters said:
:rolleyes:

IE7 is fully compliant with CSS. IE6 however, isnt. It will handle roll overs like above but will blow you out when you try drop down menus, etc.

http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

Also, try and keep the site validated as you go. Its got a lot of errors already, and doing it as you go makes life a lot easier.

For instance, you are missing info in your < img > tags, and you are also using '&' instead of the correct HTML code #amp;.

http://validator.w3.org/
Click to expand...



Ill get my page validated and see if that sorts any issues out. Im going to have another go at trying to fix the correct margins in IE7 later aswel.
 
There, page and css have both been validated.

Can anybody give me any suggestions on what to do about the IE7 bug?
 
You must log in or register to reply here.
Back
Top Bottom