An unexplainable space added inside an anchor

Question

This is a HTML snippet from my application:

Correct answers: 
0 / 6<br /><br />
You have failed to pass the final test.

<a href="/module/controller/course/id/5" class="accessible-link">
    Click here
</a> 
to return to the training.

As you can see, there is a single space after the </a> closing tag. Yet in the browser the space is added inside the anchor. So it looks like this:

Alt text

This is the PHP code which produces the HTML:

<?php if (isset($this->correctAnswersCount) && isset($this->answersCount)): ?>
        <?php echo Zend_Registry::get('translate')->_('Počet správnych odpovedí'); ?>:
        <?php echo ToHtml($this->correctAnswersCount); ?> / <?php echo ToHtml($this->answersCount); ?><br /><br />
<?php endif; ?>
        <?php echo Zend_Registry::get('translate')->_('Záverečný test sa vám nepodarilo úspešne absolvovať.'), "\n"; ?>
        <a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
            <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
        </a>
        <?php echo Zend_Registry::get('translate')->_('pre návrat do kurzu.'), "\n"; ?>

I am completely baffled by this and cannot figure out what's causing this even though I've been staring into the code for 30 minutes now.

This is a relevant part from the translation file:

'Kliknite' => 'Click here',

As you can see, there should be no space added by Zend_Translate.

Try HTML5, not XHTML. Albeit underlining the space within the `` is standard behaviour for many browsers. — mario, Dec 08 '10 at 13:09
@mario there is no space. The linebreak and tabstop is just rendered as one. And I doubt it won't be there in HTML5 (which is tag soup anyway). — Gordon, Dec 08 '10 at 13:13
@mario I know that. But there is no space between and . The space is after the closing tag. — Richard Knop, Dec 08 '10 at 13:17
Well actually, if you send xhtml without the correct mime type it's just tag soup to most browsers (trailing slashes are garbage). And html5 happens to define exactly such edge cases better. — mario, Dec 08 '10 at 13:32
It's not a problem to send XHTML with proper mime type. The only problematic browser is IE but IE9 is supposed to support XHTML so that should be solved soon. — Richard Knop, Dec 08 '10 at 13:35
Yes. But do you, or don't you? It's known to cause display differences if you use real XHTML (it's not just xml:space). http://stackoverflow.com/questions/2662508/html-4-html-5-xhtml-mime-types-the-definitive-resource — mario, Dec 08 '10 at 13:43
@mario Yes I do. I am sending xhtml+xml mime type. I also tried changin the doctype to HTML and serving it as HTML without any difference. The problem stays the same. — Richard Knop, Dec 08 '10 at 13:49
What browser? Internet Explorer was known to change the HTML (saving the HTML page to disk was different from what it got from the web server). — Peter Mortensen, Aug 18 '21 at 13:53

score 6 · Answer 1 · answered Dec 08 '10 at 13:09

6

Close the 'a' tag directly after the next, without a newline, like this:

<a href="/module/controller/course/id/5" class="accessible-link">Click here</a>

answered Dec 08 '10 at 13:09

qbeuek

4,156
4
19
17

Yes, it works like that. But I would like to have opening tag, anchor and closing tag on separate lines in order to have cleaner HTML templates. – Richard Knop Dec 08 '10 at 13:18
2

Which is where the space is coming from. The browser is confused by the whitespace and there is nothing you can do to clear it up. – DampeS8N Dec 08 '10 at 13:22

score 5 · Accepted Answer · edited Mar 28 '23 at 19:23

5

Change this:

<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
    <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?>
</a>

Into this:

<a href="<?php echo ToHtml($this->backToCourseUri); ?>" class="accessible-link">
    <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?></a>

The </a> should be in the same line after the <?php echo Zend_Registry::get('translate')->_('Kliknite'), "\n"; ?> aka Click Here

The new line and the spaces after it renders like 1 space that is still inside the <a></a> tags, that is where the blank space is coming from.

For the record I also don't like the closing tag to be next to the content instead of a being in a new line but that's how it has to be done in order to work correctly.

I like good formatted code and I always look for an autoformat command in my IDE.

But at least for example in Visual Studio when you hit Ctrl + K, Ctrl + D (the Format Document shorcut) the closing tags like the </a> are not automatically moved to a new line for this exact reason: that it should not break the way it looks before the auto format.

edited Mar 28 '23 at 19:23

TylerH

20,799
66
75
101

answered Dec 08 '10 at 13:11

Carlos Muñoz

17,397
7
55
80

Yes, it works like that. But I would like to have opening tag, anchor and closing tag on separate lines in order to have cleaner HTML templates. – Richard Knop Dec 08 '10 at 13:17
But you can't do it that way since **YOU** are the one that is putting the extra space in your code. The whitespaces ( the new line and the spaces after it) all become into one single space that is still inside the `` tags. That's just how HTML works man – Carlos Muñoz Dec 08 '10 at 13:30
@Carlos actually it's the browsers that falsely put it there. http://www.w3.org/TR/html401/appendix/notes.html#notes-line-breaks is clear on how this should be rendered. The issue is, due to indenting, there is also a tabstop between the linebreak and the closing element. In theory putting the closing a without indenting should fix that, but it doesnt (at least not in IE8 and FF3) – Gordon Dec 08 '10 at 13:34
@Richard you're welcome. Google a bit for whitespace bugs in browsers. I am sure you will come across this one, too. – Gordon Dec 08 '10 at 13:38
@Gordon: You are right. But as we know the browsers often don't follow exactly all the standards – Carlos Muñoz Dec 08 '10 at 13:39
At least in IE9, Firefox 3.6.12, Chrome 8, Opera 10.61 and Safari 5.0.1 they all render the same thing: The unwanted space – Carlos Muñoz Dec 08 '10 at 13:47

score 1 · Answer 3 · edited Aug 18 '21 at 13:54

1

Try it like this:

<a href="/module/controller/course/id/5" class="accessible-link">Click here</a>

I am not sure if this will work, but it is worth trying.

edited Aug 18 '21 at 13:54

Peter Mortensen

30,738
21
105
131

answered Dec 08 '10 at 13:09

Ives.me

2,359
18
24

Yes, it works like that. But I would like to have opening tag, anchor and closing tag on separate lines in order to have cleaner HTML templates. – Richard Knop Dec 08 '10 at 13:15

score 0 · Answer 4 · edited Aug 18 '21 at 13:53

0

Put   immediately after the </a> tag.

edited Aug 18 '21 at 13:53

Peter Mortensen

30,738
21
105
131

answered Dec 08 '10 at 13:08

Andrew Jackman

13,781
7
35
44

An unexplainable space added inside an anchor

4 Answers4