Webmaster Forum / HTML, CSS, Scripts / CSS / December 2007

problem url - http://projects.missioninternet.com/proweb/clients/test.php
javascript fix url - http://projects.missioninternet.com/proweb/clients/test2.php

Please go to the "problem url" to see that the "Reports" link unlike
the links below it is black in color and does not respond to mouse
overs. There is one stylesheet definition for the leftMenu div. Here
is the code for the problem page.

<div id="leftMenu">
<div id="leftMenuPad">
<ul>
<li onclick="makeRequest('echo.php?clientID=2')">Reports</li>
<li><a href="invoices.php">Invoices</a></li>
<li><a href="#">Payments</a></li>
<li><a href="/proweb/common/message.php" title="Send private message"
rel="gb_page_center[600, 400]">Send private message</a></li>
<li><a href="viewarchive.php">View archive messages</a></li>
</ul>
</div><!-- end leftMenuPad -->
</div><!-- end leftMenu -->

#leftMenu li {
       list-style: none;
       list-style-position: inside;
       font-size: 12px;
       text-align: left;
       border-bottom: 1px;
       border-bottom-style: solid;
       border-bottom-color: #C4C4C4;

}

#leftMenu li a {
       padding: 5px 0 0 0;
       color: #0076D6;
       text-decoration: none;

}

#leftMenu li a:hover {
       font-weight: bold;

}

As a work around I added onMouseOut and onMouseOver behaviors with
javascript to mimic the stylesheet behaviors. Refer to the
"javascript
fix url" above. Although this works, I would like to know why onClick
overrode the stylesheet format.

Thank you,
Tim