Prevent spaces between images without code looking messy?

[cs.punk]

Currently I write a link with a image like this:

<a href='/index.php'>
<img src='/images/home.jpg' border='0' name='home'/>
</a>
<a href='login.php'>
<img src='/images/login.jpg' border='0' name='login' />
</a>

 

But like that spaces appear...

Only once written like this is there no spaces:

<a href='/index.php'><img src='/images/home.jpg' border='0' name='home'/></a><a href='login.php'><img src='/images/login.jpg' border='0' name='login' /></a>

 

But then everything is so so messy... Is there a padding/border or something I can set to 0?

[fanfavorite]

You could try a negative padding, but I don't think it looks that messy when you separate links line by line:

 

<a href='/index.php'><img src='/images/home.jpg' border='0' name='home'/></a>

<a href='login.php'><img src='/images/login.jpg' border='0' name='login' /></a>

[fbm247]

Did you find a solution to this problem i also have the same problem which i come accross from time to time and i usually have to stack all the image links on 1 line of code rather than spacing them out neatly on new lines

[cs.punk]

You could try a negative padding, but I don't think it looks that messy when you separate links line by line:

 

<a href='/index.php'><img src='/images/home.jpg' border='0' name='home'/></a>

<a href='login.php'><img src='/images/login.jpg' border='0' name='login' /></a>

 

That does'nt work lol..

 

And fbm247, no I did not... Although since I use PHP I just echo out a new line :

<?php
echo "<a href='/index.php'><img src='/images/home.jpg' border='0' name='home'/></a>";
echo "<a href='login.php'><img src='/images/login.jpg' border='0' name='login' /></a>";
?>

 

Is it just me or do you people aswell experience 'programming rage' at times? lol the small lil pestery things...

[SuperBlue]

I don't even see this as an issue, as i started to use list for navigation years ago.

 

When you use spaces between inline elements, Multiple spaces should just collapse into a single space. But even one space can be enough to mess up the layout. You can also handle how whitespace is treated through the white-space property of css. If you think about it, the behaviour of spaces between inline elements makes sense, normally it would just collapse into a single space.

 

To remove all whitespace, you would need to change the a elements into block elements. This would however make them render below each other instead of next to each other. To get around this you would either float them to the left or the right, as they automatically become blocks when floated.

 

However, having your navigation links that poorly marked up, is considered a bad practice.

 

The reason that i don't see this as an issue, is that i use lists for Navigation, and as such don't have to deal with this problem. I use lists both to allow for richer styling, and to increase the accessibility of my sites. I recommend everyone to use lists for their navigation. Its one of those smaller things that requires little effort to implement, and increases the accessibility of your sites tremendously.

 

You could also add HTML comments in between, if you don't want to use lists, or keep it all on one line. It would be a waste of server resources to use php to echo the result.

 

The main reason that some webdesigners don't use lists, is because they don't know how to style them. Usually it comes down to the cross browser styling, which is pretty straight forward. One browser basically uses margin, where the other uses padding.

 

Generally the below will rid the bullets, and space around, so they would appear like normal links.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

 

If you want to create a horizontal list, then simply float the li elements twords the left or right.

[fanfavorite]

I use lists for navigation as well, but I don't see anywhere where they state this is for navigation.  It shouldn't be a main concern though, although I too like really clean input and output code.