Microsoft Windows Vista Community Forums - Vistaheads
Recommended Download



Welcome to the Microsoft Windows Vista Community Forums - Vistaheads, YOUR Largest Resource for Windows Vista related information.

You are currently viewing our boards as a guest which gives you limited access to view most discussions and access our other features. By joining our free community you will have access to post topics, communicate privately with other members (PM), respond to polls, upload content and access many other special features. Registration is fast, simple and absolutely free so , join our community today!

If you have any problems with the registration process or your account login, please contact us.

Driver Scanner

The elusive hover and <p>

microsoft.public.internetexplorer.general






Speedup My PC
Reply
  #1 (permalink)  
Old 10-31-2008
kurt sune
 

Posts: n/a
The elusive hover and <p>
I am having trouble with hover and <p> in IE6 and IE7.
I have reduced the problem to this:

Given a HTML-page like this:
<body>

<a>Number1</a>

<div id="content">

<a>Number2</a>

<p class="nav">

<a>Pnav1</a> <a>Pnav2</a>

</p>

<div class="nav">

<a>DIVnav1</a> <a>DIVnav22</a>

</div>

<br />

</div>

<a>Number3</a>

</body>


And a CSS like this:

a {font-size: 0.9em;}

a:link {color: red ; text-decoration: none;}

a:visited {color: gray; text-decoration: none;}

a:hover {color: red ; background-color: black; text-decoration: underline;}

a:active {color: red; text-transform: uppercase ; text-decoration:
underline;}

..nav a:hover {color: yellow ; background-color: black; text-decoration:
underline;}

..nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
sans-serif;text-decoration: none;text-transform: uppercase;padding: 5px;

margin: 0px 10px;border-style:solid;border-width: 1px;border-color:#542F17;}

p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}

/*p:hover {}*/



If I run this page and move the mouse over the text no hovering effect
occurs.

If I uncomment the last line in the CSS it works.



Can someone please explain this behaviour to me?



/k





Reply With Quote
Sponsored Links
  #2 (permalink)  
Old 10-31-2008
Daniel Crichton
 

Posts: n/a
Re: The elusive hover and <p>
kurt wrote on Fri, 31 Oct 2008 10:22:25 +0100:

> I am having trouble with hover and <p> in IE6 and IE7.
> I have reduced the problem to this:


> Given a HTML-page like this:
> <body>


> <a>Number1</a>


> <div id="content">


> <a>Number2</a>


> <p class="nav">


> <a>Pnav1</a> <a>Pnav2</a>


> </p>


> <div class="nav">


> <a>DIVnav1</a> <a>DIVnav22</a>


> </div>


> <br />


> </div>


> <a>Number3</a>


> </body>



> And a CSS like this:


> a {font-size: 0.9em;}


> a:link {color: red ; text-decoration: none;}


> a:visited {color: gray; text-decoration: none;}


> a:hover {color: red ; background-color: black; text-decoration:
> underline;}


> a:active {color: red; text-transform: uppercase ; text-decoration:
> underline;}


> .nav a:hover {color: yellow ; background-color: black; text-decoration:
> underline;}


> .nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
> sans-serif;text-decoration: none;text-transform: uppercase;padding:
> 5px;


> margin: 0px 10px;border-style:solid;border-width:
> 1px;border-color:#542F17;}


> p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}


> /*p:hover {}*/




> If I run this page and move the mouse over the text no hovering effect
> occurs.


> If I uncomment the last line in the CSS it works.




> Can someone please explain this behaviour to me?



Your <a> tags don't have the href attribute, so the hover action is never
triggered. If you change the, to <a href=""> then you'll find that it works.

--
Dan


Reply With Quote
  #3 (permalink)  
Old 10-31-2008
kurt sune
 

Posts: n/a
Re: The elusive hover and <p>
Thanks, you are right about that.

But why does the inclusion of "p:hover {}"
triggers the hover-action on not complete <a>-tags?

/k


"Daniel Crichton" <msnews@worldofspack.com> wrote in message
news:%230emjT1OJHA.588@TK2MSFTNGP06.phx.gbl...
> kurt wrote on Fri, 31 Oct 2008 10:22:25 +0100:
>
>> I am having trouble with hover and <p> in IE6 and IE7.
>> I have reduced the problem to this:

>
>> Given a HTML-page like this:
>> <body>

>
>> <a>Number1</a>

>
>> <div id="content">

>
>> <a>Number2</a>

>
>> <p class="nav">

>
>> <a>Pnav1</a> <a>Pnav2</a>

>
>> </p>

>
>> <div class="nav">

>
>> <a>DIVnav1</a> <a>DIVnav22</a>

>
>> </div>

>
>> <br />

>
>> </div>

>
>> <a>Number3</a>

>
>> </body>

>
>
>> And a CSS like this:

>
>> a {font-size: 0.9em;}

>
>> a:link {color: red ; text-decoration: none;}

>
>> a:visited {color: gray; text-decoration: none;}

>
>> a:hover {color: red ; background-color: black; text-decoration:
>> underline;}

>
>> a:active {color: red; text-transform: uppercase ; text-decoration:
>> underline;}

>
>> .nav a:hover {color: yellow ; background-color: black; text-decoration:
>> underline;}

>
>> .nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
>> sans-serif;text-decoration: none;text-transform: uppercase;padding:
>> 5px;

>
>> margin: 0px 10px;border-style:solid;border-width:
>> 1px;border-color:#542F17;}

>
>> p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}

>
>> /*p:hover {}*/

>
>
>
>> If I run this page and move the mouse over the text no hovering effect
>> occurs.

>
>> If I uncomment the last line in the CSS it works.

>
>
>
>> Can someone please explain this behaviour to me?

>
>
> Your <a> tags don't have the href attribute, so the hover action is never
> triggered. If you change the, to <a href=""> then you'll find that it
> works.
>
> --
> Dan
>



Reply With Quote
  #4 (permalink)  
Old 10-31-2008
Daniel Crichton
 

Posts: n/a
Re: The elusive hover and <p>
It didn't on IE7 on XP SP3 here on my PC. What browser are you using to test
it? Do you have any add-ins installed? What happens if you try in
"No-Addons" mode?

Dan

kurt wrote on Fri, 31 Oct 2008 14:16:07 +0100:

> Thanks, you are right about that.


> But why does the inclusion of "p:hover {}"
> triggers the hover-action on not complete <a>-tags?


> /k



> "Daniel Crichton" <msnews@worldofspack.com> wrote in message news:%230emjT1OJHA.588@TK2MSFTNGP06.phx.gbl...
>> kurt wrote on Fri, 31 Oct 2008 10:22:25 +0100:


>>> I am having trouble with hover and <p> in IE6 and IE7.
>>> I have reduced the problem to this:


>>> Given a HTML-page like this:
>>> <body>


>>> <a>Number1</a>


>>> <div id="content">


>>> <a>Number2</a>


>>> <p class="nav">


>>> <a>Pnav1</a> <a>Pnav2</a>


>>> </p>


>>> <div class="nav">


>>> <a>DIVnav1</a> <a>DIVnav22</a>


>>> </div>


>>> <br />


>>> </div>


>>> <a>Number3</a>


>>> </body>



>>> And a CSS like this:


>>> a {font-size: 0.9em;}


>>> a:link {color: red ; text-decoration: none;}


>>> a:visited {color: gray; text-decoration: none;}


>>> a:hover {color: red ; background-color: black; text-decoration:
>>> underline;}


>>> a:active {color: red; text-transform: uppercase ; text-decoration:
>>> underline;}


>>> .nav a:hover {color: yellow ; background-color: black;
>>> text-decoration:
>>> underline;}


>>> .nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
>>> sans-serif;text-decoration: none;text-transform: uppercase;padding:
>>> 5px;


>>> margin: 0px 10px;border-style:solid;border-width:
>>> 1px;border-color:#542F17;}


>>> p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}


>>> /*p:hover {}*/




>>> If I run this page and move the mouse over the text no hovering
>>> effect occurs.


>>> If I uncomment the last line in the CSS it works.




>>> Can someone please explain this behaviour to me?



>> Your <a> tags don't have the href attribute, so the hover action is
>> never triggered. If you change the, to <a href=""> then you'll find
>> that it works.


>> --
>> Dan




Reply With Quote
  #5 (permalink)  
Old 10-31-2008
Daniel Crichton
 

Posts: n/a
Re: The elusive hover and <p>
kurt wrote on Fri, 31 Oct 2008 14:16:07 +0100:

> Thanks, you are right about that.


> But why does the inclusion of "p:hover {}"
> triggers the hover-action on not complete <a>-tags?


> /k


I just though of something else - what DOCTYPE are you using in the HTML
page? You didn't provide a complete HTML document, just parts - the DOCTYPE
declaration is important, as IE7 only supports :hover on non-A elements if
the DOCTYPE forces it into strict mode (I only just discovered this). Adding
that to my test page did cause IE to kick in the hovers when that last line
was added, so I'll assume that's what you are using too. It would have been
more helpful if you'd provided a complete document rather than just snippets


I have no idea why this happens though.

--
Dan


Reply With Quote
  #6 (permalink)  
Old 11-03-2008
kurt sune
 

Posts: n/a
Re: The elusive hover and <p>
Hi, thaenks again for answer

I use Internet explorer 7.0.5730.13

The complete code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; " />

<title></title>

<style type="text/css">

/*p:hover {background-color: red; }*/

a:link {color: red ; text-decoration: none;}

a:visited {color: gray; text-decoration: none;}

a:hover {color: red ; background-color: black; text-decoration: underline;}

a:active {color: red; text-transform: uppercase ; text-decoration:
underline;}

a {font-size: 0.9em;}

..nav a:hover {color: yellow ; background-color: green; text-decoration:
underline;}

..nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
sans-serif;text-decoration: none;text-transform: uppercase;padding:
5px;margin: 0px 10px;border-style:solid;border-width:
1px;border-color:#542F17;}

p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}

p:hover {}

</style>

</head>

<body>

<a href="index.html">Number1</a>

<a>Number1felaktig</a>

<div id="content">

<a>Number2</a>

<p class="nav">

<a href="index.html">Pnav1</a> <a>Pnav2</a>

</p>

<div class="nav">

<a>DIVnav1</a> <a>DIVnav22</a>

</div>

<br />

</div>

<a>Number3</a>

</body>

</html>


/k


"Daniel Crichton" <msnews@worldofspack.com> wrote in message
news:OFUS$H2OJHA.1164@TK2MSFTNGP03.phx.gbl...
> kurt wrote on Fri, 31 Oct 2008 14:16:07 +0100:
>
>> Thanks, you are right about that.

>
>> But why does the inclusion of "p:hover {}"
>> triggers the hover-action on not complete <a>-tags?

>
>> /k

>
> I just though of something else - what DOCTYPE are you using in the HTML
> page? You didn't provide a complete HTML document, just parts - the
> DOCTYPE declaration is important, as IE7 only supports :hover on non-A
> elements if the DOCTYPE forces it into strict mode (I only just discovered
> this). Adding that to my test page did cause IE to kick in the hovers when
> that last line was added, so I'll assume that's what you are using too. It
> would have been more helpful if you'd provided a complete document rather
> than just snippets
>
> I have no idea why this happens though.
>
> --
> Dan
>



Reply With Quote
  #7 (permalink)  
Old 11-04-2008
Daniel Crichton
 

Posts: n/a
Re: The elusive hover and <p>
I've had another think about this, and I think I can see why you need the
p:hover. Until you have that, the p tags have no hover capability, they are
just normal paragraph tags. The a tags don't have a hover because there is
no href, so you get no reaction when you move the mouse over the tags. But
when you add the p:hover to the CSS, you are now turning on the hover
capability for the p tags, and this is inherited by the nested a tags - and
that's why your hover styling then works on those a tags. It makes sense, to
me at least, why you need that p:hover {} in the CSS when you don't have
href attributes in your anchor tags.

So, you have 2 choices here - keep the p:hover in the CSS, or add href to
your anchors. If they really are supposed to be links, there's no reason not
to define the href attribute. If they're not links, why are you using anchor
tags around the text?

Dan

kurt wrote on Mon, 3 Nov 2008 11:06:40 +0100:

> Hi, thaenks again for answer


> I use Internet explorer 7.0.5730.13


> The complete code:
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


> <html xmlns="http://www.w3.org/1999/xhtml">


> <head>


> <meta http-equiv="Content-Type" content="text/html; " />


> <title></title>


> <style type="text/css">


> /*p:hover {background-color: red; }*/


> a:link {color: red ; text-decoration: none;}


> a:visited {color: gray; text-decoration: none;}


> a:hover {color: red ; background-color: black; text-decoration:
> underline;}


> a:active {color: red; text-transform: uppercase ; text-decoration:
> underline;}


> a {font-size: 0.9em;}


> .nav a:hover {color: yellow ; background-color: green; text-decoration:
> underline;}


> .nav a {font-size:2em font: 1.3em "Trebuchet MS", verdana,
> sans-serif;text-decoration: none;text-transform: uppercase;padding:
> 5px;margin: 0px 10px;border-style:solid;border-width:
> 1px;border-color:#542F17;}


> p {font-family: Verdana, Arial, sans-serif;font-size: 0.9em;}


> p:hover {}


> </style>


> </head>


> <body>


> <a href="index.html">Number1</a>


> <a>Number1felaktig</a>


> <div id="content">


> <a>Number2</a>


> <p class="nav">


> <a href="index.html">Pnav1</a> <a>Pnav2</a>


> </p>


> <div class="nav">


> <a>DIVnav1</a> <a>DIVnav22</a>


> </div>


> <br />


> </div>


> <a>Number3</a>


> </body>


> </html>



> /k



> "Daniel Crichton" <msnews@worldofspack.com> wrote in message news:OFUS$H2OJHA.1164@TK2MSFTNGP03.phx.gbl...
>> kurt wrote on Fri, 31 Oct 2008 14:16:07 +0100:


>>> Thanks, you are right about that.


>>> But why does the inclusion of "p:hover {}"
>>> triggers the hover-action on not complete <a>-tags?


>>> /k


>> I just though of something else - what DOCTYPE are you using in the
>> HTML page? You didn't provide a complete HTML document, just parts -
>> the
>> DOCTYPE declaration is important, as IE7 only supports :hover on
>> non-A elements if the DOCTYPE forces it into strict mode (I only
>> just discovered this). Adding that to my test page did cause IE to
>> kick in the hovers when that last line was added, so I'll assume
>> that's what you are using too. It would have been more helpful if
>> you'd provided a complete document rather than just snippets


>> I have no idea why this happens though.


>> --
>> Dan




Reply With Quote
  #8 (permalink)  
Old 11-06-2008
kurt sune
 

Posts: n/a
Re: The elusive hover and <p>
THANKS!

now I think I understand.

/k

"Daniel Crichton" <msnews@worldofspack.com> wrote in message
news:O07CLolPJHA.588@TK2MSFTNGP06.phx.gbl...
> I've had another think about this, and I think I can see why you need the
> p:hover. Until you have that, the p tags have no hover capability, they
> are just normal paragraph tags. The a tags don't have a hover because
> there is no href, so you get no reaction when you move the mouse over the
> tags. But when you add the p:hover to the CSS, you are now turning on the
> hover capability for the p tags, and this is inherited by the nested a
> tags - and that's why your hover styling then works on those a tags. It
> makes sense, to me at least, why you need that p:hover {} in the CSS when
> you don't have href attributes in your anchor tags.
>
> So, you have 2 choices here - keep the p:hover in the CSS, or add href to
> your anchors. If they really are supposed to be links, there's no reason
> not to define the href attribute. If they're not links, why are you using
> anchor tags around the text?
>
> Dan
>



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

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Hover buttonds again... OR microsoft.public.internetexplorer.general 0 09-16-2008 01:44
Hunt for the elusive rootkit 'Rustock.C' revealed Steve Security News 0 07-15-2008 18:00
Pop-Up Description/Hover Box Editing? kacchin microsoft.public.windows.vista.general 0 06-21-2008 04:15
Cell-based "Roadrunner" Tops Elusive Petaflop Mark Steve General Technology News 0 06-09-2008 03:30




All times are GMT +1. The time now is 12:04.




Driver Scanner - Free Scan Now

Vistaheads.com is part of the Heads Network. See also XPHeads.com , Win7Heads.com and Win8Heads.com.


Design by Vjacheslav Trushkin for phpBBStyles.com.
Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.0 RC 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120