PDA

View Full Version : CSS link colors in firefox



soap_box
Jan 21st, 2009, 10:34 PM
Hi,

can anyone tell me why my link colors are not working in firefox? instead of being the custom colors I have designated, they're simply the default colors.



<div id="latestabs" class="tabs">
<div class="tab1" style="float:left;"><a href="#" rel="latenj1" class="gl">Latest News</a></div>
<div class="tab1" style="float:left;"><a href="#" rel="latenj2" class="gl">Latest Jabbers</a></div>
<div style="clear:both;"></div>
</div>



a.gl:link {text-decoration: none; color: #6f6f6f;}
a.gl:visited {text-decoration: none; color: #6f6f6f;}
a.gl:hover {text-decoration: none; color: #484848;}
a.gl:active {text-decoration: none;}

The colors change in IE7 but not FF3. I'd appreciate any help with this matter,
sb

abduraooft
Jan 22nd, 2009, 09:01 AM
The above posted code works same in both FF and IE. There may be some other rules having higher precedence overriding the above rules. Could you post a link to your page?

soap_box
Jan 23rd, 2009, 05:18 PM
Thanks for the reply abduraooft,

here's (http://soapboxweb.co.uk/jw/) a link (images aren't loading since I'm moving things around but that shouldn't matter)

the links that are the default color (I want them to be grey/class=gl) are the ones that read 'TAB 1' and 'TAB 2'

Excavator
Jan 23rd, 2009, 06:26 PM
Hello soap_box,


<div id="latestabs" class="tabs">
<div class="tab1" style="float: left;"><a href="#" rel="latenj1" class="selected gl">TAB 1</a></div>
<div class="tab1" style="float: left;"><a href="#" rel="latenj2" class="gl">TAB 2</a></div>
<div style="clear: both;"></div>
</div>

works when I add the class gl to it.

Very odd that view source and edit source are showing 2 different sources for me.

soap_box
Jan 23rd, 2009, 06:43 PM
I still can't get it to work :/

in internet explorer, it doesn't work either. The links change, but not to the color designated by the gl class, and they still have underlines even though I changed the decoration to 'none'.

Could it be something to do with the 'rel' attribute or the javascript? I used a javascript code (you can see it in the head) to make the tabs change which div was visible.

I don't know why view source and edit source are different, maybe because I used php includes for a few sections.

Apostropartheid
Jan 23rd, 2009, 07:58 PM
soap, if you're writing the classes via JavaScript, then the original HTML isn't going to work. If I were you, I would change

a.gl:link {text-decoration: none; color: #6f6f6f;}
a.gl:visited {text-decoration: none; color: #6f6f6f;}
a.gl:hover {text-decoration: none; color: #484848;}
a.gl:active {text-decoration: none;}
to


.gl {
text-decoration: none;
}
a.gl:link,
.tabs a:link,
a.gl:visited,
.tabs a:visited {
color: #6f6f6f;
}
a.gl:hover {
color: #484848;
}
I did also format this and cut down on unnecessary selectors, but it should work.

jerry62704
Jan 23rd, 2009, 08:41 PM
You have a conditional for IE6 then negate it with the next conditional.

In your source, you have this:

<div id="mc-rightcol"> <div id="latestabs" class="tabs">
<div class="tab1" style="float:left;"><a href="#" rel="latenj1" class="gl">TAB 1</a></div>
<div class="tab1" style="float:left;"><a href="#" rel="latenj2" class="gl">TAB 2</a></div>
<div style="clear:both;"></div>

</div>


But when I look at it in FF/FB it looks like this:


<div id="mc-rightcol">
<div id="latestabs" class="tabs">
<div class="tab1" style="float: left;">
<a class="selected" rel="latenj1" href="#">TAB 1</a>
</div>
<div class="tab1" style="float: left;">
</div>
<div style="clear: both;"/>
</div>
<div class="tabbedcontent">
</div>
</div>


I don't see how the class changed from "GL" to "SELECTED". When I change the "SELECTED" to "GL", I get a color change.

I formatted your code, take a look:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JW</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.2- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

<script type="text/JavaScript">
<!--
function showthediv(theDiv) {
if (document.getElementById(theDiv).style.display == 'none')
{
document.getElementById(theDiv).style.display = 'block';
}
}
//-->
</script>

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif-->

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
</head>

<body>
<div id="container">
<div id="header">
<img src="images/title_here.png" style="margin-left:12px;margin-top:39px; float:left;" alt="Title" />

<div style="margin-left:150px; margin-top:59px; float:left; bottom:0px;">
<!--lower margin-left if you add more links to header-->

<!-- menuboxhighlight id is applied to div of current page-->
<div class="menubox" id="menuboxhighlight">
<a href="http://www.jabberwot.com" class="headerlinks">Home</a>
</div>

<div class="menubox">
<a href="#" class="headerlinks">Take a Tour</a>
</div>

<div class="menubox">
<a href="#" class="headerlinks">Browse Categories</a>
</div>

<div class="menubox">
<a href="#" class="headerlinks">Feedback</a>
</div>

<div class="menubox">
<a href="#" class="headerlinks">Contact</a>
</div>
</div>
</div> <!-- header -->

<div id="infobar">
<div class="floatleft">
<p style="padding-left:18px;">
<a href="login.php" class="infobarlink">log-in</a>
or <a href="register.php" class="infobarlink">sign up</a> (it's free!)
</p>
</div>

<div class="floatright">
<div class="search">
<img src="images/search-bar2.png" style="display:none;" alt="" />
<img src="images/toptipbg.png" style="display:none;" alt="" />
<!--preloading onfocus images-->

<div class="searchbgIE">
<form action="">
<div class="floatleft">
<input class="search_field" type="text" value="Search" onfocus="if
(this.value==this.defaultValue) this.value=''; showthediv('TipBox');return true;"/>
<!--use php 'if' statement here to prevent tooltip on any page except index.php?-->
<input name="searchbg" type="hidden" class="searchbg" />

<div id="TipBox"
style="display:none; width:279px; height:63px; position:absolute;
background:url(images/toptipbg.png);
margin:4px 0px 0px 0px;padding:0px;">

<div style="margin-top:17px; margin-left:12px;padding:0px; width:250px;
height:40px;font-size:12px; color:#FFF;
font-family:Georgia, 'Times New Roman', Times, serif; line-height:normal; ">

<span style="color:#b6e2f9;font-size:14px;">Top tip!</span>
Try searching for "Demo" to see how it all works
</div>
</div>
</div>

<div class="floatleft">
<input value="Search" class="search_button" src="images/search-btn.png" type="image" />
</div>
</form>
</div>
</div>
</div>
</div> <!-- infobar -->

<p>header image here</p>
<p>blue info bar here</p>

<div id="maincontent">
<div id="mc-leftcol">
<img src="images/welcome.png" style="padding-bottom:20px;" alt="" />
<p class="general">
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</strong>
</p>
<p class="general">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

<div id="hr"></div>

<img src="images/ouraim.png" style="padding-bottom:20px;" alt="" />
<p class="general">
<strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</strong>
</p>

<ul>
<li class="bb">Lorem ipsum</li>
<li class="bb">labore et dolore</li>
<li class="bb">ex ea </li>
<li class="bb">cillum dolore</li>
</ul>
</div> <!-- mc-leftcol -->

<div id="mc-rightcol">
<div id="latestabs" class="tabs">
<div class="tab1" style="float:left;">
<a href="#" rel="latenj1" class="gl">TAB 1</a>
</div>

<div class="tab1" style="float:left;">
<a href="#" rel="latenj2" class="gl">TAB 2</a>
</div>

<div style="clear:both;"></div>
</div>

<div class="tabbedcontent">
<div id="latenj1">
<p>
<strong>Lorem ipsum dolor</strong><br />
Sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et<br /><br />
</p>

<p>
<strong>Dolore magna aliqua. Ut enim ad </strong><br />
Minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit<br />
<a href="#" class="latestbox"> more</a><br /><br />
</p>

<p>
<strong>Voluptate velit esse cillum </strong><br />
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<br /><br />
</p>

<p>
<strong>Lorem ipsum dolor</strong> <br />
Sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et<br /><br />
</p>

<p>
<strong>Lorem ipsum dolor</strong> <br />
Minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit<br /><br />
</p>
</div> <!-- latenj1 -->

<div id="latenj2">
<!-- latest jabbers. limit to 5, class alternates on/off -->
<div class="latjr">
<div class="floatleft clear">
<img class="latjimg" src="images/avatars/ce_test.jpg" alt="" />
</div>

<div class="floatright" style="width:255px;">
<h3><a href="#">Username</a></h3>
<p>Joined: 01/01/2009</p>
</div>
</div>

<div class="latjrd">
<div class="floatleft clear">
<img class="latjimg" src="images/avatars/ce_test.jpg" alt="" />
</div>

<div class="floatright" style="width:255px;">
<h3><a href="#">Username</a></h3>
<p>Joined: 01/01/2009</p>
</div>
</div>

<div class="latjr">
<div class="floatleft clear">
<img class="latjimg" src="images/avatars/ce_test.jpg" alt="" />
</div>

<div class="floatright" style="width:255px;">
<h3><a href="#">Username</a></h3>
<p>Joined: 01/01/2009</p>
</div>
</div>

<div class="latjrd">
<div class="floatleft clear">
<img class="latjimg" src="images/avatars/ce_test.jpg" alt="" />
</div>

<div class="floatright" style="width:255px;">
<h3><a href="#">Username</a></h3>
<p>Joined: 01/01/2009</p>
</div>
</div>

<div class="latjr">
<div class="floatleft clear">
<img class="latjimg" src="images/avatars/ce_test.jpg" alt="" />
</div>

<div class="floatright" style="width:255px;">
<h3><a href="#">Username</a></h3>
<p>Joined: 01/01/2009</p>
</div>
</div> <!-- latenj2 -->
</div> <!-- tabbedcontent -->

<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
</div> <!-- tabbedcontent -->
</div> <!-- mc-rightcol -->
</div> <!-- maincontent -->

<div class="clearfooter"></div>

</div> <!-- container -->

<div id="footer">
<div id="footercont">
<div class="footercolumn">
<img src="images/footer-jabberwot.gif" style="margin-bottom:15px;" alt="" />
<ul>
<li><a class="fl" href="">Home</a></li>
<li><a class="fl" href="register.php">Sign Up</a></li>
<li><a class="fl" href="login.php">Log-in</a></li>
<li><a class="fl" href="#">About Jabbers</a></li>
<li><a class="fl" href="#">About Wots</a></li>
<li><a class="fl" href="#">Categories</a></li>
<li><a class="fl" href="#">Advanced Search</a></li>
</ul>
</div>

<div class="footercolumn">
<img src="images/footer-support.gif" style="margin-bottom:15px;" alt="" />
<ul>
<li><a class="fl" href="#">Link</a></li>
<li><a class="fl" href="#">Link</a></li>
<li><a class="fl" href="#">Link</a></li>
</ul>
</div>

<div class="footercolumn">
<img src="images/footer-network.gif" style="margin-bottom:15px;" alt="" />
<ul>
<li><a class="fl" href="#">Link</a></li>
<li><a class="fl" href="#">Link</a></li>
<li><a class="fl" href="#">Link</a></li>
</ul>
</div>

<div id="logo">
<p style="text-align:right;font-size:9px;color: #eaeaea;">
<img src="images/logo.png" alt="JW Logo" title="JabberWot" /><br /><br />
&copy; JabberWot 2008<br />
<a class="fl" href="http://www.soapboxweb.co.uk">soap_box.webdesign</a>
</p>
</div>
</div> <!-- footcont -->
</div> <-- footer -->

<script type="text/javascript">

var latenj=new ddtabcontent("latestabs")
latenj.setpersist(true)
latenj.setselectedClassTarget("link") //"link" or "linkparent"
latenj.init()

</script>

</body>
</html>

soap_box
Jan 24th, 2009, 01:42 PM
soap, if you're writing the classes via JavaScript, then the original HTML isn't going to work. If I were you, I would change

a.gl:link {text-decoration: none; color: #6f6f6f;}
a.gl:visited {text-decoration: none; color: #6f6f6f;}
a.gl:hover {text-decoration: none; color: #484848;}
a.gl:active {text-decoration: none;}
to


.gl {
text-decoration: none;
}
a.gl:link,
.tabs a:link,
a.gl:visited,
.tabs a:visited {
color: #6f6f6f;
}
a.gl:hover {
color: #484848;
}
I did also format this and cut down on unnecessary selectors, but it should work.

Thank you, CyanLight. The CSS you provided fixed my issue, sort of. I don't really understand why it did? But thanks :)

In the end I used this:


.gl {
text-decoration: none;
}
.tabs a:link,
.tabs a:visited {
color: #6f6f6f;
}
.tabs a:hover {
color: #484848;
} but .gl {text-decoration: none;} didn't seem to get rid of the underline, so I ended up just getting rid of text decoration on all links, which is fine because I wanted them off for the design anyway :o not a perfect solution but I got there with your help, thanks.


@jerry62704: thanks for all your efforts there. Such a simple idea to comment the end of all your divs and yet I never considered it or read about it. I should probably find one of those lists of 'top 10 html tips' or something :P Totally appreciate the tidy up.

Apostropartheid
Jan 24th, 2009, 05:42 PM
Thank you, CyanLight. The CSS you provided fixed my issue, sort of. I don't really understand why it did? But thanks :)

Your JavaScript was writing a class to your links, so instead of being GL they were either SELECTED or null. So, instead of attaching the CSS to GL, I grabbed onto the TAB class and attached the CSS to its descendants. Sort of get what I'm saying?

soap_box
Jan 24th, 2009, 05:45 PM
Your JavaScript was writing a class to your links, so instead of being GL they were either SELECTED or null. So, instead of attaching the CSS to GL, I grabbed onto the TAB class and attached the CSS to its descendants. Sort of get what I'm saying?

I think so. Instead of adding it to the link, you added it to all links within ".tabs", the class of the div that had the links inside. Well thanks for solving my issue and teaching me something :) I never would've figured out why it was happening, one of the pitfalls of using anothers' javascript I suppose.