PDA

Click to See Complete Forum and Search --> : Can anyone get this to work in IE?

richiebman
06-21-2004, 08:20 AM
The following code works beautifully in Firefox, Mozilla, Opera, Netscape 6.0 + but unsuprisingly not it any IE. Sigh. I've nearly given up.

Here is the HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
</head>
<body>
<div id="switch">
<ul>
<li class="home">| <a href="#">Home<span>» Home</span></a> |</li>
</ul>
</div>
</body>
</html>


Here is the CSS:

#switch li.home {
list-style:none;
position:absolute;
left:15px;
top:50px;
font-family:arial, sans-serif;
font-size:10pt;
font-weight:bold;
}

#switch li.home a {
color:#000000;
text-decoration:none;
}

#switch li.home a:hover {
color:#C00C00;
text-decoration:none;
}

#switch li.home a span, #switch li.home a:hover span {
position:absolute;
left:0px;
top:100px;
}

#switch li.home a span {
width:0px;
height:0px;
font-family:arial, sans-serif;
font-size:0pt;
color:#FFFFFF;
font-weight:bold;
text-decoration:none;
}

#switch li.home a:hover span {
width:150px;
height:50px;
font-family:arial, sans-serif;
font-size:24pt;
color:#E0DFE3;
font-weight:bold;
text-decoration:none;
}

If it can't be done, any other solution producing a similar effect that works in the browsers I mentioned would be welcomed. Must be in CSS though and not Javascript for example.

Cheers,
R
Fang
06-21-2004, 09:07 AM
pure css popups (http://www.meyerweb.com/eric/css/edge/popups/demo.html)
richiebman
06-21-2004, 10:15 AM
The shortest, but best answer ever.

Ta Fang,
R
DaveSW
06-21-2004, 10:15 AM
Eric Meyer's CSS poprups as linked to above only work in IE6+, so if you want a reliable way of doing it you'll need to look elsewhere.
richiebman
06-21-2004, 10:36 AM
Errr.....the script that was related to the above link has worked in IE 5.0 upwards for me. Just tried it and it's great. I was pretty close with my code montage but only needed to slap in a

display:none;

in place of the code in

#switch li.home a span {

(and display:block; in its related a:hover span).

However having said that, it doesn't work in Netscape 6.0 (works in 6.2). Not sure whether this browser has a problem with display:none or whether it is my positioning. I'm not too worried at the mo though, as things always disappear in NS 6.0 and with tweaking it always seems to sort itself out.

Also COME ON ENGLAND (football....I mean soccer euro2004 game on tonight).

R
DaveSW
06-22-2004, 03:19 AM
It didn't work for me on an original install of IE5.5 when I followed the instructions.
Maybe I just didn't follow them too well.
richiebman
06-22-2004, 04:57 AM
I've had a look at it again and found out why IE has a problem with Meyers script. I don't understand why though, but it builds my frustration with the IE browser as it can be so petty and basically $%&*^%& &^$£.

However it does work if you put in the following code (aswell as puting in all that display:none; stuff):

#switch li.home a {
color:#000000;
text-decoration:none;
border:0px solid #FFF;
}

#switch li.home a:hover {
color:#C00C00;
text-decoration:none;
border:0px double #FFF;
}

The only change is the border code. Remove that and it doesn't work in IE. Why??? No idea.

So you were right in some ways DaveSW. And I might be wrong, coz I've worked it out this morning with a bit of a hangover after last nights excellent, excellent game. WOO HOO!!!!

Cheers,
R
DaveSW
06-22-2004, 05:47 AM
Well I've cut up his code on my 5.5 machine and the line that makes the difference is the background on a:hover..

LOL

Let's just put it down to IE being awkward!
richiebman
06-22-2004, 06:55 AM
Let's just put it down to IE being awkward!

Sounds good to me.
R ;)