Topic awaiting preservation: CSS thingy . . . (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=7880" title="Pages that link to Topic awaiting preservation: CSS thingy . . . (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: CSS thingy . . . <span class="small">(Page 1 of 1)</span>\$

YoBoyE Nervous Wreck (II) Inmate From: Insane since: Sep 2001	posted 10-12-2001 02:20 on the microsoft webpage ( http://www.microsoft.com ), on the left menu, there's a thing that when you mousover a link, it changes the background of the link to grey with a border. Ive looked at the css and tried to get it to work on my site, but it doesnt do anything. could someone try to help me out? thanks. Eric Hesterman
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 10-12-2001 02:35 here's the most simplified code that should do the trick: var DOM = (document.getElementById)?true:false, IE = false, NN = false; if (!DOM) IE = (document.all)?true:false; function Active(objId) { if (!DOM && !IE) return; var theobj; if (DOM) theobj = document.getElementById(objId).style; else if (IE) theobj = document.all[objId].style; theobj.background='#FFF'; theobj.border = '1px solid #000'; } function Plain(objId) { if (!DOM && !IE) return; var theobj; if (DOM) theobj = document.getElementById(objId).style; else if (IE) theobj = document.all[objId].style; theobj.background='#888'; theobj.border = '0px'; } ... in the HTML ... <p id="simplepar"><a href="somewhere.htm" onmouseover="Active('simplepar');" onmouseout="Plain('simplepar');">click here!</a></p> It won't work in NN. NN simply can't support it.
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 10-12-2001 02:36 This is a whole lot of code for that technique, a lot of it propietary to MS the trick is the line in the CSS that says behavior: url(/library/flyoutmenu/default.htc); That allows CSS to call a Javascript (or in this case JScript) DHTML function The main chunk is here http://www.microsoft.com/library/flyoutmenu/default.htc :[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:
Wakkos Maniac (V) Mad Scientist From: Azylum's Secret Lab Insane since: Oct 2000	posted 10-12-2001 07:41 I'm using a class: div.banner a, div.banner em { display: block; margin: 0 0.5em; } div.banner a, div.banner em { border: 1px 1px 1px 1px #900 } div.banner a:first-child { border-top: none} div.banner em { color: #6E6E6E} div.banner a:link { text-decoration: none; color:#000000; } div.banner a:visited { text-decoration: none; color: #000000 } div.banner a:hover { color:black; text-decoration:underline overline;BACKGROUND-COLOR: #320808} Is this bad? I mean, if I don't missunderstood the question, you want to make the bgcolor be gray and lines on mouse over, does this code works for me, but if Slime said that one, there should be something wrong with mine, can somebody explain please??
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-12-2001 11:44 AS I said over in the GN I'd just use A: hover - you can simulate this code: a:link, a:visited { border: 0px; background-colour: #888; } a:hover { border: 1px solid #000; background-colour: #888; } This might jump around a little so you might want to adjust padding/margins to get it stationary. Emps You're my wife now Dave
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 10-12-2001 16:00 The reason I gave my solution was because I believed he wanted more than just the hyperlink to be changed on hover, he wanted the entire containing element (like a P tag or a TD tag) to be changed, so that the color changes are the entire width of the menubar (see www.microsoft.com ). Technically, one should be able to say TD:hover {stuff} just like people so often do with A:hover. But the :hover pseudo-class isn't widely supported yet, I don't know if even IE supports it (except for with hyperlinks, as it was originally intended for use for).
Wakkos Maniac (V) Mad Scientist From: Azylum's Secret Lab Insane since: Oct 2000	posted 10-12-2001 16:44 So, I'm not wrong if i use that in a Hyperlink??
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-12-2001 16:45 Slime: Just curious but can't you get the effect by using A: hover and making the link 100% wide or the width of the contraining box if that is fixed width? I'm just curious - I'd use something like onmouseover="this.className='elementOver'" on the TD, P or DIV the link is in if that wasn't possible. I suspect neither of these approaches works in all recent browsers. Emps You're my wife now Dave
Slime Lunatic (VI) Mad Scientist From: Massachusetts, USA Insane since: Mar 2000	posted 10-12-2001 16:48 Yup, Wakkos, your way should work, it just might not take up 100% of the width. I'm not sure if you can set a hyperlink to 100% width... maybe someone should try it. You might have to specify display:block; for the hyperlink.
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-12-2001 17:47 Slime: Good point. This works in IE5: code: <html> <head> </head> <style> a:link { width: 100%; background-color: black; color: white; } a:hover { background-color: yellow; color: black; } </style> <body> <a style="width:100%; background-color:blue; color:white;" href="someplace.com">link link</a> <br /> <a href="someplace.com">link link</a> <body> </html> Emps You're my wife now Dave
Emperor Maniac (V) Mad Scientist with Finglongers From: Cell 53, East Wing Insane since: Jul 2001	posted 10-12-2001 17:55 And it works fine with borders in IE5: www.theemperor.f2s.com/asylum/linktest.html Emps You're my wife now Dave
YoBoyE Nervous Wreck (II) Inmate From: Insane since: Sep 2001	posted 10-12-2001 22:50 hey, thanks for all your, help, I think I'm gonna go with the CSS route, I got it workin' how I want it anyways, thanks to everyone who responded. Eric Hesterman

Topic awaiting preservation: CSS thingy . . . (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=7880" title="Pages that link to Topic awaiting preservation: CSS thingy . . . (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: CSS thingy . . . <span class="small">(Page 1 of 1)</span>\$

YoBoyE
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2001

posted 10-12-2001 02:20

on the microsoft webpage ( http://www.microsoft.com ), on the left menu, there's a thing that when you mousover a link, it changes the background of the link to grey with a border. Ive looked at the css and tried to get it to work on my site, but it doesnt do anything. could someone try to help me out? thanks.

Eric Hesterman

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 10-12-2001 02:35

here's the most simplified code that *should* do the trick:

var DOM = (document.getElementById)?true:false, IE = false, NN = false;
if (!DOM) IE = (document.all)?true:false;

function Active(objId)
{
if (!DOM && !IE) return;
var theobj;
if (DOM) theobj = document.getElementById(objId).style;
else if (IE) theobj = document.all[objId].style;

theobj.background='#FFF';
theobj.border = '1px solid #000';
}

function Plain(objId)
{
if (!DOM && !IE) return;
var theobj;
if (DOM) theobj = document.getElementById(objId).style;
else if (IE) theobj = document.all[objId].style;

theobj.background='#888';
theobj.border = '0px';
}

... in the HTML ...

<p id="simplepar"><a href="somewhere.htm" onmouseover="Active('simplepar');" onmouseout="Plain('simplepar');">click here!</a></p>

It won't work in NN. NN simply can't support it.

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted 10-12-2001 02:36

This is a whole lot of code for that technique, a lot of it propietary to MS

the trick is the line in the CSS that says

behavior: url(/library/flyoutmenu/default.htc);

That allows CSS to call a Javascript (or in this case JScript) DHTML function

The main chunk is here http://www.microsoft.com/library/flyoutmenu/default.htc

:[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:

Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

posted 10-12-2001 07:41

I'm using a class:

div.banner a, div.banner em { display: block; margin: 0 0.5em; }
div.banner a, div.banner em { border: 1px 1px 1px 1px #900 }
div.banner a:first-child { border-top: none}
div.banner em { color: #6E6E6E}

div.banner a:link { text-decoration: none; color:#000000; }
div.banner a:visited { text-decoration: none; color: #000000 }
div.banner a:hover { color:black; text-decoration:underline overline;BACKGROUND-COLOR: #320808}

Is this bad?
I mean, if I don't missunderstood the question, you want to make the bgcolor be gray and lines on mouse over, does this code works for me, but if Slime said that one, there should be something wrong with mine, can somebody explain please??

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-12-2001 11:44

AS I said over in the GN I'd just use A: hover - you can simulate this

code:

a:link, a:visited {

  border: 0px;

  background-colour: #888;

}



a:hover {

  border: 1px solid #000;

  background-colour: #888;

}

This might jump around a little so you might want to adjust padding/margins to get it stationary.

Emps

You're my wife now Dave

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 10-12-2001 16:00

The reason I gave my solution was because I believed he wanted more than just the hyperlink to be changed on hover, he wanted the entire containing element (like a P tag or a TD tag) to be changed, so that the color changes are the entire width of the menubar (see www.microsoft.com ).

Technically, one should be able to say

TD:hover {stuff}

just like people so often do with A:hover. But the :hover pseudo-class isn't widely supported yet, I don't know if even IE supports it (except for with hyperlinks, as it was originally intended for use for).

Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

posted 10-12-2001 16:44

So, I'm not wrong if i use that in a Hyperlink??

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-12-2001 16:45

Slime: Just curious but can't you get the effect by using A: hover and making the link 100% wide or the width of the contraining box if that is fixed width? I'm just curious - I'd use something like onmouseover="this.className='elementOver'" on the TD, P or DIV the link is in if that wasn't possible. I suspect neither of these approaches works in all recent browsers.

Emps

You're my wife now Dave

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted 10-12-2001 16:48

Yup, Wakkos, your way should work, it just might not take up 100% of the width. I'm not sure if you can set a hyperlink to 100% width... maybe someone should try it. You might have to specify display:block; for the hyperlink.

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-12-2001 17:47

Slime: Good point. This works in IE5:

code:

<html>

<head>

</head>

<style>



a:link {

  width: 100%;

  background-color: black;

  color: white;

}



a:hover {

  background-color: yellow;

  color: black;

}



</style>



<body>



<a style="width:100%; background-color:blue; color:white;" href="someplace.com">link link</a>

<br />

<a href="someplace.com">link link</a>



<body>

</html>

Emps

You're my wife now Dave

Emperor
Maniac (V) Mad Scientist with Finglongers

From: Cell 53, East Wing
Insane since: Jul 2001

posted 10-12-2001 17:55

And it works fine with borders in IE5:
www.theemperor.f2s.com/asylum/linktest.html

Emps

You're my wife now Dave

YoBoyE
Nervous Wreck (II) Inmate

From:
Insane since: Sep 2001

posted 10-12-2001 22:50

hey, thanks for all your, help, I think I'm gonna go with the CSS route, I got it workin' how I want it anyways, thanks to everyone who responded.

Eric Hesterman