Forum Moderators: not2easy
However, now that I think about it, perhaps you could just specify display: block; height: XXpx; width: XXpx; specified to the same size as the menu boxes for ".menu a:hover" specifically, & give each menu item the class "menu"... perhaps since Netscape 4.x doesn't properly understand pseudo-classes like :hover, it would ignore the whole thing...
I've used this solution: where the menu URL text is contained in a table cell, and the td id="td1" bgColor="#ccffcc".
Then use this code in the link:
<a href="the_page.htm" OnMouseover="td1.bgColor='#ccccff'" OnMouseout="td1.bgColor='#ccffcc'">Menu Link</a>
It works in IEx and is ignored in N4x...
Should be:
<a href="the_page.htm" OnMouseover="td1.bgColor='#ccccff';" OnMouseout="td1.bgColor='#ccffcc';">Menu Link</a>
[pre]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#menu {
width: 200px;
}
#menu a {
display: block;
padding: .5em;
margin-bottom: 1em;
border: 2px solid #000000;
color: #000000;
font: bold 1em arial, verdana;
text-align: center;
}
#menu a:hover {
background-color: #000000;
color: #FFFFFF;
}
</style>
<title>Menu Hover Boxes</title>
</head>
<body>
<div id="menu">
<a href="#">Some link</a>
<a href="#">Another link</a>
<a href="#">Dull isn't it?</a>
</div> </body>
</html>
[/pre]
Neat huh? Or is that not what you meant?
<added>You could also make the menu div a percentage. Won't matter...</added>
Nick
Nice - but doesn't seem degradeable in NN4.77...(although it's finally solved my Opera5 problem!)
Nick
I now use CSS menus on all my sites they are dead simple and load really quickly.
Is that on IE5.0?
AFAIK it works on 5.5, 6, Opera 5+ 6+ and Netcape 6/7 of course...
I always settled for the 'only when over text' effect but your addition is a neat tip ;)
Nick
a=#aaaaaa example
b=#bbbbbb example
function x (obj,pv){obj.style.backgroundColor=pv;}
these go in the table or each cell:
onmouseover="x(this,a);" onmouseout="x(this,b);"
That looks a delightfully simple solution, can you please flesh it out a little and make it into a functional example - I have tried, but it won't go for me.... :-)
Rhys
<html>
<head>
<style type="text/css">
td.x {background-color: lightblue;text-align : center ;border-style: solid;border-color: #800080;}
td.s {background-color: lightblue;text-align : center;}
</style>
</head>
<body>
<script>
function x(obj,pv){obj.style.backgroundColor=pv;}
a='#FF99FF'
b='lightblue'
</script>
<table style="BACKGROUND-COLOR: #3366ff" cellSpacing="3"
width="726" border="1" onmouseover="x(this,'blue');" onmouseout="x(this,'#3366ff');">
<tr><td class="s" onmouseover="x(this,a);" style="BACKGROUND-COLOR: lightblue"
onmouseout="x(this,b);" borderColor="#00ffff" width="132">
hi there
</td></tr></table>
</body></html>
and you can apply this for each cell in table apart too, very nice i use it 3 months now.
At least this solution will degrade in N4, even if the effect doesn't work.
:)
Add to .menu a the line 'width: 100%'. Currently the box will only highlight if the mouse is over the text, this change will mean that the when the mouse moves into the box that the box will be highlighted.
IIRC, you can also fix this in IE by giving the element a position (like position: relative;). That way you won't run into problems if you are using borders or padding.
but then it becomes a javascript link, Search engines won't follow, and you must remove the normal link, or it opens 2 windows if you click on the link itself.
Is there is a way to make it so that no matter where you click in the table cell, you are automatically taken to the link embedded inside that cell? I remember seeing a CSS example on WW but can't find it now.
yes... the easy way is:
.clickcell a, .clickcell a:link, .clickcell a:visited {
display: block;
width: 100%;
}
then do a class call within the TR or TD: class="clickcell"
works best on lists of links or menus and not on inline links.
I had found a way for the whole cel clickabe links.
The way i was doong it, i was targetting the onclick and a href to the same target window, so 1 window gets opened in stead of 2 if you click on the link itself.
