Css hover doesn't work with ie

HTML & CSS
1

Hi,

I am relatively new to css.

I define the link a:link, a:visited, a:active, a:hover on css file, for some reason the a href link inside td element doesn’t do the behaviour like what’s defined on css file. but it works fine on firefox and chrome.

here is the link entry on css file.
a:link
{
text-decoration: none;
color: black;
border-bottom: solid 1px #c5dc09;
}

a:visited
{
text-decoration: none;
color: black;
border-bottom: solid 1px #c5dc09;
}

a:active
{
text-decoration: none;
color: black;
border-bottom: solid 1px #c5dc09;
}

a:hover
{
text-decoration: none;
color: black;
border-bottom: solid 1px #0b1a66;
}

and here is the code bit that doesn’t seems to work on ie.
<table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”>
<tr>
<td valign=“bottom”><p class=“heading1”>Data Vault</p></td>
<td valign=“bottom” align=“right”><a href=“Javascript:newWindow(‘solutions/infrastructure/Pacnet-DataVault-FAQ.PDF’)”><img src=“images/misc/acrobat_icon.gif” border=“0”>FAQ</a></td>
</tr>
</table>

on firefox and chrome the border-bottom is displayed and change color when I hover, but on ie it doesn’t show border-bottom line at all.

you can view the page on http://www.elixir.com.au/staging/solutions.cfm?docId=7

on firefox and chrome the border-bottom line is displayed below FAQ on the same line as Data Vault, but on ie there is no underline, but I put the same href outside the table the underline is displayed on ie (the faq under the data vault heading).

any reason why ie not inherit the setting, I also found ie do the same with font as well, I have to define font entry for every single html tag to get it to display the correct font.

but with the link behaviour I don’t know what is the correct syntax to define it on ie.

I try to define the behaviour with the following heading entry, but doesn’t work.

td a:link { … }
td.a:link { … }
td>a:link { … }

I try put id on the table <table id=“id1” … also doesn’t work.
#id1 td { … }
#id1 td a:link { … }
#id1 td.a:link { … }
#id1 td>a:link { … }

I appreciated if you could help me or point me on the right direction to fix this issue, please.

NB: I tested on ie8 and ie9 both version doesn’t work, I didn’t test on earlier version on ie.

Thank you in advance.

Regards

  • Haris -
2

Hi,

It works fine for me in IE8 and 9 but IE6 and 7 don’t show the border.

Add position:relative as IE 7 and under won’t show full padding and borders unless position:relative is added.


td a{position:relative}
3

Hi Paul,

Thank you for code, it works now.
I also accidently found that I need to change cellpadding=0 to cellpadding=1, do the trick on ie as well.

Thanks again.

Regards

  • Haris -
4

  1. you only need to state what’s DIFFERENT off the parent with psuedo states – there is NO reason to restate the same values over and over again.

  2. active being the keyboard state should probably be the SAME as hover… and I’d suggest targeting :focus as well…


a {
	position:relative;
	text-decoration: none;
	color: black;
	border-bottom: solid 1px #c5dc09;
}

a:active,
a:focus,
a:hover {
	border-bottom: solid 1px #0b1a66;
}

  1. You can get the functional equivalent of “cellpadding=0 cellspacing=0 border=0” in CSS by simply saying “border-collapse:collapse; border:0;” This is why in modern HTML there is no border attribute.

  2. If all your td are going to be valign=bottom, set that with vertical-align ONCE in the CSS instead of twice in the markup.

  3. if that first one is a heading, what’s with the paragraph tag for nothing and why isn’t that a TH? (table heading) – meaning you’d not need the P or the class.

  4. with only two columns and one row, what exactly even makes that tabular data in the first place? (even if you had multiple occurances I’m not sure that’s actually tabular data!)

I’d have to see more of it to be sure, but assuming that is tabular data, the markup should probably be:


<table id="dataVault">
	<tr>
 		<th>Data Vault</th>
		<td>
			<a href="solutions/infrastructure/Pacnet-DataVault-FAQ.PDF">
				<img
					src="images/misc/acrobat_icon.gif"
					alt="Data Vault FAQ"
				/>
				FAQ
			</a>
		</td>
 </tr>
</table>

Swinging an axe at the javascript to do something that’s deprecated for a REASON – though I’d probably set up headers server side to force download of the PDF since I can’t STAND “PDF in the browser”… in any case that’s not the real important part – more important is using a table heading tag for the heading, meaningful alt text, getting the deprecated BORDER attribute out of there, and since you now have two different tags inside the table, they’d no longer need classes since you could target them off the parent ID.

5

If you are going to specify active and hover separately then hover needs to come before active. You can’t have an active link unless either the mouse is hovering over it when a button on the mouse is pressed OR the link has the focus when the enter key is pressed - so if active comes before hover and focus then it will never be applied as the hover or focus state which also applies at that time will override it.

6

Which is part of why I’d never set them to different values in the first place and instead set them together…

7

Hi,

Thank you for all the reply and tips.

deathshadow60, the reason I use table is for the heading sections, I need to display the heading title on the left align and the FAQ on the right align on the same line. I can’t find a way for css that I know of to do this so I use table instead. I am still new to css.
as for the th I didn’t realise that I can mix th and td from with in the same tr tag, from what I know and example on the web under tr tag normally either have all th or all td so that’s the reason I use class to specify different font.

I just wondering if any one could recommend a good css book that cover from beginner to the more advance css that show real world example (with good web design) as well not just the basic theory, for example I can’t find how to do my heading on css books, it would be good if there is book that cover this and show to build a good design website as example from start to finish so I can see how it ties in together. all the books that I saw on the book store is only show simple css like setting font, right align text or left align text, etc… but not align 2 elements, which I need to know to display the header section.

Thank you.

Cheers

  • Haris -
8

The word you’re looking for is float. You float them next to each-other. You could also set inline-block and set a width on the first one – you’d have to have both

If ALL that’s going into the table are those two elements, it is VERY wrong to use a table for it. The key to good HTML and CSS practices is saying what things ARE, not what they look like in the markup – what it looks like is CSS’ job. If it’s a header, you use the numbered heading tags as that’s NOT tablular data (I don’t think… I’d have to see what comes after it to say for sure).

I used to recommend the Sitepoint Book Build Your Own Website The Right Way Using HTML & CSS by Ian Lloyd, but they released a new version filled with HTML 5 idiocy so I can no longer recommend any book on the market – IF you can find first or second edition of that book it’s one of the few for those starting out that actually makes any sense – at least the first half of the book before it starts talking about slapping nonsense like Google Analytics and other off-site stuff into the page.

9

You need to set them to different values if you want to create a button press effect using CSS as the border needs to be changed only for :active and not for :hover as hover means they haven’t actually pressed the button yet but are just hovering their mouse over it.

The settings always go in the order :link, :visited (:hover and :focus either way around) :active as each is more specific and includes the ones before. Really easy to remember (LoVe HAte gives the order for all but :focus).

10

I’ve never understood using :active for that – since when I click on a button or link I usually expect it to navigate me away from the page… Since we’re talking anchors… Probably why certain legacy browsers use it for keyboard nav instead of :focus. (though I forget which ones that was…) – it’s why I’ve always set :active, :focus and :hover to the same values… the “press” effect in particular being utterly pointless on a anchor since the browser shouldn’t be so slow you’d EVER actually see it.

Well, unless you’re on a buggy festering pile of open sores like FF.

11

It should last for as long as you actually hold the mouse button down for. If you were to change your mind while still holding the mouse button down and move the mouse off of the link before releasing the button then you stay on the same page. It has nothing whatever to do with which browser you are using - they all work this way with :active. Hold the mouse down for an hour on a link and the :active appearance will display and the page will not change until you release the button.

Anyway, there isn’t anything else to use :active for other than how you want things to look during the period the button is depressed. Also no browser unloads the page so quickly that you can’t see both the :active change and change back as the button is pressed and released no matter how quickly you do it. You must just never have actually seen a web page that actually uses :active properly.

Also if you set the same value for :active as you do for :hover and :focus then you have unnecessary code since if it is :active then it is also either :hover or :focus as well and so the :active reference becomes superfluous.

12

Funny, :active untrips in both Opera and IE when you drag here – though you drag the entire text since you can drop it as a link anywhere (in opera that includes making buttons on any toolbar)… so …

Until you move the mouse. so… uhm, no.

There are browsers out there that don’t know :focus and/or don’t use it. Mind you, I think that’s browsers from before FF or Konqueror were twinkles in a floss fanboy’s eye… but with the number of mobiles built on ancient engines, it’s better safe than sorry.

It’s just not an effect I’d ever see as useful on a website for what it’s “for” – and I ONLY include it for keyboard navigators on old UA’s – NOT for the click state.