PDA

View Full Version : CSS Horizontal Hover Menu



AndySpeed
07-11-2006, 11:56 AM
I'm trying to implement this (http://www.dynamicdrive.com/dynamicindex1/hover.htm) on my site as follows:

www.btccaction.co.uk

Is it possible to change the properties of individual buttons? So, for example, I intentd the 'News' button on the far right to highlight as 'yellow with black text'. Currently, if you view the page in Firefox this is fine but not in IE (and I really need both to show up as intended).

Additionally having a few issues with hover text changing once a page is visited. Should highlight as 'yellow cell with black text' but does not, the text is staying white.

Also the menu in IE is not centred like Firefox, this is a div issue so can be sorted.

Here are the properties I am using:


.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: white;
background-color: #e90d0d;
border: 2px solid #e90d0d;
}

.hovermenu ul li a:hover{
background-color: #FFDE01;
border-style: outset;
text-decoration: none;
color: black;
visited: black;
}

.hovermenu ul li a:visited{
hover-color:black;
}

.hovermenu ul li a:visited{
text-decoration: none;
color: white;
}

.hovermenu ul li il a:visited{
text-decoration: none;
color: black;
}

.hovermenu ul li il a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFDE01;
border: 2px solid #EF502B;
border-style: outset;
}

Regards,

Andy

p.S. I included a new section ( il ) to allow for the button on the right to be different. Is this not possible in IE for some reason?

AndySpeed
07-11-2006, 03:07 PM
After some more fine tuning, I have an issue.

If www.btccaction.co.uk is loaded in Firefox, everything with the menu is OK, positioned in the centre.

If, however, it is loaded up in IE, it is offset and at the top of the page.

If I manage to centre the menus in IE, they are out of place in Firefox. And therefore vice versa.

If I could create a <div> that was only read by internet explorer, I'm sure things could work out. But to be honest I'm a little confused - is it possible to locate these menus in the same place no matter what browser? Maybe someone has a better technique!

Must be possible --> Example menus are in the same place regardless of browser here:

http://www.dynamicdrive.com/dynamicindex1/hover.htm

Hmmmmmmmmmmmmmmmmm