Thread: Help make this Page Work for I.E. & FF instead of just FF.
View Single Post
 
Reply
Posted 2008-05-25, 04:24 PM in reply to Lenny's post starting "Did you read the article? Replace..."
Right, sorted. After lots of messing about, I've built the same navigation system using much simpler CSS, and nested tables.

---

This is soooooo big
<head>

<style type="text/css"><!--
a {color:#000000;}
a:link {color:#000000}
a:visited {color:#222111}
a:hover {color:#000000}
a:active {color:#000000}

table {
background-color:#CCCCCC;
width:200px;
padding:0px 0px 0px 0px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-style:normal;
font-weight:normal;
text-align:left;
text-decoration:none;
letter-spacing:normal;
border-bottom:none thin;
border-left:none thin;
border-right:none thin;
border-top:none thin;
list-style-type:none;
margin:0px 0px 0px 0px;
color:#000000;
}

.lib {background-color:#BBBBBB; text-align:center;}
.lic {background-color:#DDDCCC; padding:0px 0px 0px 25px; width:175px;}
.lid {background-color:#BBBCCC;}
--></style>

</head>
<body>

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="lib">Main</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>About</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; Website/Me</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; Contact Webmaster</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; Contact Me</td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0" onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#CCCCCC';">
<tr>
<td>::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
<tr>
<td onmouseover="this.style.background='#BBBCCC';" onmouseout="this.style.background='#DDDCCC';" class="lic">+&nbsp; ::HIDDEN::</td>
</tr>
</table></td>
</tr>
</table>

</body>
</html>



IE6 doesn't support :hover on tables. In fact, it will only support it with links. So, :hover was out of the question.

Javascript might be helpful... except it's more bloody trouble than it's worth. Bollocks to Javascript.

So what else can be used? Well, what happens when someone hovers over something? Their mouse movers over it. Hover is basically onmouseover, yes? And when they move off, and the object goes back to normal, it's kinda like onmouseout. Follow me so far?

In fact that's all there is to it. In the elements you want changing, simply use onmouseover to change the background as you hover over it, and then onmouseout to change it back. Simple.

You can call me "Daddy" now, if you want.

Oh, and: http://lenco.110mb.com/Untitled-2.html

It works in Maxthon 2.1, IE 6, IE 7, Opera 9.27, FireFox 2.0.0.14 and Safari for Windows 3.who-cares. Which means it should work in every browser.
Last edited by Lenny; 2008-05-25 at 05:05 PM.
Old
 Profile PM WWW Search
Lenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basicsLenny simplifies with no grasp of the basics
 
 
Lenny