CODEWITHSUNDEEP
htmlcssanchorwhitespace
JustSomeGuy
JustSomeGuy

Reputation: 314

CSS Unwanted whitespace added after anchor tag

Whitespace is added AFTER anchor tags and I don't know why. I've read that this can be used caused by percentage width values but I don't use any for the div element in question. Can't it be caused by the elements parent style?

Whitespace error
(source: imageupper.com)

Note the whitespace after the "Events" link. This happens on every anchor tag on my site.

Any ideas o how to resolve it would be appreciated.

HTML

<a href="/events/">Events</a>

CSS

a {
    color:#000;
    text-decoration:underline;
}
a:hover {
    color:#000;
    background:#ff6600;
    text-decoration:none;
}
#content {
    width:800px;
    margin:0 auto;
    padding:15px 10px 10px 15px;
}

Without adding my entire site's code; the above code is the best that I can offer. Although, I'm certain that that particular code is not the culprit.

When I copy and paste the last few words into a text editor; only one space appears, as it should do.

Upvotes: 0

Views: 5910

Answers (3)

Naveen
Naveen

Reputation: 1

Please add below some styling in anchor tag style="display:inline-block; text-align:justify; text-wrap:nowrap; word-wrap:break-word;"

Upvotes: 0

Seth Holladay
Seth Holladay

Reputation: 9539

Could this be the dreaded Inline-block Whitespace Problem?

Check your style sheets for something like this:

a {
  inline-block;
}

OR

.example {
  display: inline-block;
}

If you find that, try removing or changing the display type.

Upvotes: 7

Dmytro Dzyubak
Dmytro Dzyubak

Reputation: 1642

1) Check your CSS. Somewhere inside:

a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }

OR

a.someClassName {
  padding-right: 16px;
  background: url(pix/ext_link_14x14.png) no-repeat right;
}

there could be

padding-right: 16px;

or something similar.

Check all of the style sheets included for this page. Another style sheet can override the one that you have provided.

2) Try to make some "debugging". For example, use Firebug Add-on for Firefox, go to HTML tab and move your mouse over that tag (in the code part). It will be highlighted (on the page) with different colors depending on, if that was a margin, padding, etc. I just move my mouse over code and it highlights the tag with spaces around it with different colors. This can help to get the idea of what keyword to find in the style sheet.

3) Try to disable all inherited css stylesheets for the "a" tag. For example, place this piece of code to your html page:

<style type="text/css">
a {
  padding: 0px;
  margin: 0px;
}
</style>

4) If you use DHTML, JavaScript, jQuery onload event - disable it temporarily. If the spaces are back to normal, then we know exactly that the problem is within JavaScript scope. Debug JavaScript step by step to find the exact place where the padding (or some other property) is set to the "a" tag.

Upvotes: 0

Related Questions