DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 11-30-2009, 11:25 AM   #1
jwoolf09
Member
 
Join Date: Oct 2005
Location: Manchester, NH
Posts: 65
Default CSS 'a' style rules not recognized

I'm going through an HTML textbook from a couple of years ago, redoing some of the exercises to refresh my knowledge of CSS. I ran across something odd. Consider the following:

HTML text:

------------------------
<div id="point0" class="notes">
<a href="#"><img src="image0.jpg" alt="" /><br />
<p>
<span>3:30 a.m.</span> Start from the Longs Peak Ranger Station,
nine miles south of Estes Park. Be sure to pack food, extra water, sunblock,
and warm clothes, gloves, and caps.
</p>
</a>
</div>
--------------------------

The exercise involves placing this block of text at a hardcoded position and making it invisible except when the mouse rolls over it. To do this, I'm supposed to use class-based 'a' and 'a:hover' style rules, where the name of the class is "notes". Can anyone explain to me why this style rule works:

.notes {display:block;
background-color:blue;
color:white;
width:20px;
height:20px;
overflow:hidden;
z-index:2;
}

but this one is completely ignored by Firefox:

.notes a {display:block;
background-color:blue;
color:white;
width:20px;
height:20px;
overflow:hidden;
z-index:2;
}

??

-- JSW
jwoolf09 is offline   Reply With Quote
Old 11-30-2009, 02:22 PM   #2
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

It will work with a.notes

I can't remember why.....

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 11-30-2009, 03:27 PM   #3
jwoolf09
Member
 
Join Date: Oct 2005
Location: Manchester, NH
Posts: 65
Default

Sounds reasonable, Kelvyn. So I tried it. And it didn't work. Tried this, that, and some other things too. Nothing worked.

Then by accident I deleted the whole style rule. Rather than retype it all, I block-copied it back from my original post, above. And hey-presto! Now it works exactly as advertised.

Sometimes I hate computers...
jwoolf09 is offline   Reply With Quote
Old 12-01-2009, 01:37 AM   #4
LoisWakeman
Staff
 
LoisWakeman's Avatar
 
Join Date: Jan 2005
Location: Uplyme, Devon, England
Posts: 1,402
Default

What element is the 'notes' class applied to? The second rule expects an anchor nested inside whatever it is.

Another gotcha on anchor styles is to make sure you define the pseudo-classes in the right order, or they don't work as expected. (link visited hover active)
LoisWakeman is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
New Hart's Rules Michael Rowley Business Matters 1 11-30-2007 08:24 AM
Strizver: Type Rules! Howard White Fonts & Typography 7 02-17-2006 07:02 PM
New Hart's Rules Mike On Language & Literature 7 11-16-2005 12:45 AM


All times are GMT -8. The time now is 07:16 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.