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=http://www.webdeveloper.com/forum/archive/index.php/"./stylesheet.css" />
</head>
<body>
<div id="switch">
<ul>
<li class="home">| <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">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,
Rpure css popups (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">http://www.meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->)The shortest, but best answer ever.
Ta Fang,
REric 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.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).
RIt 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.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,
RWell 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!Let's just put it down to IE being awkward!
Sounds good to me.
R
Here is the HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"./stylesheet.css" />
</head>
<body>
<div id="switch">
<ul>
<li class="home">| <a href=http://www.webdeveloper.com/forum/archive/index.php/"#">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,
Rpure css popups (<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/popups/demo.html">http://www.meyerweb.com/eric/css/edge/popups/demo.html</a><!-- m -->)The shortest, but best answer ever.
Ta Fang,
REric 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.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).
RIt 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.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,
RWell 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!Let's just put it down to IE being awkward!
Sounds good to me.
R