...

View Full Version : Help with syles on IE



pyrrhus
01-26-2006, 04:02 PM
I have a menu system, using table cells, and wanted the cells to change bgcolor on mouseover and also be clickable on mouseover.

I have written the following which works on FF, but not IE! Is there something simple I'm missing?


<td class="btnav" onmouseover="style.backgroundColor='#C7C7C7';this.style.cursor='pointer'"
onmouseout="style.backgroundColor='#E0E0E0'" align="right";"onclick="document.location='index.html'">
<a href="index.html" style="text-decoration:none;"><strong>home</strong></a>
</td>

Kor
01-26-2006, 05:49 PM
clickable on mouseover.

? How's that? You mean the cursor: pointer?

Anyway:
onmouseover="this.style.backgroundColor='#C7C7C7'.....

onmouseout="this.style.backgroundColor='#E0E0E0'".......

pyrrhus
01-26-2006, 06:47 PM
Didn't make the problem clear did I :-)

On FF, the correct onmouseout action occurs and the cell reverts back to it normal colour, on IE this doesn't happen, in changes colour (onmouseover), but then it stays like that.
I made the small mod you suggested and that didn't clear it, any other ideas ?

_com
01-26-2006, 06:53 PM
.runtimeStyle. for IE instead of .style perhaps

_Aerospace_Eng_
01-26-2006, 07:00 PM
Kor told you what you needed to do to get this to work with JS but JS isn't needed. All you need is CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.btnav {
width:100px;
}
.btnav a {
display:block;
width:100%;
padding:3px 0;
text-align:center;
background:#E0E0E0;
color:#FFF;
}
.btnav a:hover {
background:#C7C7C7;
color:#FFF;
}
</style>
</head>

<body>
<table>
<tr>
<td class="btnav"><a href="index.html" style="text-decoration:none;"><strong>home</strong></a></td>
</tr>
</table>
</body>
</html>

pyrrhus
01-26-2006, 07:03 PM
Mmmm, no ... that stopped FF running it correctly too!

pyrrhus
01-26-2006, 07:07 PM
Aerospace ... that wouldn't make the cell clickable though would it!

_Aerospace_Eng_
01-26-2006, 07:08 PM
I just tested it in FF. It works fine. Unless you did something wrong. Yes it would make it clickable. You know you should try the suggestions people give you before you say they don't work. I rarely ever give solutions that don't work.

pyrrhus
01-26-2006, 07:11 PM
Aerospace ... valid comment, I will make the amends and get back to you :-) Didn't mean to come across as an ungreatful b**tard

btw, my original script works in FF, just not in IE properly!

_Aerospace_Eng_
01-26-2006, 07:13 PM
If you make the changes that Kor told you to, then it will work in IE as well. The stuff in bold that Kor highlighted is what you need to change you don't have this.style on your onmouseout you have style. rather than this.style

pyrrhus
01-26-2006, 07:22 PM
Man, it must be me, I can't get either way to work on IE!!!

I've attached the page for your information as a text file.

ps. This is a work in progress, I know the coding is sloppy ;-)

_Aerospace_Eng_
01-26-2006, 08:23 PM
Compare this correct javascript way.

<td class="btnav" onmouseover="this.style.backgroundColor='#C7C7C7';this.style.cursor='pointer'" onmouseout="this.style.backgroundColor='#E0E0E0'" align="right" onclick="document.location='free.htm'">
<a href="free.htm" style="text-decoration:none;"><strong>free advice</strong></a>
</td>
to your current javascript way

<td class="btnav" onmouseover="style.backgroundColor='#C7C7C7';this.style.cursor='pointer'"
"onmouseout="style.backgroundColor='#E0E0E0'" align="right";"onclick="document.location='articles.htm'">
<a href="articles.htm" style="text-decoration:none;"><strong>articles</strong></a>
</td>
Get rid of the CSS stuff I gave you since you don't seem like you are going to use it anyways. JS can be disabled you know. You have too many quotes in your code.

Kor
01-26-2006, 09:50 PM
Man, it must be me, I can't get either way to work on IE!!!

See an example of the same thing, but in a dynamic manner:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#mytab td{
background: #E0E0E0;
}
-->
</style>
<script type="text/javascript">
function rollCell(){
var myc = document.getElementById('mytab').getElementsByTagName('td');
for(var i=0;i<myc.length;i++){
myc[i].onmouseover=function(){
this.style.background='#C7C7C7';
this.style.cursor='pointer'
}
myc[i].onmouseout=function(){
this.style.background='#E0E0E0';
}
}
}
onload = rollCell
</script>
</head>
<body>
<table id="mytab" width="300" border="1" cellspacing="2" cellpadding="2">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

</body>
</html>

Now maybe you can see what was wrong in that code...

pyrrhus
01-27-2006, 10:09 AM
Guys, thanks.

Aerospace, like I said in my last post, the page was under development so the coding was sloppy, and will all be converted to a proper CSS file when the functionality is sorted.

Kor, thanks for the rewrite, I have used that, added a 'white border-bottom', and also an onlick function within the <TD> tag, and it works like a dream on both IE and FF :-) . Thanks

Again, both of you many, many thanks, this looks like a great forum, and I'll hopefully stick around, and try to take your examples by helping others.

http://www.codingforums.com/showthread.php?p=402206#post402206



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum