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

IP logged posted posted 11-01-2005 16:40 Edit Quote

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

IP logged posted posted 11-01-2005 16:47 Edit Quote

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

IP logged posted posted 11-01-2005 16:54 Edit Quote

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

IP logged posted posted 11-01-2005 17:15 Edit Quote

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

IP logged posted posted 11-01-2005 18:11 Edit Quote

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

IP logged posted posted 11-01-2005 18:37 Edit Quote

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

IP logged posted posted 11-02-2005 07:37 Edit Quote

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

IP logged posted posted 11-02-2005 09:43 Edit Quote

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

IP logged posted posted 11-02-2005 16:16 Edit Quote

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

IP logged posted posted 11-02-2005 20:04 Edit Quote

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

IP logged posted posted 11-03-2005 19:06 Edit Quote

bitdamaged: That's exactly that.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu