Search code examples
htmlcsswhitespace

An unexplainable space added inside an anchor


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.


Solution

  • 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.