...

View Full Version : Cell Hover in IE



Rain Lover
08-28-2010, 08:53 AM
Hi,

How can I change the following menu embed code so it works in IE as well as other major browsers?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<style type="text/css">
.tablemenu {
font-family: "Century Gothic";
font-size: 14px;
font-weight: bold;
font-style: normal;
text-align:center;
color: #FFFFFF;
background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png');
}
.overmenu{
cursor: pointer;
color: #FFFFFF;
}

#cell{background-image:url('../Images/MenuBckg.png'); background-repeat:repeat-x;}
#cell:hover{background-image:none; background-color:#999999;}
</style>
</head>
<body>

<table style="width: 900px; height: 50px" class="tablemenu">
<tr>
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com'" >Home</td>
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/profile'" >Perfil</td>
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/servicios'" >Servicios</td>
<td id="cell" class="overmenu" onclick="parent.location='http://blog.loquemasimporta.com'" >Blog</td>
<td id="cell" class="overmenu" onclick="parent.location='http://dir.mortellmarsol.com'" >Directorio</td>
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Chat</td>
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Programas</td>
<td id="cell" class="overmenu" onclick="parent.location='http://www.loquemasimporta.com/contact'" >Contacto</td>
</tr>
</table>


</body>
</html>


Thanks in advance!
Rain Lover

auslin
08-28-2010, 10:54 AM
All of those td tags have the same id of "cell". But each id has to be unique; they can't be shared like that.

Perhaps you mean to have "cell" as a class and apply it, plus the "overmenu" class, to each td. If so, just change your style declarations from #cell to .cell, and in each <td>, have it like this:


<td class="cell overmenu" ...

Rain Lover
08-28-2010, 07:08 PM
All of those td tags have the same id of "cell". But each id has to be unique; they can't be shared like that.

Perhaps you mean to have "cell" as a class and apply it, plus the "overmenu" class, to each td. If so, just change your style declarations from #cell to .cell, and in each <td>, have it like this:


<td class="cell overmenu" ...

Thanks for the answer! I tried the following code, but it still doesn't work in IE6:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<style type="text/css">
.tablemenu {
font-family: "Century Gothic";
font-size: 14px;
font-weight: bold;
font-style: normal;
text-align:center;
color: #FFFFFF;
background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png');
}
.overmenu{
cursor: pointer;
color: #FFFFFF;
}

.cell{background-image:url('../Images/MenuBckg.png'); background-repeat:repeat-x;}
.cell:hover{background-image:none; background-color:#999999;}
</style>
</head>
<body>

<table style="width: 900px; height: 50px" class="tablemenu">
<tr>
<td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com'" >Home</td>
<td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/profile'" >Perfil</td>
<td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/servicios'" >Servicios</td>
<td class="cell overmenu" onclick="parent.location='http://blog.loquemasimporta.com'" >Blog</td>
<td class="cell overmenu" onclick="parent.location='http://dir.mortellmarsol.com'" >Directorio</td>
<td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Chat</td>
<td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/home/tv'" >Programas</td>
<td class="cell overmenu" onclick="parent.location='http://www.loquemasimporta.com/contact'" >Contacto</td>
</tr>
</table>


</body>
</html>

met
08-28-2010, 08:30 PM
IE6 does not support the :hover psuedo class unless it's invoked on an "anchor"

so



.foo:hover { // } /* will not work in ie6 */

a.foo:hover { // } /* will work in ie6 */


there are various hacks with javascript

as it's a TD you can't realistically convert each cell to an anchor (well you could, but is it worth it?)

So you have the choice of

ignoring IE6 entirely

finding a javascript hack

using jquery ~

adjust the Bold parts for your own uses..probably "cell" as the selector and "overmenu" as the hover class.


$("td.cell").hover(
function () {
$(this).addClass("overmenu");
},
function () {
$(this).removeClass("overmenu");
}
);


jquerys quite elegant but again, do you really want to bother with it just for ie6

Rain Lover
08-29-2010, 09:47 AM
as it's a TD you can't realistically convert each cell to an anchor (well you could, but is it worth it?)

That's what I'd like to do, but I don't know how.

auslin
08-29-2010, 01:26 PM
You could put an anchor in each of the TDs, like this for the first one as an example:


<td onclick="parent.location='http://www.loquemasimporta.com'">
<a href="#" class="overmenu cell">Home</a>
</td>

If the 'hoverable' link then needs to occupy all of the parent (TD), try adding the following to the CSS:


td { height: 100%; }
td .cell { display: block; height: 100%; }

Rain Lover
08-29-2010, 08:02 PM
You could put an anchor in each of the TDs, like this for the first one as an example:


<td onclick="parent.location='http://www.loquemasimporta.com'">
<a href="#" class="overmenu cell">Home</a>
</td>

If the 'hoverable' link then needs to occupy all of the parent (TD), try adding the following to the CSS:


td { height: 100%; }
td .cell { display: block; height: 100%; }

It doesn't work.
I made some changes and I'm almost there!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menu</title>

<style type="text/css">
table {width:900px; height:50px; font:bold 14px Century Gothic; text-align:center; background-image:url('http://sites.google.com/a/loquemasimporta.com/web/MenuBckg.png')}
a {display:block; height:50px; color: #FFFFFF; text-decoration:none}
a:hover {background-color:#999999}
</style>

</head>
<body>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="http://www.loquemasimporta.com">Home</a></td>
<td><a href="http://www.loquemasimporta.com/profile">Perfil</a></td>
<td><a href="http://www.loquemasimporta.com/servicios">Servicios</a></td>
<td><a href="http://blog.loquemasimporta.com">Blog</a></td>
<td><a href="http://dir.mortellmarsol.com">Directorio</a></td>
<td><a href="http://www.loquemasimporta.com/home/tv">Chat</a></td>
<td><a href="http://www.loquemasimporta.com/home/tv">Programas</a></td>
<td><a href="http://www.loquemasimporta.com/contact">Contacto</a></td>

</tr>
</table>


</body>
</html>


Now all I need to do is vertically centering the text. Any thoughts?

coothead
08-29-2010, 10:03 PM
Hi there Rain_Lover,

I answered this earlier for you over at DD forums. :)

Try adding line-height:50px; to your a set of rules.

coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum