Client Side Web Development

Re: CSS and different classes, pseudos hyperlinks not working

gotmike — Sat, 04 Jul 2009 13:14:30 GMT

Jackpot! That works perfectly. Thanks a ton!

Re: CSS and different classes, pseudos hyperlinks not working

deepthoughts — Sat, 04 Jul 2009 06:37:55 GMT

Your ASP.NET portion is right. Please replace the CSS portion with this one

        .navbar {margin: 0; padding: 1px; background-color: #1E407B; border-top: solid 1px #ccccff; text-align: left; color: #ffffff; font-size: 78%;}   
        .navbar a:visited { text-decoration: none; color: #FFFFFF; }   
        .navbar a:link { text-decoration: none; color: #FFFFFF; }   
        .navbar a:hover { text-decoration: underline; color: #FFFFFF; }   
        .navbar a:active { text-decoration: underline; color: #FFFFFF; }

Please note that a.navbar:visited is replaced by .navbar a:visited.

This will solve your problem.

Hope it helps.

Re: CSS and different classes, pseudos hyperlinks not working

deepthoughts — Sat, 04 Jul 2009 06:35:39 GMT

Oh sorry, I couldn't have indepth look. Yes the second and third are for h3 and h4 level headings having ".right" class as their own class attribute or of their parent.

Thanks

Re: CSS and different classes, pseudos hyperlinks not working

gotmike — Sat, 04 Jul 2009 05:05:00 GMT

and... here's a similar problem from the same project. here's the CSS...

.navbar {margin: 0; padding: 1px; background-color: #1E407B; border-top: solid 1px #ccccff; text-align: left; color: #ffffff; font-size: 78%;}
a.navbar:visited { text-decoration: none; color: #FFFFFF; }
a.navbar:link { text-decoration: none; color: #FFFFFF; }
a.navbar:hover { text-decoration: underline; color: #FFFFFF; }
a.navbar:active { text-decoration: underline; color: #FFFFFF; }

and the relevant asp.net portion:

    <link href="~/styles/StyleSheet3.css" rel="stylesheet" type="text/css" runat="server" />
...
        <tr>
            <td colspan="2" class="navbar">
                <a href="~/Default.aspx" runat="server">Home</a> | <a href="~/Listings/Listing1.aspx"
                    runat="server">Properties for Sale</a> | Client Services | About Us | Events
                | Contact Us
            </td>
        </tr>

the non-links are showing up as white in the foreground but the links are still purple. what gives?

Re: CSS and different classes, pseudos hyperlinks not working

gotmike — Sat, 04 Jul 2009 04:41:57 GMT

aren't the ".right" and ".right h3" and ".right h4" all considered different? if not, how do you specify different styles for heading tags inside separate classes?

Re: CSS and different classes, pseudos hyperlinks not working

deepthoughts — Sat, 04 Jul 2009 02:30:56 GMT

Hi!

Please note that you are having 3 classes with the same name "right". Now what the browser will do is to combine the styles of all the 3 classes and override the common styles defined in upper classes with the one at lower classes.

Like if you have set margin:5px; in the first .right class and margin:0 in the 3rd class. So, the browser will consider your .right class having margin:0 and not margin:5px.

For giving the hover style to anchor please write

a.right:hover and not .right:hover

Hope it helps

CSS and different classes, pseudos hyperlinks not working

gotmike — Fri, 03 Jul 2009 18:14:21 GMT

is there a trick to getting multiple classes to have different hyperlink activities on the same page? i have searched all over the internet and i can't for the life of me figure out why this won't work:

code from my master page:

                <div class="right">
                    <asp:XmlDataSource ID="rssData" runat="server" DataFile="MyRSSfeed"
                        XPath="rss/channel/item [position()<=6]"></asp:XmlDataSource>
                    <asp:ListView ID="ListView1" runat="server" DataSourceID="rssData">
                        <LayoutTemplate>
                            <h1>
                                My RSS</h1>
                            <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <h4>
                                <a href='<%# XPath("link") %>'>
                                    <%#XPath("title")%></a></h4>
                         </ItemTemplate>
                        <ItemSeparatorTemplate>
                            <div style="height: 0px; border-top: dashed 1px #ff0000">
                            </div>
                        </ItemSeparatorTemplate>
                    </asp:ListView>
                    <div class="footer">
                        »</div>
                </div>

code from my CSS file:

.right {margin: 5px; padding: 0; border: solid 2px #1E407B; background-color: #ccccff; font-size: 78%;}
.right h3 {margin: 0; padding: 4px; background-color: #1E407B; color: #ffffff; font: bold 100% sans-serif;}
.right h4 {margin: 0; padding: 4px; background-color: #ccccff; color: #ffffff; font: bold 100% sans-serif;}
a.right { color: #ffffff; text-decoration: none; }
a.right:link { color: #ffffff; text-decoration: none; }
.right:hover { text-decoration: underline; color: #ffffff; }

and... absolutely nothing happens on the hyperlinks. the colors don't look right, they don't get underlines when they hover, nada. worse yet, if i get rid of the ".right" portion of the "a" pieces in the CSS, the entire page's hyperlinks will follow whatever behavior i define. however, because the page is different colors in different spots, i need to have them act differently, or at least be different colors. i really must be losing my mind.