Forum Moderators: not2easy
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title>Test</title>
<style type="text/css">a{padding:0 6px;}.r{text-align:right;}</style>
</head>
<body>
<p class="r"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
<br><a href="#">4</a><a href="#">5</a><a href="#">6</a></p>
</body>
</html>
The problem here? IE and Opera put the numbers (links) directly above and below each other, just as I want -- but Firefox staggers the second line, apparently not applying padding-right to the last link before the paragraph tag is closed.
I've been waiting for many browser versions to see this mark-up handled the same way by all the majors, but alas, not so far. I get can the effect I want by using two paragraph tags and making the top and bottom margins small between them (less efficient) -- but what is going on with code I posted? Why is there a cross-browser difference?
However, the issue is not that the right margin is not applied ... The issue is that FF renders the space between anchor 3 and the following <br> as if the space were a .
Simply putting the <br> directly after the 3rd anchor solves the problem.
Thus, instead of:
<p class="r"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
<br><a href="#">4</a><a href="#">5</a><a href="#">6</a></p>
... do this:
<p class="r"><a href="#">1</a><a href="#">2</a><a href="#">3</a><br>
<a href="#">4</a><a href="#">5</a><a href="#">6</a></p>
... and all browsers play nicely :)
This puts a cramp on my preferred style of formatting html source code (I like seeing the <br> tag immediately on the left of the text that it affects) - but I'm glad to have this workaround. But at least I've got a fix - thanks again.
Another possible fix? if you'd like to keep your preferred coding style
Add a negative right margin -4px to the br - I don't think it affects anyone else adversely, but only tested in FF/IE/Opera
.r br {margin-right: -4px;}
