473,721 Members | 3,486 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

weird problems with css and link hover

LRW
Below I'll paste my CSS and the HTML in question.
But what's happening is, I'm trying to establish a link behavior for a class
that's separate from the normal link class. I've established a: 's with no
underline and then an underline for hover...but oddly, only ONE link will
actually show the underline on hover. All the rest, even with the same HTML,
won't pop up an underline.
I just don't get it!
If I could get any advice I'd really appreciate it!
Thanks!
Liam
PS: In the HTML below, ONLY the "W3C" hyperlink exhibits the hover bahavior
while the others will look the same otherwise, but won't underline on hover.

CSS:
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;

}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CC99FF;
}
..WhiteNotice {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
color: #D9E6F2;
}
#notice {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #D9E6F2;
text-decoration: none;
}
#notice a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;
}
#notice a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
#notice a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #AEE4FF;
text-decoration: none;
}
#notice a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #CC99FF;
}

The HTML:
<div align="center" id="notice">Thi s site best viewed at 800x600x16bit
color or higher, with a fully <a href="http://www.w3.org/">W3C</a>
compliant browser.<br>
(MS Explorer 5.5, Netscape 6.2, Opera 5 ....)<br>
Copyright &copy; <? echo"$now"; ?> &quot;<a
href="http://www.celticbear. com" target="_blank" >Celticbear</a>&quot;
for <a href="http://www.mechphisto. net" target="_blank" >Mechphisto
Designs</a></div>
Jul 20 '05 #1
7 4088
"LRW" <dr***@NOSPAHMc elticbear.com> wrote in message
news:gQMEb.5999 19$Tr4.1568782@ attbi_s03...
Below I'll paste my CSS and the HTML in question.
(scratches head.. why do people post code snippets
to CSS HTML groups - html/css would seem to be
_the_ things most suited to a link..)
But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's with no
underline and then an underline for hover...but oddly, only ONE link will
actually show the underline on hover. .... #notice {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px; ..... The HTML:
<div align="center" id="notice">Thi s site best viewed at 800x600x16bit
color or higher, with a fully <a href="http://www.w3.org/">W3C</a>
compliant browser.<br>
(MS Explorer 5.5, Netscape 6.2, Opera 5 ....)<br>
Copyright &copy; <? echo"$now"; ?> &quot;<a
href="http://www.celticbear. com" target="_blank" >Celticbear</a>&quot;
for <a href="http://www.mechphisto. net" target="_blank" >Mechphisto
Designs</a></div>


I am not sure of the solution, but a couple of comments
(experts please jump in and correct where necessary)

The 'id' type styles were only meant to be used once
in each page - I have never quite figured why, but
because if that I generally avoid them.

You have applied the ' id="notice">' only
to the W3C link. Is that what you were expecting
to be applied to the other elements?

--
Andrew Thompson
* http://www.PhySci.org/ PhySci software suite
* http://www.1point1C.org/ 1.1C - Superluminal!
* http://www.AThompson.info/andrew/ personal site
Jul 20 '05 #2
Andrew Thompson wrote:
The 'id' type styles were only meant to be used once
in each page - I have never quite figured why


"id" is shorthand for "identifier ," and it's meant to uniquely identify
a single element. If you want to apply a style to a whole class of
elements, rather than just one, you'd want to use the - wait for it -
"class" attribute.

sherm--
Jul 20 '05 #3
LRW

"Sherm Pendley" <sp********@d ot-app.org> wrote in message
news:du******** **********@news 2.news.adelphia .net...
Andrew Thompson wrote:
"id" is shorthand for "identifier ," and it's meant to uniquely identify
a single element. If you want to apply a style to a whole class of
elements, rather than just one, you'd want to use the - wait for it -
"class" attribute.


That's my problem, is I just don't know enough about class vs. id...or CSS
in general. I only started using them a few months ago as a replacement for
FONT tags.
Any good site recommendations to help explaing CSS to newbies?

Is the difference in class vs. id the use of the period vs. the pound sign
before the name?
How else can I make two separate...clas ses for different link attributes
then? So I can have some hyperlinks with a certain size and color, and then
another set of hyperlinks with a different height and color? Is that not
with the pound sign? Or, do I do this:
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
..notice a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}

Thanks for all advice and assistance!!!
Liam
Jul 20 '05 #4
"Sherm Pendley" <sp********@d ot-app.org> wrote in message
news:du******** **********@news 2.news.adelphia .net...
Andrew Thompson wrote:
The 'id' type styles were only meant to be used once
.... "id" is shorthand for "identifier ,"


aahhh. Therein lies the misunderstandin g..
I thought it was short for 'wizard of..' ;-)

Jul 20 '05 #5
LRW wrote:
That's my problem, is I just don't know enough about class vs. id...or CSS
in general. I only started using them a few months ago as a replacement for
FONT tags.
Any good site recommendations to help explaing CSS to newbies?
I haven't actually needed such an intro for a long time, so I don't have
a handy list of them. A bit of googling turned up some links that might
prove useful:

<http://www.htmlhelp.co m/reference/css/>
<http://www.w3.org/MarkUp/Guide/Style>
Is the difference in class vs. id the use of the period vs. the pound sign
before the name?
That's the difference in how the style is defined, yes.

The difference in meaning is more important: An id is supposed to be
unique within the document, so a style that's defined with a "#" and an
id will only be applied to the single element that's identified by that
id. On the other paw, a style that's defined with a "." and class name
will be applied to any and all elements that are declared as belonging
to that class.
How else can I make two separate...clas ses for different link attributes
then? So I can have some hyperlinks with a certain size and color, and then
another set of hyperlinks with a different height and color? Is that not
with the pound sign? Or, do I do this:
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}
.notice a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-style: normal;
font-weight: normal;
color: #84D7FF;
text-decoration: underline;
}


Use the cascade, Luke... :-)

First, notice that the two styles above have quite a bit in common -
there's an opportunity here to eliminate some redundancy. First, let's
define a "base" style for all your anchors:

a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-decoration: underline;
}

Now, let's define a style that overrides the link color when the mouse
is hovering over an anchor:

a:hover {
color: #84D7FF;
}

Finally, define a "class" style for anchors of class "notice". This
class overrides the font-size attribute.

a.notice {
font-size: 9px;
}

You could also combine pseudo-classes and classes to define a different
"hover" color for "notice" anchors:

a.notice:hover {
color: #FFFFFF;
}

You'll notice in the above that there are some apparent conflicts. The
font-size attribute, for example, is defined for both "a" and "a.notice"
classes, and the color attribute for both "a:hover" and "a.notice:hover ".

Conflicts like this are resolved using a simple cascading rule: The most
specific selector "wins". The "a" style above, being applied to any
anchor element, is the least specific. Class selectors, like the ones
using "notice" above, are a bit more specific, being applied to only the
specified subset of anchor elements. A selector that uses an id, since
it's applied to only a single element, is the most specific of all.

The way this works in the above is, all the attributes listed in the
first and second styles are applied to un-classed anchor elements. For
an anchor with a class="notice" attribute, however, the two class
selectors are also applied; they're more specific, so the attributes in
them will "trump" any conflicting attributes that appear in the more
general styles listed first.

Hope this helps!

sherm--
Jul 20 '05 #6
LRW
"Sherm Pendley" <sp********@d ot-app.org> wrote in message
news:C3******** **********@news 2.news.adelphia .net...
I haven't actually needed such an intro for a long time, so I don't have
a handy list of them. A bit of googling turned up some links that might
prove useful:

<http://www.htmlhelp.co m/reference/css/>
<http://www.w3.org/MarkUp/Guide/Style>
SNIP!
Use the cascade, Luke... :-)

SNIP!

WOW! I mean, wow! That's great information! You just double or trippled my
understanding of CSS and really set me on the road to using them properly. I
really appreciate the time you put into your reply.
Thanks again!
Liam
Jul 20 '05 #7

"LRW" <dr***@NOSPAHMc elticbear.com> wrote in message
news:cr%Eb.6114 98$Fm2.552576@a ttbi_s04...
WOW! I mean, wow! That's great information! You just double or trippled my
understanding of CSS and really set me on the road to using them properly. I really appreciate the time you put into your reply.
Thanks again!


Another good intro site to CSS and HTML is htmldog.com, but it lacks in some
ways. Still, they start from the meaning/presentation division, and as
someone who knew a lot of HTML but not much CSS it was helpful to me, and I
still refer to it on ocassion.
Jul 20 '05 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
3400
by: LRW | last post by:
Below I'll paste my CSS and the HTML in question. But what's happening is, I'm trying to establish a link behavior for a class that's separate from the normal link class. I've established a: 's with no underline and then an underline for hover...but oddly, only ONE link will actually show the underline on hover. All the rest, even with the same HTML, won't pop up an underline. I just don't get it! If I could get any advice I'd really...
14
2481
by: slim | last post by:
hi all, whilst creating a mock-up site, i am trying to follow the rules and guidelines i have been digesting over the last few months with regards to css positioning and accessibility. well, i know the journey is far from over and i'm using this mock-up as a learning process. the problem stumping me at the moment can be seen here:
2
1827
by: Sheila King | last post by:
I have a test/mock-up page here: http://mathxy.com/dev/index.htm and I've set one link on the dark-blue menu bar the "Home" link that comes first and it is blue font, but should not be. Style sheet is here: http://mathxy.com/dev/default.css
4
1778
by: Mark | last post by:
Hi.. I changed some of my CSS, and now I get this strange problem in IE. See link: http://xailus.com/files/sample.gif. Left is firefox, what it should look like, right is IE. The footer even varies in size if you scroll or move it around or refresh and stuff. HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
3
3319
by: KimberlyM | last post by:
This has been driving me crazy. I hope someone can help. The site displays perfectly in FF but all div's do not show in IE. Please help me find the problem! Thanks! Here is my css. .node-unpublished, .comment-unpublished { background-color : #594133; } .preview .node, .preview .comment { background-color : #ffffea; }
3
2494
by: practicallymagic | last post by:
Hi there, I am really hoping someone out there can help me. I have found that my site doesn't display properly in IE7 or Firefox. I don't get a vertical scrollbar on the browser window. Also I seem to have another problem where all the page elements aren't placing themselves properly and the #wrap div seems to be setting itself as only 190px high!! I am baffled! Please help! Below is the CSS, and here's the URL www.art2murals.com ...
14
2022
by: Daniel Kaplan | last post by:
So my style sheet has many different types of LINK styles. And they all work fine on IE, even different styles on the same page. But in Firefox, all link throughout my site all follow JUST the first link class on any page. Any thoughts? As a side thought, in my style sheet I changed what I guess was the "Default" link style (as seen below). Was I wrong in doing that?
0
1261
by: mckenzie915 | last post by:
I'm having problems with the spacing of my navigation bar for IE7. It works in other browsers but drops down to a second line in IE7. Here is the page: http://www.honeymoonersreviewguide.com/index2.php Thanks so much, Michelle #nav-container { height: 28px;
2
3629
by: kheitmann | last post by:
OK, so I have a blog. I downloaded the "theme" from somewhere and have edited a few areas to suit my needs. There are different font themes within the page theme. Long story short, my "Text Posts" are supposed to be in the font: Georgia, but they are showing up in "Times New Roman"...blah! I can't find anything wrong in the code, but who am I trying to fool? I know nothing about this stuff. The code is below. The parts that I *think*...
0
8736
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9227
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9143
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8019
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6676
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4497
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4761
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3202
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2137
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.