15 replies [Last post]
dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

I've nabbed the CSS from

http://www.stunicholls.myby.co.uk/menus/menuseven.html

to display information when you hover over a link.

[see below for the code]

Works fine in Firefox... but not in IE6. Whereas Stu's original does.

I'm probably being blind, but I can't see what I've done differently...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

doddnetwork
Offline
Regular
Last seen: 15 years 42 weeks ago
Joined: 2005-01-03
Posts: 15
Points: 0

Hovering display whatsits

http://www.meyerweb.com/eric/css/edge/popups/demo.html

This should help you I think.

Just change the poitioning etc...

Couldn't see your example??? didn't load... Might be my impatience

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Hovering display whatsits

Example definitely there. Well, from what I can see.

Yeah, that's almost exactly what I've done; I guess there must be some other CSS of mine that's interfering. Ho hum, will look deeper when I've got time...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Mælstrøm
Offline
Regular
Germany
Last seen: 13 years 27 weeks ago
Germany
Timezone: GMT-1
Joined: 2005-01-02
Posts: 46
Points: 0

Pseudo-Class Problem

Might be the problem that Ie does not recognize Pseudo-classes as "hoverable" Wink

Have a look at this article, maybe the java snippet is what you need:

http://www.alistapart.com/articles/horizdropdowns/

- How many Sith does it take to screw in a light bulb?
- Only two a master, and an apprentice!

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Re: Pseudo-Class Problem

Mælstrøm wrote:
Might be the problem that Ie does not recognize Pseudo-classes as "hoverable" Wink

It does recognise a:hover though, which is all I've been using...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Hovering display whatsits

I've chopped the example down to the following, which still won't work under IE...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>York University Karting Club</title>
	<style type="text/css">
		#timetable a {
			position : relative;
			display : block;
			font-size : xx-small;
			color : black;
		}


		#timetable a span {
			display : none;
		}

		#timetable a:hover span {
			position: absolute;
			display:block;
			left:0px;
			top:0px;
			padding:5px;
			width:200px;
			height : 100px;
			background-color:#aff;
			color:#000;
			border:1px solid #000;
		}
	</style>
</head>

<body>
	<table id="timetable">
	<tbody>
	<tr>
		<td style="width: 15%;">9.15</td>
		<td style="width: 17%;" class="n2">
			<a class="timetableLink" href="blah.html">yes?<span>MW, PV</span></a>
		</td>
	</tr>
	</tbody></table>
</body></html>

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hovering display whatsits

Think I've just had a minor nervous breakdown, couldn't see what on earth was wrong even with a copy of a popup I had written some time ago open on the desktop :roll: then it dawned on me try adding:

#timetable a:hover{display:block;}
to the rules, that should work.
(Although you have probably arrived at this by now)
I'm going to have a lie down for a while to try and recover from my inability to see whats in front of my nose.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Hovering display whatsits

Send me the psychaiatrists' bill Wink

But that doesn't seem to get it working for me in IE6... still haven't looked at it fully myself yet, damn work. Hopefully will sort the thing later.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hovering display whatsits

Oh dam forgot the :
#timetable a:link

Almost had another breakdown then when you said it didn't work Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Hovering display whatsits

Sorted!

The problem was I'd directly set the A to relative, whereas Stu had his A wrapped in a DIV set to relative.

Cor, it's the subtle differences...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hovering display whatsits

Hm, I had removed the relative, so do you mean that you got it working just by wrapping in a relative div ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 24 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Hovering display whatsits

Interesting discussion here. I recently went through some of this dealing with a question about CSS popups in:
http://www.csscreator.com/css-forum/ftopic7101.html&highlight= I thought, "oh, I'll have this sorted in a minute or two." :roll: This issue of position:relative is critical to getting any of these popups to work. In addition I have found that for popups from floated elements, you have to apply Tony's autoclearing trick to the parent div - I couldn't get a regular <br clear="all"> to provide the same functionality.

There is weird stuff out there on the edge, man!

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Hovering display whatsits

I've gotta see if I can remember what I just did now!

I ended up (after removing the crap) with:

#timetable A {
	display : block;
}

#timetable .relBox {
	position:relative;
}

#timetable A SPAN {
	display:none;
}

#timetable A:hover {
	width : 100%;
}

#timetable A:hover SPAN {
	position: absolute;
	display:block;
	left:0px;
	top:1.5em; 
	padding:5px;
	width:200px;
}

which worked.

If you had display:block in both #timetable A and #timetable A:hover IE wouldn't show anything. Removing both also displayed nothing; if you kept the block in A:hover and removed it from A, IE showed it fine, but FireFox wobbled on mouseover, changing from inline to block.

Now all of the A's, hoevered, links or whatnot are block, but the width:100% (any width does mind you) keeps IE (and my hairline) happy.

Why? Who knows. But it works here, for now...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hovering display whatsits

Well I'm a little confused as in this case a div positioned relative actually seems to have no bearing on the matter it will work with or without what IE seems to need is the the anchor defined as a link and the hover displayed block .
But it is an interesting little problem as before now I had never had problems getting this to work but I guess that I always define my anchors fully and display:block everything

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

Hovering display whatsits

Hugo wrote:
I guess that I always define my anchors fully and display:block everything

Yeah, I'm lazy, which evidently makes life difficult for me! Tongue

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Hovering display whatsits

Yep I agree, what seems critical is the rule on the hover; as you rightly point out although display block works it causes problems in FF but width seems fine all hold true even without a relative positioned div ?
although have to say that you can get IE to work with display:block in both #timetable a and #timetable a:hover if the a is a:link

But this just proves what a tricky little thing this can be :roll:

I just define everything out of panick I think, probably so relieved it's working that I leave well enough alone Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me