Stylesheet format lost after adding onClick

problem url - http://projects.missioninternet.com/...ients/test.php
javascript fix url - http://projects.missioninternet.com/...ents/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')">Repor ts</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

Big Moxy wrote:

problem url - http://projects.missioninternet.com/...ients/test.php
javascript fix url - http://projects.missioninternet.com/...ents/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')">Repor ts</li
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^

That is *not* a link, but an onclick handler added to a list index to
"behave" like a link. Why would you expect your rule for an A element
work for a LI? Anyway, don't do this. Very bad practice and very
unreliable...


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Big Moxy wrote:

problem url - http://projects.missioninternet.com/...ients/test.php
javascript fix url - http://projects.missioninternet.com/...ents/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')">Repor ts</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 --

[snip]

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

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

You have no <a> tag in the list item reading "Report" so naturally these
selectors won't affect it.

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.

The onclick didn't override anything. You *removed* the <a> tag,
therefore there isn't one for the CSS to match.

On Dec 26, 8:49*am, Harlan Messinger
<hmessinger.removet... (AT) comcast (DOT) net> wrote:

Big Moxy wrote:
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')">Repor ts</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 --

[snip]

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

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

You have no <a> tag in the list item reading "Report" so naturally these
selectors won't affect it.



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.

The onclick didn't override anything. You *removed* the <a> tag,
therefore there isn't one for the CSS to match.- Hide quoted text -

- Show quoted text -

Harlan and Jonathan,

Thank you for your comments. You pointed out the flaw in my
thinking... that onClick was the same as <a href..>. The reason for
the onClick is that the Javascript uses Ajax to return the results on
the same page. Can you recommend how I can use CSS to define the
onClick behavior (like a:hover)? Should I add <a href="#"> along with
the onClick?

- Tim

Big Moxy wrote:

Should I add <a href="#"> along with the onClick?

Sounds like a plan to me...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com