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>
