[thelist] A JavaScript query

Joshua Olson joshua at waetech.com
Wed Dec 24 12:04:08 CST 2003


----- Original Message ----- 
From: <john at johnallsopp.co.uk>
Sent: Wednesday, December 24, 2003 10:36 AM


> I can't quite work this one out. See
> <http://www.johnallsopp.co.uk/test/test1/index.html>. In Mozilla the
> second menu line (that appears when you rollover the top line) is green
> like it should be. In IE (4 and 6), it's red. Red is the default 'a'
> style. But afaics the element has the style menuText2 which should mean
> it's green.

John,

Your code is suffering from what we lovingly refer to as "classitis".  This
means that there is an over abundance of class assignments to elements on
the page.  In order to debug your HTML/CSS, I created a version of the page
and removed the JavaScript rollovers, just leaving the HTML.  I also
simplified the class assignments by placing the assignments on container
elements.  The only assignments left are menuTable at the table tag,
menuTable2 on the 2nd tr tag, and menuCurrent on the currently selected a
tags.

<html>
<head>
<link rel="stylesheet" type="text/css" href="kitchen.css" title="title1"
media="screen">
</head>
<body>


<table class="menuTable" border="0" cellspacing="0" cellpadding="0">
<tr>
 <td id="m10">&nbsp;</td>
 <td id="m11"><a href="editorial.jsp" class="menuCurrent">Editorial</a></td>
 <td id="m12"><a href="products.jsp">Products</a></td>
 <td id="m13"><a href="myDesigns.jsp">myDesigns</a></td>
 <td id="m14"><a href="news.jsp">News</a></td>
 <td id="m15"><a href="about.jsp">About</a></td>
 <td id="m16"><a href="alinks.jsp">Links</a></td>
</tr>
<tr class="menuTable2">
 <td id="m20">&nbsp;</td>
 <td id="m21"><a href="#" class="menuCurrent">Menu #1</a></td>
 <td id="m22"><a href="#">Menu #2</a></td>
 <td id="m23"><a href="#">Menu #3</a></td>
 <td id="m24"><a href="#">Menu #4</a></td>
 <td id="m25"><a href="#">Menu #5</a></td>
 <td id="m26"><a href="#">Menu #6</a></td>
</tr>
</table>

</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Next, I simplified the css file by removing elements that didn't pertain
specifically to the menu and combined elements together [1] that were
identical.  Also note how I used descendant selectors [2] to indicate that a
tags within the various containers should be styled a certain way.  This is
a much better solution than assigning classes to every tr, td, and anchor
within the menu.

table.menuTable {
 width: 100%;
 background-color: rgb(76,53,99);
 color: rgb(210,231,136);
 font-family: arial, sans-serif;
 font-weight: bold;
 text-decoration: none;
 }

.menuTable a, .menuTable a:link, .menuTable a:visited {
 color: rgb(210,231,136);
 font-family: arial, sans-serif;
 font-weight: bold;
 text-decoration: none;
 display: block;
 width: 100%;
 }

.menuTable a:hover {
 background-color: rgb(210,231,136);
 color: rgb(76,53,99);
 }

.menuTable2 td {
 height: 21px;
 }

.menuTable2 a, .menuTable2 a:link, .menuTable2 a:visited {
 color: rgb(210,231,136);
 font-family: arial, sans-serif;
 font-weight: normal;
 text-decoration: none;
 display: block;
 width: 100%;
 }

.menuTable2 a:hover {
 background-color: rgb(210,231,136);
 color: rgb(76,53,99);
 }

a.menuCurrent, a.menuCurrent:link, a.menuCurrent:visited {
 color: rgb(153, 153, 153);
 font-family: arial, sans-serif;
 text-decoration: none;
 display: block;
 width: 100%;
 }

a.menuCurrent:hover {
 background-color: rgb(210,231,136);
 color: rgb(76,53,99);
 }

Hopefully this will give you something to start with.

[1] http://www.w3.org/TR/REC-CSS2/selector.html#grouping
[2] http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors

Good luck,

<><><><><><><><><><>
Joshua Olson
Web Application Engineer
WAE Tech Inc.
http://www.waetech.com/service_areas/NC/
706.210.0168



More information about the thelist mailing list