By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,587 Members | 1,071 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,587 IT Pros & Developers. It's quick & easy.

border around an A tag not wrapping around the whole box in firefox.

P: n/a
I'm trying to put a border around a link when the mouse rolls over it.
I've made an example below and left out the hover to keep it simple. In
IE the example below draws a box arround the image OK, in Firefox the
box drawn is one line of text in height. If I add any lines of text
inside the A tag it borders each line of text individually.

The solutions I've tried are:

putting a Div tag inside the A and using A:hover .myDiv{boder.....}
unfortunatley this doesn't seem to work in IE

Using both A:hover and A:hover img which works in firefox full size.
Down sides are the not all of the content to be boxed it image based
and it also displays the tiny border aswell as the full sized border in
fireFox.

I'm wondering if I should use javascript instead to change the border
value, that way I can change the border on the DIV that the A is in.

Is this making sense to anyone? Anyway, if someone can work out a way
of getting the below to work in firefox and IE using A:hover instead of
A it would be greatly appreciated ( no borders when you're not
hovering).

I realise it's probably not working due to my lack of CSS knowledge.

Thanks in advance,
Mike.

####### CODE EXAMPLE HERE ########

<head>
<title>Test</title>
<style type="text/css">
<!--
img {border:none;}
A{ border: 4px dashed #99CCCC; margin: -4px; }
-->
</style>
</head>
<body>
<div class="item"><a href="#"><img src="images/notePaper.gif"
width="245" height="150" /></a></div>
</body>
</html>

Sep 12 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Els
mc**@hotmail.com wrote:
I'm trying to put a border around a link when the mouse rolls over it.
I've made an example below and left out the hover to keep it simple. In
IE the example below draws a box arround the image OK, in Firefox the
box drawn is one line of text in height. If I add any lines of text
inside the A tag it borders each line of text individually.

The solutions I've tried are:
Maybe you're looking for a{display:block;}?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Trockener Kecks - Paradijs
Sep 12 '06 #2

P: n/a
Exactly what I was looking for... Was that a RTFM moment :S.

Thanks very much for that.

Mike

Sep 12 '06 #3

P: n/a

mc**@hotmail.com wrote:
If I add any lines of text
inside the A tag it borders each line of text individually.
There's a bunch of stuff involved here.

1. The content of <ais %inline;, not %block; or %flow;.
http://www.w3.org/TR/html4/struct/links.html#edef-A

This means that you can't place block elements like <divor <pinside
an <a>. If you do, then anything could happen.

It _doesn't_ mena that you can't have "lines of text" inside an <a>
though, because <bris an inline element and so it's still permitted.
You don't specify how you were achieving your "lines of text", but I
suspect you were using <prather than <br>

2. <ahas CSS display: inline; by default rather than block.
Although you can still use some "block like" CSS rendering properties
on it, such as "border", then they're not likely to work quite how you
expect. If you want <ato look like a block element, then set the CSS
display: block; property and do it properly.

In particular, bordering inline elements _should_ border each line
separately. After all, they're inline. If you want an overall border
around the whole element, you'll be wanting diaplay: block;

3. You mention IE, but you don't mention a doctype. If you have IE in
Strict rendering mode, by using a proper doctype on your HTML, then
(AFAIK) you will get the same correct behaviour as FF, even though it's
not what you want.

If you're doctype-less, then IE drops into quirks mode and deliberately
mis-renders borders on <awhen inline as if it were block, on the
assumption that this is "what you really wanted". Evil piece of crud
that it is 8-(

If you're trying to do anything width-related to <athen you'll
probably need to set a width on it. The "traditional" way to do this is
to set width: 100%; on the <aand control the width of its containing
element, frequently a <li>

So the real fix is to write valid HTML, to switch <ainto display:
block; rendering if that's what you're after, force IE into standards
mode, then suddenly wonder how it all became so easy to do the rest
8-)

I'm wondering if I should use javascript instead to change the border
value,
That's never the answer to anything, certainly not for presentation.
It's also more complicated and much harder to support. Fortunately you
asked in c.i.w.a.s first!

Here's an example, showing most of the variations. Go play with it.
Then remove the doctype and try viewing it again (in both IE and FF)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Multi-line A element</title>

<style type="text/css" >

div {
margin: 1em;
width: 20em;
}

a {
border: 3px solid red;
width: 100%;
}

div.a-as-block a {
border-color: blue;
width: 100%;
display: block;
}
</style>

</head><body>
<div class="single-line" >
<a href="#" >A link</a>
</div>
<div class="with-linebreak" >
<a href="#" >Another link<br>with multiple lines</a>
</div>
<div class="with-para" >
<a href="#" >An incorrect link<p>with multiple lines</a>
</div>

<div class="a-as-block" >

<div class="single-line" >
<a href="#" >A link</a>
</div>
<div class="with-linebreak" >
<a href="#" >Another link<br>with multiple lines</a>
</div>
<div class="with-para" >
<a href="#" >An incorrect link<p>with multiple lines</a>
</div>

</div>

</body></html>

Sep 12 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.