14 replies [Last post]
nutbarjo
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2005-05-12
Posts: 6
Points: 0

Hi,

I have created a navigation link style for a web page, which is then referenced by the use of class within the a tag. I always do my navigation this way but I am having major problems with this page and I hope someone can help. The browser is not picking up part of the style, but is picking up some of it. The "link" style is not working but the "hover" style is which looks weird as the text family and size is totally different.

My code is as follows:

a.nav:link {font-family:"georgia";
font-size:12pt;
color:#0a0698;
font-weight: bold;
text-decoration: none}

a.nav:visited {font-family:"georgia";
font-size:12pt;
color:#0a0698;
font-weight: bold;
text-decoration: none}

a.nav:hover {font-family:"georgia";
font-size:12pt;
color:red;
font-weight: bold;
text-decoration: none}

a.nav:active {font-family:"georgia";
font-size:12pt;
color:black;
font-weight: bold;
text-decoration: underline}



Which is linked to in my html as:

<a href="#terms" class="nav">Terms and Conditions</a> | <a href="#postage" class="nav">Postage and Payment</a>.


Please help and post if you need any more info to solve the problem.

Thanks everyone!!!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css navigation style behaving strangely

Try styling on the anchor rather than pseudo class :link and remove all the repeated rules i.e fonts and sizes they're not needed you only need the rules that are actual changes to a pseudo class.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

nutbarjo
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2005-05-12
Posts: 6
Points: 0

css navigation style behaving strangely

when you say style on the anchor rather than thorugh a pseudo class do you mean <a href="" style="link styles"> rather than setting the style in the head section?
If so there is a lot to type in for the link, hover, active and visited styles and also the style affects other links on my page so I would have to type them in for each one?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css navigation style behaving strangely

What he means is instead of using:

a.nav:link {font-family:"georgia";
font-size:12pt;
color:#0a0698;
font-weight: bold;
text-decoration: none} 

use this:

a.nav {
font-family:"georgia";
font-size:12pt;
color:#0a0698;
font-weight: bold;
text-decoration: none} 

Then in the other sections, you only type what changes.

Also, you'll need to offer a generic font alternative.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css navigation style behaving strangely

Sorry that probably wasn't to clear, I just meant try your rules on the a.nav without the :link.

Having said that the rules work for me without problem in FF/IE6 xhtml strict dtd, actually they work in quirks mode quite happily.

What conditions are you working with ? that you see this problem manifest, you'll need to fill in the detail a little; browsers, DTD, rest of the CSS rules which may be conflicting etc.

As for how you have written them you do not need to repeat all the font decs each time, it can all be written like this:

 a.nav:link, a.nav:visited { 
 font:normal bold 16px georgia, serif; 
 color:#0a0698; 
 text-decoration: none;} 
 
a.nav:hover { 
 color:#ff0000;} 
 
a.nav:active { 
 color:#000; 
 text-decoration: underline;}


Neater smaller set of rules, also it's better to not size fonts in 'pt' that's a typographic/print unit of measurement use px or better still a scalable unit such as ems.

Hugo.

Sorry TPH just saw your post, that's exactly what I meant, yet it does actually work original way; I thought that the :link class would be a problem, I've also condenced the font rules.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css navigation style behaving strangely

No worries - glad yo see you've included the generic font as well Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

nutbarjo
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2005-05-12
Posts: 6
Points: 0

css navigation style behaving strangely

Hi,
Thanks for your replies. I am mainly having the problem in Firefox. It displays ok in Internet Explorer. Regarding the use of pt not px - i selected the size from the list in Dreamweaver should they be using px??

I am attaching my code as regards to conflicts with other styles etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
ul {list-style-image: url("redswirl.gif"); font-family: georgia; font-size: 14pt; }
h1 {font-family: georgia; font-weight: bold; font-size: 24pt; }
h2 {font-family: georgia; font-weight: bold; font-size: 16pt; }
h3 {font-family: georgia; font-weight: bold; font-size: 14pt; }
h4 {font-family: georgia; font-weight: bold; font-size: 12pt; }
-->

<!-- navigation links style
a.nav:link {font-family:"georgia";
font-size:12pt;
color:#0a0698;
font-weight: bold;
text-decoration: none}

a.nav:visited {font-family:"georgia";
font-size:12pt;
color:#0a0698;
font-weight: bold;
text-decoration: none}

a.nav:hover {font-family:"georgia";
font-size:12pt;
color:red;
font-weight: bold;
text-decoration: none}

a.nav:active {font-family:"georgia";
font-size:12pt;
color:black;
font-weight: bold;
text-decoration: underline}

-->

<!-- navigation links style
a.navl:link {font-family:"georgia";
font-size:16pt;
color:#0a0698;
font-weight: bold;
text-decoration: none}

a.navl:visited {font-family:"georgia";
font-size:16pt;
color:#0a0698;
font-weight: bold;
text-decoration: none}

a.navl:hover {font-family:"georgia";
font-size:16pt;
color:red;
font-weight: bold;
text-decoration: none}

a.navl:active {font-family:"georgia";
font-size:16pt;
color:black;
font-weight: bold;
text-decoration: underline}

-->

/* Inset 3D Raised */
.raised {background: transparent; width:500px;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size:2em; color:#fff;}
.raised p {padding-bottom:0.9em;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#66ccff; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#66ccff; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#66ccff; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#66ccff; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#66ccff; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#66ccff; border-left:1px solid #aaa; border-right:1px solid #999;}

.raised .b1 {margin:0 5px; background:#66ccff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block; background:#66ccff; border-left:1px solid #fff; border-right:1px solid #999;}

/* Inset 3D Curved */
.inset {background: transparent; width:40%;}
.inset h1, .inset p {margin:0 10px;}
.inset h1 {font-size:2em; color:#fff;}
.inset p {padding-bottom:0.9em;}

.inset .top, .inset .bottom {display:block; background:transparent; font-size:1px;}
.inset .b1, .inset .b2, .inset .b3, .inset .b4, .inset .b1b, .inset .b2b, .inset .b3b, .inset .b4b {display:block; overflow:hidden;}
.inset .b1, .inset .b2, .inset .b3, .inset .b1b, .inset .b2b, .inset .b3b {height:1px;}
.inset .b2 {background:#ccc; border-left:1px solid #999; border-right:1px solid #aaa;}
.inset .b3 {background:#ccc; border-left:1px solid #999; border-right:1px solid #ddd;}
.inset .b4 {background:#ccc; border-left:1px solid #999; border-right:1px solid #eee;}
.inset .b4b {background:#ccc; border-left:1px solid #aaa; border-right:1px solid #fff;}
.inset .b3b {background:#ccc; border-left:1px solid #ddd; border-right:1px solid #fff;}
.inset .b2b {background:#ccc; border-left:1px solid #eee; border-right:1px solid #fff;}

.inset .b1 {margin:0 5px; background:#999;}
.inset .b2, .inset .b2b {margin:0 3px; border-width:0 2px;}
.inset .b3, .inset .b3b {margin:0 2px;}
.inset .b4, .inset .b4b {height:2px; margin:0 1px;}
.inset .b1b {margin:0 5px; background:#fff;}

.inset .boxcontent {display:block; background:#ccc; border-left:1px solid #999; border-right:1px solid #fff;}

</style>
</head>

<body bgcolor="#CCFFFF">
<a name="top"></a>
<table width="100%" border="5" bordercolor="#FFFFCC" bordercolordark="#99FFCC" bordercolorlight="#99FFCC" style="border-style=ridge">
<tr bgcolor="#99FFCC"><td colspan="2"><h1>Item Title</h1>
<div align="right"><a href="#terms" class="nav">Terms and Conditions</a> | <a href="#postage" class="nav">Postage and Payment</a></div></td>
</tr>
<tr>
<td width="60%" nowrap>
<h2>Start of description</h2>
<h3>Features :</h3>
<ul class="ul">
<!-- start of description box-->
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

<div class="boxcontent">

<li> item details</li>

</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<br>
<!-- End of description box-->
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

<div class="boxcontent">

<li> item details</li>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<br>
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

<div class="boxcontent">

<li> item details</li>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<br>
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

<div class="boxcontent">

<li> item details</li>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
<br>
<div class="raised">
<b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>

<div class="boxcontent">

<li> item details</li>
</div>
<b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>


</ul>
<p>&nbsp;</p>
<div align="center">
<p>&nbsp;</p>

</td>
<td width="40%" align="center" nowrap>
<img src="picname" width="300" height="200">
<br>
<img src="picname" width="300" height="200">
<br>

</td></tr>
<tr valign="top" bgcolor="#99FFCC">
<td nowrap colspan="2"> <a name="terms"></a>
<h3>Please take a moment to read my<br>Terms &amp; Conditions</h3>
<div align="right"><a href="#top" class="nav">Back to Top</a></div></td></tr>

<tr><td colspan="2">
<ul>
<li></li><br><br>
<li></li><br><br>
<li></li><br><br>
<li> </li><br><br>
<li></li><br><br>
<li></li><br><br>

</ul>
<br>
</td></tr>

<tr bgcolor="#99FFCC"><td colspan="2">
<a name="postage"></a>
<h3>Postage and Payment</h3><div align="right"><a href="#top" class="nav">Back to Top</a></div></td></tr>

<tr><td colspan="2">
<ul>
<li></li><br><br>
<li></li><br><br>
<li> </li><br><br>
<li></li><br><br>
<li></li>
<br><br>

<li></li><br><br>

</ul>
</td></tr>
</table>

</body>
</html>

Thanks very much for your help - perhaps with the full code you may be able to spot what the problem is - I have been scratching my head with this for days!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css navigation style behaving strangely

No offence nutbarjo, but dod you actually take any notice of the code that Hugo and I posted?

Verschwindende wrote:
  • CSS doesn't make pies

nutbarjo
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2005-05-12
Posts: 6
Points: 0

css navigation style behaving strangely

Yes thanks, copied and pasted it in but made no difference, so I reverted back to what I had originally done to see if a mistake could be spotted.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css navigation style behaving strangely

If it makes no difference, then it's obviously not a problem with the CSS, so stick with what Hugo posted and work on something else.

Verschwindende wrote:
  • CSS doesn't make pies

nutbarjo
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2005-05-12
Posts: 6
Points: 0

css navigation style behaving strangely

Hugo suggested that other CSS rules might be conflicting?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css navigation style behaving strangely

What exactly are you trying to achieve, and could we see an online page of it anywhere?

You seem to be mixing divs and tables, which seems a bit silly.

Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon. You're declaring the same thing about a million times.

Verschwindende wrote:
  • CSS doesn't make pies

nutbarjo
Offline
newbie
Last seen: 15 years 19 weeks ago
Joined: 2005-05-12
Posts: 6
Points: 0

css navigation style behaving strangely

i'm posting here because you are all suppossed to be experts. I am not a expert and I am writing my code (html and css) as I have been taught if this is wrong this is not my fault. I wanted to learn more about css as I find it interesting but to be honest I think I'll find somewhere else to learn where I won't be insulted. Sorry to have wasted your time.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 27 weeks 1 day ago
Joined: 2004-06-30
Posts: 9668
Points: 801

css navigation style behaving strangely

Oh for crap's sake, this has happened numerous times before.

Quote:
i'm posting here because you are all suppossed to be experts.

Now where did you get a silly idea like that? Laughing out loud I'm not an expert, I don't claim to be one. As for most of us Gurus, we're just normal people, with an interest in CSS, who happen to know a little more than the average newbie.

(For the record, I'm an 18 year old college student. Hardly an 'expert' Laughing out loud)

If you (as you should have done) referred to the How To section first, then looked at the Before Posting, please read this.

If you had read it, you would have come across this:

Quote:
4. Explain

Explain the problem as clearly as possible, mentioning which browsers you have tested it in - and which don't do what you want.
See How To Ask Questions the Smart Way.

Upon visiting that link, you would have found this:

Dealing with Rudeness

http://www.catb.org/~esr/faqs/smart-questions.html#keepcool

Quote:

Dealing with rudeness

Much of what looks like rudeness in hacker circles is not intended to give offence. Rather, it's the product of the direct, cut-through-the-bull*beep* communications style that is natural to people who are more concerned about solving problems than making others feel warm and fuzzy.

When you perceive rudeness, try to react calmly. If someone is really acting out, it is very likely that a senior person on the list or newsgroup or forum will call him or her on it. If that doesn't happen and you lose your temper, it is likely that the person you lose it at was behaving within the hacker community's norms and you will be considered at fault. This will hurt your chances of getting the information or help you want.

On the other hand, you will occasionally run across rudeness and posturing that is quite gratuitous. The flip-side of the above is that it is acceptable form to slam real offenders quite hard, dissecting their misbehavior with a sharp verbal scalpel. Be very, very sure of your ground before you try this, however. The line between correcting an incivility and starting a pointless flamewar is thin enough that hackers themselves not infrequently blunder across it; if you are a newbie or an outsider, your chances of avoiding such a blunder are low. If you're after information rather than entertainment, it's better to keep your fingers off the keyboard than to risk this.

(Some people assert that many hackers have a mild form of autism or Asperger's Syndrome, and are actually missing some of the brain circuitry that lubricates `normal' human social interaction. This may or may not be true. If you are not a hacker yourself, it may help you cope with our eccentricities if you think of us as being brain-damaged. Go right ahead. We won't care; we like being whatever it is we are, and generally have a healthy skepticism about clinical labels.)

In the next section, we'll talk about a different issue; the kind of `rudeness' you'll see when you misbehave.

On Not Reacting Like A Loser

Odds are you'll screw up a few times on hacker community forums — in ways detailed in this article, or similar. And you'll be told exactly how you screwed up, possibly with colourful asides. In public.

When this happens, the worst thing you can do is whine about the experience, claim to have been verbally assaulted, demand apologies, scream, hold your breath, threaten lawsuits, complain to people's employers, leave the toilet seat up, etc. Instead, here's what you do:

Get over it. It's normal. In fact, it's healthy and appropriate.

Community standards do not maintain themselves: They're maintained by people actively applying them, visibly, in public. Don't whine that all criticism should have been conveyed via private mail: That's not how it works. Nor is it useful to insist you've been personally insulted when someone comments that one of your claims was wrong, or that his views differ. Those are loser attitudes.

There have been hacker forums where, out of some misguided sense of hyper-courtesy, participants are banned from posting any fault-finding with another's posts, and told “Don't say anything if you're unwilling to help the user.” The resulting departure of clueful participants to elsewhere causes them to descend into meaningless babble and become useless as technical forums.

Exaggeratedly “friendly” (in that fashion) or useful: Pick one.

Remember: When that hacker tells you that you've screwed up, and (no matter how gruffly) tells you not to do it again, he's acting out of concern for (1) you and (2) his community. It would be much easier for him to ignore you and filter you out of his life. If you can't manage to be grateful, at least have a little dignity, don't whine, and don't expect to be treated like a fragile doll just because you're a newcomer with a theatrically hypersensitive soul and delusions of entitlement.

Sometimes people will attack you personally, flame without an apparent reason, etc., even if you don't screw up (or have only screwed up in their imagination). In this case, complaining is the way to really screw up.

These flamers are either lamers who don't have a clue but believe themselves to be experts, or would-be psychologists testing whether you'll screw up. The other readers either ignore them, or find ways to deal with them on their own. The flamers' behavior creates problems for themselves, which don't have to concern you.

Don't let yourself be drawn into a flamewar, either. Most flames are best ignored — after you've checked whether they are really flames, not pointers to the ways in which you have screwed up, and not cleverly ciphered answers to your real question (this happens as well).

I asked you a question and posted my comment on your CSS. Answer my question and we might be able to help you.

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css navigation style behaving strangely

nutbarjo,
Remove these:

--> <!-- navigation links style <--
a.nav:link {font-family:"georgia";
font-size:12pt;

There shouldn't be html comments in the embedded style declarations only the ones encapsulating the whole style set use style sheet comments if needed /* */

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me