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

DJMK4

DJMK4

DJMK4

Soldato
Joined
1 Dec 2004
Posts
23,377
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:
reason being is IE sucks, un-compliant piece of turd. Wish i could help you though, ive only just got into the whole CSS thing hence my hatred for IE and its horrible compliance with standards.

Seems to be a problem with the borders though, spacing is correct but the borders are not positioned correctly. the left and right border are togeather instead of on the left/right side of the cell.
 
Last edited:
MadMossy said:
reason being is IE sucks, un-compliant piece of turd. Wish i could help you though, ive only just got into the whole CSS thing hence my hatred for IE and its horrible compliance with standards.

Seems to be a problem with the borders though, spacing is correct but the borders are not positioned correctly. the left and right border are togeather instead of on the left/right side of the cell.
Click to expand...

: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/
 
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?
 
Some browser hacks are compliant.

Eg.

This CSS file will set the padding to the div id content, 50 for most browsers, 10 for IE6 and 7.

CSS File....

#content {
padding: 50px;
}

/* IE7 Hack */
*:first-child+html #content {
padding: 10px;
}
/* IE6 Hack */
* html #content {
padding: 10px;
}

And IE7 is NOT fully CSS compliant!
 
You must log in or register to reply here.
Back
Top Bottom