|
|
Posted by tshad on 08/17/07 21:46
I tried some of the suggestions from here and the articles mentioned and
still am confused. I tried applying this to a datagrid in asp.net which
renders to something like (with the CSS):
<style type="text/css">
a:link, a:visited {
color:#CCFF33;
}
..gridHeaderStyle {
color:#33FFCC;
background-color:#000000;
font-weight:bold
}
..gridHeaderStyle a:link, .gridHeaderStyle a:visited {
color:#red;
}
a.gridHeaderStyle:link, a.gridHeaderStyle:visited {
color:#red;
}
..gridPagerStyle {
background-color:red
}
</style>
<table cellspacing="0" cellpadding="0" rules="all" border="0"
id="_ctl0__ctl1_DataGrid1"
style="border-width:0px;width:635px;border-collapse:collapse;">
<tr class="gridHeaderStyle" align="Center">
<td style="width:100px;"><a href="#">Location</a></td>
</tr>
</table>
No matter what I do - the links in the header are
showing as lime green. I am trying to get them to change to red.
The links in my site should be Lime Green (a:link and a:visited). I have
the headerstyles' CssClass set to gridHeaderStyle - but it doesn't seem to
be working for the links in the header.
I though the ".gridHeaderStyle a:link" or a.gridHeaderStyle:link would
override the a:link but it doesn't seem to be doing this.
Am I missing something here?
Thanks,
Tom
"tshad" <t@home.com> wrote in message
news:_eLui.56800$5j1.13545@newssvr21.news.prodigy.net...
>
> "John Hosking" <John@DELETE.Hosking.name.INVALID> wrote in message
> news:46ba532a$1_2@news.bluewin.ch...
>> tshad wrote:
>>> "John Hosking" wrote in message news:46b923d6$1_5@news.bluewin.ch...
>>>>
>>>> Please get access to a public site and post your code there and a URL
>>>> here. Nobody wants to see all this code out of context. There are free
>>>> servers where you can put up a page for free, if your ISP doesn't
>>>> provide one.
>>>
>>> Where would I find one of those?
>>
>> GIYF: search for "free hosting" or "free web server" or something. I
>> really hate Yahoo's GeoCities, but if all else fails (getting _good_
>> hosting), you could go there as a last resort.
>>
>>>
>>> I actually have a couple of references, but from them references I
>>> couldn't figure out the differences between:
>>>
>>> .bodybold a:link
>>>
>>> and
>>>
>>> a.bodybold:link
>>
>> Just CSS notation. The thing following the leading dot is a class name.
>> The thing peceding the dot, if present, is the element with that class. A
>> sequence of "things" separated by spaces show descendents, where each
>> thing is a descendent of the things to its left. A colon starts a
>> pseudo-selector. (And commas separate selectors in a list which use the
>> same rules, but you know that now.)
>>
>> Selectutorial has some fine tutorials on CSS. Here's their page on
>> grouping selectors:
>> http://css.maxdesign.com.au/selectutorial/rules_group_sel.htm
>>
>>>
>>> At least not directly. For example, I didn't see in my references (may
>>> have missed it) that a:Link affects the other classes.
>>>> BTW, if you have identical rules for :link, :hover, and :active, you
>>>> can probably just specify a:link, a:visited and leave out the others,
>>>> as they are affected by the a:link selector.
>>>
>>> Are you saying that a:hover and a:active is affected by a:link or
>>> a:hover is affected by a:link and a:active is affected by visited? Just
>>> wanted to make sure.
>>
>> Here's some more to read (and refer back to later). If you read this (and
>> understand it) you ought to have no more problems in this area.
>> http://www.satzansatz.de/cssd/pseudocss.html is a page which talks
>> primarily about bugs in IE regarding pseudo-selectors (so it's both more
>> than we're discussing here and also restricted to just a couple of
>> browser versions), but it contains a good explanation about the :link,
>> :visited, et. al. mechanics. I suggest that you just skip to
>> http://www.satzansatz.de/cssd/pseudocss.html#link-pseudo-classes and read
>> from there.
>>
>> And from the horse's mouth (also linked to from above):
>> http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes
>> http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes
>>
>> And for dessert, here are a couple of fun facts from
>> http://www.quirksmode.org/css/hover.html ;-)
>>
>
> I will be looking at these pretty closely.
>
> I have been looking at:
> http://www.w3schools.com/css/css_pseudo_classes.asp with is pretty basic
> but helps as a tickler to remember the format.
>
>> .test:hover doesn't work in Mozilla/Firefox in CSS Quirks Mode.
>>
>> :hover on elements other than links doesn't work in Explorer 7 in CSS
>> Quirks Mode.
>>
>>>
>>> Also, since we are using the pseudo selectors, is a { }
>>> not really useful? I can't figure out why I would use the "a" tag by
>>> itself.
>>
>> Not all <a> elements are links. You don't see the non-link kind very
>> often anymore, but they exist.
>>
>>>
>>> So I assume that the following:
>>>
>>> .bodybold a:link
>>> {
>> [snippage of repeated identical rules]
>>> }
>>> .bodybold a:visited
>>> {
>> [snippage]
>>> }
>>> .bodybold a:hover
>>> {
>> [snippage]
>>> }
>>> .bodybold a:active
>>> {
>> [snippage]
>>> }
>>>
>>> Can be changed to:
>>>
>>> .bodybold a:active, .bodybold a:visited, .bodybold a:hover, .bodybold
>>> a:active
>>
>> If you correct the first a:active in what I presume is a typo here to
>
> Yes, it was.
>
> I meant it as you typed it.
>>
>> .bodybold a:link, .bodybold a:visited, .bodybold a:hover, .bodybold
>> a:active
>>
>>> {
>> [snippage]
>>> }
>>
>> ...then yes, but
>>
>>>
>>> or
>>>
>>> .bodybold a:active, .bodybold a:visited
>>> {
>> [snippage]
>>> }
>>
>> No. Don't know how you jumped here. Ah! unless you have the same typo. If
>> you mean .bodybold a:link, .bodybold a:visited, then yes.
>>
>>
>>> The same with this:
>>>
>>> a.bodybold:link
>>> {
>>> }
>>> a.bodybold:visited
>>> {
>>> }
>>> a.bodybold:hover
>>> {
>>> }
>>> a.bodybold:active
>>> {
>>> }
>>>
>>> can be changed to:
>>>
>>> a.bodybold:link, a.bodybold:visited, a.bodybold:hover, a.bodybold:active
>>> {
>>> }
>>>
>>> or
>>>
>>> a.bodybold:link, a.bodybold:visited
>>> {
>>> }
>> Well, yes, but do note that these are two entirely different examples
>> you've given. "a.bodybold:link" is different from ".bodybold a:link".
>
> They are different examples - but just wanted to make sure there wasn't
> some gotcha between the different types.
>
> Thanks - this helps a lot,
>
> Tom
>>
>>
>> --
>> John
>> Pondering the value of the UIP: http://blinkynet.net/comp/uip5.html
>
>
Navigation:
[Reply to this message]
|