Topic: [CSS] Link border problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26942" title="Pages that link to Topic: [CSS] Link border problem" rel="nofollow" >Topic: [CSS] Link border problem\$

Author	Thread
ZOD Bipolar (III) Inmate From: Insane since: Jun 2002	posted 11-01-2005 16:40 I am working on a page in which I must have the css wrong but it actually gives the intended effect in IE. Mozilla and Opera 8 display it pretty much the same which makes me think my css must be wrong. Here is a sample of the code. code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body{background:#666} a{display:block;width:42px;border:2px outset #a9a9a9} a:hover{border:#c0c0c0} a:active{border:inset} </style> </head> <body> <p><a href="#">foobar</a></p> </body> </html> The desired effect is that hovering over the link changes its border color, clicking it changes the border style to inset and it should remain inset until something else is clicked. This is exactly the behavior I see in IE6 but not in Mozilla or Opera. What am I doing wrong and how do I correct it? TIA (Edited by ZOD on 11-01-2005 16:46)
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-01-2005 16:47 in you a:hover and a:active rules you completely overwrite the border related rules. Replace those 2 rules by : code: a:hover{border-color:#c0c0c0} a:active{border-style:inset} Cheers,
ZOD Bipolar (III) Inmate From: Insane since: Jun 2002	posted 11-01-2005 16:54 Yikes! That solved part of the problem but how do I get the border to remain inset until something else is clicked? I'd rather not script the behavior if I can accomplish it using css.
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-01-2005 17:15 Have you tried to use the :focus pseudo-class ? code: a:active,a:focus{border-style:inset} That's the only non-scripted method that I know of, or can think of at the moment. Hope that helps,
ZOD Bipolar (III) Inmate From: Insane since: Jun 2002	posted 11-01-2005 18:11 Thanks. I should have mentioned I tried that. It doesn't work in Opera but it does work in Mozilla for the example I posted. Unfortunately it does not work in my production page which is built dynamically. Any other ideas? Opera I'm not so worried about but there are a significant number of Firefox users here so I'd like their experience to be consistant with IE users as much as possible.
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-01-2005 18:37 Is the focus moved from elements to elements on your production page ? could you share a consistent example of page, because it should work. Is your markup valid ? Are you sure all the tags/attributes are well closed ? It may sound 101 but an ex-co-worker wasted half a day trying to fix a similar CSS while it simply was his HTML markup that was buggy.
ZOD Bipolar (III) Inmate From: Insane since: Jun 2002	posted 11-02-2005 07:37 Aside from much of the data in the page being proprietary it would be a lot of work to cull out a working example. Yes the markup is valid XHTML 1.0 Strict. The CSS isn't valid due to a few proprietary MS attributes (removing them didn't solve the problem) but apart from those I only had a few warnings about fonts and background colors. Anyway I opted for a temporary fix until I can rewrite the page from scratch. I added IDs and an onmousedown handler to all the links and adapted a function from one of my personal projects. code: function bInset(ob) { if (Mozilla) { ob.style.borderStyle='inset'; if (bCache) D.getElementById(bCache).style.borderStyle='outset'; bCache=ob.id; } } Edit: Changed line 4 to if (bCache&&bCache!=ob.id) D.getElementById(bCache).style.borderStyle='outset'; This is called from each link using onmousedown="bInset(this);" and it yields the desired effect. (Edited by ZOD on 11-02-2005 08:33)
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-02-2005 09:43 To avoid maintenace problems you should opt for something less obstrusive, in the vain of the accessible popups, and use some CSS class instead of hardcoding the style.
ZOD Bipolar (III) Inmate From: Insane since: Jun 2002	posted 11-02-2005 16:16 We aren't using popups. This page is a directory of regional managers for several states. Clicking the links in the left margin displays contact info in an adjacent div. Presumably the original author used links precisely to avoid hardcoding styles by making the :hover pseudoclass available to IE. Anyway one of my associates informed me that the styles used to work in Mozilla but that we broke it at some point so I will be going through backups to see if I can figure out where we screwed up.
bitdamaged Maniac (V) Mad Scientist From: 100101010011 <-- right about here Insane since: Mar 2000	posted 11-02-2005 20:04 I think what poi is suggesting is that as opposed to putting code in each link you should dynamically add the onmouseover actions based on class name. This takes the functionality away from the individual links and allows you to add it to the class. So name these links' class something link "inset-link" Then loop through like in his example to add the individual mouse events. Similarly instead of using: if (bCache) D.getElementById(bCache).style.borderStyle='outset'; Just do: if (bCache) D.getElementById(bCache).className = 'outset-style' These methods allow the developer a lot more leeway without having to touch the code. .:[ Never resist a perfect moment ]:.
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 11-03-2005 19:06 bitdamaged: That's exactly that.

Topic: [CSS] Link border problem\$

Author

Thread

ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted 11-01-2005 16:40

I am working on a page in which I must have the css wrong but it actually gives the intended effect in IE. Mozilla and Opera 8 display it pretty much the same which makes me think my css must be wrong.

Here is a sample of the code.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{background:#666}
a{display:block;width:42px;border:2px outset #a9a9a9}
a:hover{border:#c0c0c0}
a:active{border:inset}
</style>
</head>
<body>
<p><a href="#">foobar</a></p>
</body>
</html>

The desired effect is that hovering over the link changes its border color, clicking it changes the border style to inset and it should remain inset until something else is clicked. This is exactly the behavior I see in IE6 but not in Mozilla or Opera. What am I doing wrong and how do I correct it?

TIA

(Edited by ZOD on 11-01-2005 16:46)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-01-2005 16:47

in you a:hover and a:active rules you completely overwrite the border related rules. Replace those 2 rules by :

code:

a:hover{border-color:#c0c0c0}
a:active{border-style:inset}

Cheers,

ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted 11-01-2005 16:54

Yikes! That solved part of the problem but how do I get the border to remain inset until something else is clicked? I'd rather not script the behavior if I can accomplish it using css.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-01-2005 17:15

Have you tried to use the :focus pseudo-class ?

code:

a:active,a:focus{border-style:inset}

That's the only non-scripted method that I know of, or can think of at the moment.

Hope that helps,

ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted 11-01-2005 18:11

Thanks. I should have mentioned I tried that. It doesn't work in Opera but it does work in Mozilla for the example I posted. Unfortunately it does not work in my production page which is built dynamically. Any other ideas? Opera I'm not so worried about but there are a significant number of Firefox users here so I'd like their experience to be consistant with IE users as much as possible.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-01-2005 18:37

Is the focus moved from elements to elements on your production page ? could you share a consistent example of page, because it should work.
Is your markup valid ? Are you sure all the tags/attributes are well closed ? It may sound 101 but an ex-co-worker wasted half a day trying to fix a similar CSS while it simply was his HTML markup that was buggy.

ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted 11-02-2005 07:37

Aside from much of the data in the page being proprietary it would be a lot of work to cull out a working example. Yes the markup is valid XHTML 1.0 Strict. The CSS isn't valid due to a few proprietary MS attributes (removing them didn't solve the problem) but apart from those I only had a few warnings about fonts and background colors.

Anyway I opted for a temporary fix until I can rewrite the page from scratch. I added IDs and an onmousedown handler to all the links and adapted a function from one of my personal projects.

code:

function bInset(ob) {
if (Mozilla) {
ob.style.borderStyle='inset';
if (bCache) D.getElementById(bCache).style.borderStyle='outset';
bCache=ob.id;
}
}

Edit: Changed line 4 to

if (bCache&&bCache!=ob.id) D.getElementById(bCache).style.borderStyle='outset';

This is called from each link using onmousedown="bInset(this);" and it yields the desired effect.

(Edited by ZOD on 11-02-2005 08:33)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-02-2005 09:43

To avoid maintenace problems you should opt for something less obstrusive, in the vain of the accessible popups, and use some CSS class instead of hardcoding the style.

ZOD
Bipolar (III) Inmate

From:
Insane since: Jun 2002

posted 11-02-2005 16:16

We aren't using popups. This page is a directory of regional managers for several states. Clicking the links in the left margin displays contact info in an adjacent div. Presumably the original author used links precisely to avoid hardcoding styles by making the :hover pseudoclass available to IE.

Anyway one of my associates informed me that the styles used to work in Mozilla but that we broke it at some point so I will be going through backups to see if I can figure out where we screwed up.

bitdamaged
Maniac (V) Mad Scientist

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

posted 11-02-2005 20:04

I think what poi is suggesting is that as opposed to putting code in each link you should dynamically add the onmouseover actions based on class name. This takes the functionality away from the individual links and allows you to add it to the class.

So name these links' class something link "inset-link" Then loop through like in his example to add the individual mouse events.

Similarly instead of using:
if (bCache) D.getElementById(bCache).style.borderStyle='outset';

Just do:
if (bCache) D.getElementById(bCache).className = 'outset-style'

These methods allow the developer a lot more leeway without having to touch the code.

.:[ Never resist a perfect moment ]:.

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 11-03-2005 19:06

bitdamaged: That's exactly that.

Post Reply

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: [CSS] Link border problem

Insert Slimies »

Insert UBB Code »

Topic: [CSS] Link border problem $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26942" title="Pages that link to Topic: [CSS] Link border problem" rel="nofollow" >Topic: [CSS] Link border problem\$