[RESOLVED] Two links refuse to inherit css traits

[schwim]

Hi there everyone,

I'm in a little bit of a pickle. I've been developing a site, and adding classes when needed, and to be honest, it's still very early on and I would have hoped that something as simple as this wouldn't have had a problem, but here I am :)

All links but two are operating correctly. I have a testimonial box at the top of the page, the body in a table and then the footer. The footer and testimonial sections share link traits.

Two links in the testimonial section are inheriting the main link traits, even though they're set to use the class I created for the footer. The link directly above uses the identical class, and it is operating properly:

CSS:


<style type="text/css">

a:link {color: #0b5002;}
a:visited {color: #105307;}
a:hover {color: #117b03;}
a:active {color: #19b704;}
a:link.footlink {color: #ffffff;}

body {background-color: #173928; }

span.testtitle {
font-family: Verdana,Geneva,Helvetica;
font-size: 12px;
font-weight: bold;
color: #B0A07D; }

span.testbody {
font-family: Verdana,Geneva,Helvetica;
font-size: 10px;
color: #d9d1bf; }

td {
font-family: Verdana,Geneva,Helvetica;
font-size: 14px; }


p.footer {
font-family: Verdana,Geneva,Helvetica;
font-size: 9px;
color: #FFFFFF; }

</style>


source:


echo("<span class='testbody'>$testtext <a class='footlink' href=\"$scripturl/index.php?id=$id\" onclick=\"NewWindow(this.href,'submit','".$main_width."','600','yes','center');return false\" onfocus=\"this.blur()\">"._BLOCK_VIEWTHISTEST."</a></span>

<hr>");



}



echo("</td>

</tr>");

if($block_showauth == 1) {

echo("<tr>

<td align='right'>

<table width='100%'>
<tr>
<td>
<span class='testbody'>
<!--Problem!--><a class='footlink' href=\"$scripturl\" onclick=\"NewWindow(this.href,'submit','".$main_width."','600','yes','center');return false\" onfocus=\"this.blur()\">"._COM_VIEWALLTEST."</a> -|-

<!--Problem!--><a class='footlink' href=\"$scripturl/form.php\" onclick=\"NewWindow(this.href,'submit','600','400','yes','center');return false\" onfocus=\"this.blur()\">"._COM_SUBMITOWN."</a>
</span>

</td>
<td align='right'>
<span class='testtitle'>$author</span>
</td>
</tr>
</table>

</td>


I have tried a lot of things, including new td class to handle this, but I did more harm than good, breaking the footer td.

Can anyone help me figure out why I can't force these links to use the 'footlink' class?

thanks,
json

[WebJoel]

You are attempting to treat an anchor,

<span class='testbody'>
<!--Problem!--><a class='footlink' href=\....



-try this:

span.testbody a {
font-family: Verdana,Geneva,Helvetica;
font-size: 10px;
color: #d9d1bf; }

and, you know that:

<!--Problem!-->

is aptly named. :)

<!-- problem --> (use 'whitespace' for proper !comment tags, Firefox can exhibit weird behaviour sometimes with lack of whitespace and adjcent hyphens, possible extra "!" also..) :D

[schwim]

Hi there Joel, and thanks very very much for the reply. That gave me some links I could color!!!

I do have a question though. Even without the span around those links, I couldn't control them with my css, when other links in the very same parent table worked the way I needed them to work. What was I doing wrong? If you can't tell because of the lack of code, what are some common things that cause it to fail? Previous traits being set by earlier elements?

Thanks very much for your help. I really appreciate it.

thanks,
json

[schwim]

Crap.

I spoke too soon I guess. It looks spectacular in Firefox on my linux desktop. I started up IE on my laptop and got the following:

http://personal.schwim.net/images/share/css-links.jpg

It looks just right in FF, but in IE, one of the links refuses to go white.


<td align='right'>

<table width='100%'>
<tr>
<td>
<span class='testlinks'>
<a href=\"$scripturl\" onclick=\"NewWindow(this.href,'submit','".$main_width."','600','yes','center');return false\" onfocus=\"this.blur()\">"._COM_VIEWALLTEST."</a> -|-

<a href=\"$scripturl/form.php\" onclick=\"NewWindow(this.href,'submit','600','400','yes','center');return false\" onfocus=\"this.blur()\">"._COM_SUBMITOWN."</a>
</span>

</td>
<td align='right'>
<span class='testtitle'>$author</span>
</td>
</tr>
</table>

</td>



<style type="text/css">

a:link {color: #0b5002;}
a:visited {color: #105307;}
a:hover {color: #117b03;}
a:active {color: #19b704;}
a:link.footlink {color: #ffffff;}

body {background-color: #173928; }

span.testtitle {
font-family: Verdana,Geneva,Helvetica;
font-size: 12px;
font-weight: bold;
color: #B0A07D; }

span.testbody {
font-family: Verdana,Geneva,Helvetica;
font-size: 10px;
color: #d9d1bf; }

span.testlinks {
font-family: Verdana,Geneva,Helvetica;
font-size: 10px;
color: #ffffff; }

span.testlinks a {
font-family: Verdana,Geneva,Helvetica;
font-size: 10px;
color: #ffffff; }

td {
font-family: Verdana,Geneva,Helvetica;
font-size: 14px; }


p.footer {
font-family: Verdana,Geneva,Helvetica;
font-size: 9px;
color: #FFFFFF; }

</style>


The links are identical in structure, and I tried it both with and without the footlink class in the link itself.

Any suggestions as to why now only one link refuses to play nice would be greatly appreciated :D

thanks,
json

[schwim]

Hi there again,

Well, I've tested as much as I can, and I can't find the problem at all.

First, as was suggested by Nog in the sticky, I validated both the page code and the css. The page and css are A-OK, and I was invited to put pretty awards on my site.

Secondly, I tested with the following combinations:


Linux: (http://personal.schwim.net/images/share/css-compare-linux.png) (in the order of the screenie) MSIE 6.0, Firefox 2.0.0.6, Epiphany 2.8.13: IE is the only browser that renders it incorrectly.

Windows: (http://personal.schwim.net/images/share/css-compare-win.jpg) (in the order of the screenie) MSIE 7.0, Firefox 2.0.0.6: IE is the only browser that renders it incorrectly.

Page source in it's completion (http://personal.schwim.net/share/css_error_html.txt)

Unfortunately, I can't tell the client not to worry about it ;) so I need to figure out what I or IE is doing wrong and find a fix or workaround.

Does anyone see anything that I missed that would cause my problem only in IE?

thanks,
json

[schwim]

For anyone who may find themselves in my fix:

If you define general link colors for link/hover/visited/active, then those traits will be inherited by the link in IE if you don't define them for the trait inside the span/class/etc. My problem was that it was a visited link, and since I hadn't defined "span.testlinks a:visited", the link inherited the trait from "a:visited" only when viewing it in IE.

I also found other things while viewing in IE, where some links would inherit the parent a:hover trait while others wouldn't. My resolution was to define all instances of anchor when creating a new class or span definition, which I guess is what I should have done from the beginning.

Hope this saves someone some time.

thanks,
json