CODEWITHSUNDEEP
htmlcsshyperlink
Web_Designer
Web_Designer

Reputation: 74530

Unknown space between links

I have three links:

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;</a>
<a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;</a>
<a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>

I have some CSS styling for them:

.f_link{
height:38px;
padding-top:12px;
margin:0px;
color:gray;
}
.f_link:hover{
color:black;
text-decoration:none;
}

How this html is displayed in FF 3.6, IE 8, and some version of Google Chrome: enter image description here

And this is how I would like it to be displayed in my three major browers: enter image description here

I used firebug and it said there is no padding or margin between these links. What is that space there for then, and how can I get rid of it? I'm open to suggestions!

Upvotes: 3

Views: 3961

Answers (5)

McIver
McIver

Reputation: 171

One solution to this problem is also to include all the links in a div and set the div's font-size:0; then set the font-size of the links as you wish.

You can check the fiddle below for more info

fiddle

Upvotes: 0

Seth
Seth

Reputation: 6260

You may want to slightly change your layout to get the results you're looking for...plus this:

&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;

Is really unnecessary.

HTML:
<ul class="my_list">
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
    <li><a href="#">My Link</a></li>
</ul>

CSS:
.my_list { overflow:hidden; } // Clear floats
.my_list li { float:left; list-style:none; margin:0; padding:0; }
.my_list li a { padding:0 10px; }

That should do what you want.

Upvotes: 1

Nikita Rybak
Nikita Rybak

Reputation: 68006

Add float: left; to your .f_link declaration, that will remove spaces.

http://jsfiddle.net/wMwEQ/

Also, using &nbsp; for spacing is baaaad, even though it's not an issue here.

Upvotes: 4

eyelidlessness
eyelidlessness

Reputation: 63519

The space is the spaces between the </a> closing tag and the following <a> opening tag. Remove that space in your markup and you should have the desired effect.

Upvotes: 0

naivists
naivists

Reputation: 33501

Line breaks are/should be treated as a single white space in HTML. You can update your markup to this (line break before the closing tag, but no space before the next A tag)

<a href="/about" class="f_link">&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;
</a><a href="/Login" class="f_link">&nbsp;&nbsp;&nbsp;Login&nbsp;&nbsp;&nbsp;
</a><a href="/Create Account" class="f_link">&nbsp;&nbsp;&nbsp;Create Account&nbsp;&nbsp;&nbsp;</a>

Upvotes: 5

Related Questions