[RESOLVED] More issues with CSS this time links

I have added the CSS below into my style sheet.

Code:

---

a.inactivelink:hover{color:red; text-decoration:none}
a.activelink:hover{color:green; text-decoration:underline}
a.inactivelink:link{color:red; text-decoration:none} 
a.activelink:link{color:green; text-decoration:none}

---

I am using the HTML/ASP.Net below to set the class of the hyperlink control.

When I run the script the CSS is not been picked up at all by the hyperlink regardless of the conditional statement. I forllow the W3C tutorial but somehow must be referencing by hyperlink wrong?

HTML Code:

---

<div id="course-listing-container" class="course-listing-container">
                   
                   
                <asp:Repeater ID="EventsResultsRepeater" runat="server" OnItemCommand="EventsResultsRepeater_ItemCommand">
                    <HeaderTemplate>
                    <table class="coursetable1" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                        <th class="leftcol" scope="col">Event Code</th>
                            <th>Start</th>
                            <th>End</th>
                          <th class="leftcol" scope="col">Location</th>
                        <th>Options</th>
                        </tr>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <tr>
                           
                        <td class="leftcol"><asp:Label ID="lblGspEventID" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "GspEventID")%>'></asp:Label><%# DataBinder.Eval(Container.DataItem, "EventID")%></td>
                            <td><%# DataBinder.Eval(Container.DataItem, "StartDate","{0:dd-MMM-yy}")%> </td>
                            <td><%# DataBinder.Eval(Container.DataItem, "EndDate", "{0:dd-MMM-yy}")%></td>
                            <td class="leftcol">
                              <asp:HyperLink ID="locationlink"
                                runat="server" 
                                NavigateUrl='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString())%>'
                                CssClass='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString()) == "fish"  ? "inactivelink" : "activelink" %>'
                                Enabled='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString()) != "fish" %>'> <%# DataBinder.Eval(Container.DataItem, "LocationName")%></asp:HyperLink>
                                                        <td>
                                <asp:ImageButton ID="imgBtnViewEvent" runat="server"
                                                    onclick="Event_Click" 
                                                    AlternateText="View"
                                                    ImageUrl="~/images/view_doc.png"
                                                    ToolTip="View Event"
                                                                                                    />
                            </td>
                    </tr>
                </ItemTemplate>

                <AlternatingItemTemplate>
                    <tr class="altrow">
                          <td class="leftcol"><asp:Label ID="lblGspEventID" runat="server" Visible="false" Text='<%# DataBinder.Eval(Container.DataItem, "GspEventID")%>'></asp:Label><%# DataBinder.Eval(Container.DataItem, "EventID")%></td>
                    <td><%# DataBinder.Eval(Container.DataItem, "StartDate","{0:dd-MMM-yy}")%> </td>
                          <td><%# DataBinder.Eval(Container.DataItem, "StartDate","{0:dd-MMM-yy}")%> </td>
                         
                            <td class="leftcol">
                                <asp:HyperLink ID="locationlink"
                                runat="server" 
                                NavigateUrl='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString())%>'
                                CssClass='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString()) == "fish"  ? "inactivelink" : "activelink" %>'
                                Enabled='<%# (DataBinder.Eval(Container.DataItem, "URL").ToString()) != "fish" %>'> <%# DataBinder.Eval(Container.DataItem, "LocationName")%></asp:HyperLink>
                             
                          </td>                           
                          <td>
                                  <asp:ImageButton ID="imgBtnViewEvent" runat="server"
                                                    onclick="Event_Click" 
                                                    AlternateText="View"
                                                    ImageUrl="~/images/view_doc.png"
                                                    ToolTip="View Event"
                                                                                                          />
                            </td>
                                 
                         
                         
                    </tr>
                </AlternatingItemTemplate>

                <FooterTemplate>
                    </table>
                </FooterTemplate>

            </asp:Repeater>
            <asp:Button ID="btn_Submit" runat="server" Text="Click to Popup" style="display:none;"/>

---

Try rearranging these lines like so:

Code:

---

a.inactivelink:link{color:red; text-decoration:none} 
a.activelink:link{color:green; text-decoration:none}
a.inactivelink:hover{color:red; text-decoration:none}
a.activelink:hover{color:green; text-decoration:underline}

---

:hover will not work unless :link comes before it.

If that doesn't fix it - do you have any other CSS that could be conflicting with this bit?

There must be some other CSS properties which are blocking it, I am using three different style sheets inherited from a third party. Is there any way or tool to see what is actually affecting it or a way to force it to use the desired class?

Use FireFox ... there's an addin .... ugh... WebDev ... something like that... carp... it's been too long since I've used it... but it adds some menus to the browser that allows you to then see the element IDs, CSS selectors, classes, etc of what's displayed...

I'll see if I can locate the plugin...

-tg

edit - I think this is the one - https://addons.mozilla.org/en-US/fir...web-developer/

Ok so I have used the addon, and selected the link I want to make green.

The add on tool has brought up a list of css snippets which could be affecting it. How do I alter my coding to only use the one which makes it green without breaking the styling for all the other links on the site?

Note: #Content-container-2 comes from the master page so I cant alter that

Code:

---

http://localhost:1985/css/main-2010.css

:link, :visited (line 3)

{

text-decoration: none;

}

a.activelink:link (line 1612)

{

color: green;

text-decoration: none;

}

a.activelink:hover (line 1614)

{

color: green;

text-decoration: underline;

}

#main-content-container-2 a (line 191)

{

color: #194690;

font-weight: bold;

}

#main-content-container-2 a:hover (line 195)

{

text-decoration: underline;

}
http://localhost:1985/css/pages.css

#main-content-container-2 a (line 4)

{

color: #194690;

font-weight: bold;

}

#main-content-container-2 a:hover (line 8)

{

text-decoration: underline;

}

---

Sorted it,

#main-content-container-2 a.inactivelink:link{text-decoration:none}
#main-content-container-2 a.activelink:link{text-decoration:none}
#main-content-container-2 a.inactivelink:hover{text-decoration:none}
#main-content-container-2 a.activelink:hover{text-decoration:underline}

Also similar to the add in suggested I used firebug lite for i.e as not supposed to have firefox on works pc.

Thanks

"not supposed to have firefox on works pc." -- I use FireFox Portable from portableapps.com among other apps from there... installs to a thumbdrive... carry it around with you.

glad you got it sorted though.

-tg