a:focus a:active 2

[Hondy]

Can anyone tell me outright, is a:focus supported by IE, and by supported I mean is it bugged?

I have a CSS menu that works fine in FF but in IE the a:focus and a:active flickers on and off randomly when you tab through, it's fine in FF?

Thanks

Paul

 

[BillyRayPreachersSon]

AFAIK, IE does not support a:focus, but it does support a:active.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

IE does not support :focus, just like Dan said, but it treats :active just about the same way other browsers treat :focus. So, you could try working around that.

 

[BillyRayPreachersSon]

One noticable difference is that when tabbing to a link, IE doesn't add the active pseudo-class, whereas tabbing to a link in (for example) Firefox, would add the focus pseudo-class.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Hondy]

thanks guys

does this mean IE will ignore focus but FF will use it?
in this case it must be by a: active is playing up - are there any bugs with that and IE?

Thanks

Paul

 

[Hondy]

What do you mean when you say IE doesn't add the active pseudo class Dan?

 

[Vragabond]

:focus means that the styling will be applied to the element when element gets focus. FF will do that, IE will simply ignore the :focus styles. :active means that styling will be applied to the element when it is being actively used (clicking on it with mouse, pushing return/enter/space while it has focus) and will work like that in FF. In IE however :active will be applied throughout the time the element received focus after being clicked on. However, if you give the focus to the element without the mouse (by tabbing through the elements) IE will not apply :active stylings.

 

[BillyRayPreachersSon]

I mean that when you tab to a link, any style rules with the :active pseudo-class after them for that link are not "run"...

Unlike the :focus pseudo-class in Firefox.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Hondy]

Ok thanks

It's clear what you guys say, although I still can't figure out why in IE when I tab through, sometimes the active pseudo class appears to be applied. Moving the mouse around outside the menu, and tabbing seems to affect the flickering.

Odd...

 

[Hondy]

also sometime when I click the Active PS is applied, but sometimes it doesn't take effect until I move out of the menu DIV - but this seems random?

 

[BillyRayPreachersSon]

Do you have any JavaScript on your nav that could be affecting this?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Hondy]

none at all, purely css and html - it's only a layout page so there is mimimal content.

Here's my menu code if you could scan over it? I have split up the pseudos to see if it helps but it doesn't seem too.
The different colours are just to aid diagnosis - it works fine in Firefox though...
---

HTML DIV
<div id="leftCol">
<ul id="menuitems">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</div>

CSS

#leftCol {
display: block;
margin: 0px;
padding: 0px;
height: 500px;
width: 100px;
float: left;
text-align: left;
}

#menuitems {
text-align:left;
list-style-type: none;
padding: 0px;
margin: 0px;
line-height: 24px;
}

#menuitems a:link, #menuitems a:visited {
width: 100%;
text-decoration: none;
background-color: blue;
color: black;
display: block;
}

#menuitems a:focus {
background-color: red;
display: block;
}

#menuitems a:hover {
background-color: green;
display: block;
}

#menuitems a:active {
background-color: orange;
display: block;
}

 

[Vragabond]

You should clean up your css a bit. Redefining links as display block each time could be causing IE to choke (and is completely unnecessary as you're supposed to only add properties that change values):

#leftCol {
  margin: 0px;
  padding: 0px;
  height: 500px;
  width: 100px;
  float: left;
  text-align: left;
}

#menuitems {
  text-align: left;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
  line-height: 24px;
}

#menuitems a:link, #menuitems a:visited {
  width: 100%;
  text-decoration: none;
  background-color: blue;
  color: black;
  display: block;
}

#menuitems a:focus {
  background-color: red;
}

#menuitems a:hover {
  background-color: green;
}

#menuitems a:active {
  background-color: orange;
}

 

[Hondy]

yes you are correct, I have removed them, I was trying to fix another bug in IE (whitespace in a block display) but I left them in - still not working very well, perhaps it's my browser I'm using here.

Other than that, I'm learning how to do CSS, does the code look ok other than the now removed display blocks?

Thanks