[thelist] css cascading order and browser support

aardvark roselli at earthlink.net
Thu Jan 3 09:40:25 CST 2002


> From: Adam <adam at hallinteractive.com>
[...]
> http://www.hall-assoc.com/clients/hatest/
> 
> in the "our work > portfolio > packaging" section there are sub
> section links where the options under "packaging" are available. In
> the interests of setting up a visual hierarchy I wanted to set these
> options to 9px in my external css (
> http://www.hall-assoc.com/clients/hatest/main.css  -see a.sub:link).
> however, in this same external css I've set values for the <li> list
> item tag at 11px.

what happens if you move the <li> chunk of CSS (the entire chunk, 
including the p, ul, li) to before the a.sub:link?  remember, the 
browser reads the CSS from top to bottom, and anything at the end 
of the page takes precedence over anything at the top of the 
page...  you may need to move the a.two class to below the a.sub 
as well...

for this reason, i always put my <a> styles last in the CSS, being 
careful to make sure that they are ordered correctly if there's ever 
any nesting...

also, on the clearchoice page, the <a>s are classed as "sub", but 
on the packaging page, the <a>s are classed as "two"...  changing 
the "two" to "sub" alone fixed it for me...

[...]
> Do I set priority to the a.sub:class using "!important" (isnt this
> also another feature not supported in nn4?, -as the chart from
> http://www.webreview.com/style/css1/charts/mastergrid.shtml tells me).
[...]

avoid the use of "!important"... it can override custom user settings, 
which means if i have a custom CSS file for surfing the web 
because i have vision problems, you're style may override it...

i'm trying to find proof of this back me up, but i'm having no luck... if 
anyone else can chime in that, i'd appreciate it...

[...]
> <a href="#">
> 
> vs.
> 
> <a href="javascript:void(0);">
> 
> for links that should behave as links yet go nowhere.

as an example, i have a piece of JS pop open a window for the user 
via a hyperlink, but i also have a URL in the href for non-JS 
browsers that i don't want JS-capable browsers to follow... that 
snippet of code:

<a href="/applications/parking/ticket_examples.html" 
target="_blank" onClick="javascript:ticketExamples();return 
false;">View Sample Tickets</a>

the "return false" keeps the browser from following the URL in the 
href, as well as the target, but if it's a non-JS browser, it should 
open the page that would otherwise be in a JS-created window in a 
new window via the target attribute...





More information about the thelist mailing list