Given the following HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div style="background-color:red">
<a href="1__mose_info.htm">
<img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
</div>
<div style="background-color:green">
<a href="1__mose_info.htm">
<img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" />
</a>
<a href="1__mose.htm">
1. Mose
</a>
</div>
</body>
</html>The first division gets displayed as I want it (no link underline before the '1'. but if i format my code like in the second div, the space before the 1 gets an underline for a link.
If you look closely, the link of the space before '1' is the link of the image, and not the link of the text. Is there an easier way to not have this space as part of the link?
[Edit after my two upvotes and selecting the prefered answer:]
So it is best practice to keep all html elements and/or text that counts into an anchor element at one line - at least the first word. I will try to keep this in mind when editing subsequent html source code
Thank you all. Wolfgang
A line break counts as a space in HTML. You would need to change it to this to keep the same format:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div style="background-color:red">
<a href="1__mose_info.htm"><img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
</div>
<div style="background-color:green">
<a href="1__mose_info.htm">
<img src="../img/info.png" alt="Info zum ersten Buch Mose" title="Info zum ersten Buch Mose" /></a><a href="1__mose.htm">1. Mose</a>
</div>
</body>
</html>Take a look here for more on what you can do to overcome this if you are keen on the html formatting not affecting the display of your page: Removing whitespace between HTML elements when using line breaks
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments