Reduce the space between scrolling links

Hi,

Sample:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	#container {width:300px; overflow-x:auto; overflow-y:hidden; white-space:nowrap;}
	img {border:0;}
   </style>
</head>
<body>
   <div id="container">
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

How can I reduce the space between the links to 1px?

Many thanks in advance!
Mike

I guess you could try something like this:

img {border:0; [COLOR="#FF0000"]margin-right: -3px;[/COLOR]}

How can I reduce the space between the links to 1px?

The space you are seeing are whitespace nodes on the anchors, due to the line breaks in your markup.

I developed a x-browser whitespace fix for that a while back, view the page source.

To apply that formula to your code will require another element to make webkit behave. The webkit fix is display:table; but that will treat your 300px width as min-width. You will need to keep your width on the wrapping div and apply the node fix to a UL.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
    width:300px;
    overflow-x:auto;
    overflow-y:hidden;
}
#container ul {
    margin:0;
    padding:0;
    display:table;/* Webkit Fix */
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/
    white-space:nowrap;
}
#container li {
    display:inline-block;
    word-spacing:0; /* reset from parent*/
    margin:0 1px 0 0; /*now you can set side margins without node conflict */
}
img {border:0;}
</style>
</head>
<body>
<div id="container">
    <ul>
        <li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
        <li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
        <li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
        <li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
    </ul>
</div>
</body>
</html>

Hi Ray, Nice to see you posting :slight_smile:

How can I reduce the space between the links to 1px?

Rays method above is a very good method and a flexible approach as inline-block allows for vertical alignment also if items are of differing height. It would be my recommended choice also.

However, if you have a simple structure then you could use the easier floated method and use a negative right margin to hold it all together.

e.g.


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container {
	width:300px;
	overflow-x:auto;
	overflow-y:hidden;
}
#container div {
	float:left;
	margin-right:-32767px;/* browser limit */
}
img { border:0; }
#container a {
	float:left;
	margin:0 1px 0 0
}
</style>
</head>
<body>
<div id="container">
		<div><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a> <a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a> <a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a> <a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a> <a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></div>
</div>
</body>
</html>


Of course the anchors should be within a suitable parent as bare anchors next to each other is not recommended for accessibility reasons. Therefore the above should be in a list structure but the approach is the same.


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
ul {
	list-style:none;
	margin:0;
	padding:0
}
#container {
	width:300px;
	overflow-x:auto;
	overflow-y:hidden;
}
#container ul {
	float:left;
	margin-right:-32767px;/* browser limit */
}
img { border:0; }
#container li {
	float:left;
	margin:0 1px 0 0
}
</style>
</head>
<body>
<div id="container">
		<ul>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
		</ul>
</div>
</body>
</html>


The simplest solution in your example would be to simply close the gaps between the anchors in your html (just like leaving no space between words) but of course should someone edit the page or reformat it in an editor then the gap will reappear so is not a recommended approach.


<!DOCTYPE html>
<html>
   <head>
   <title></title>
   <style type="text/css">
#container {
	width:300px;
	overflow-x:auto;
	overflow-y:hidden;
	white-space:nowrap;
}
img { border:0; }
a{margin-right:1px;}
</style>
   </head>
   <body>
			<div id="container"><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></div>
</body>
</html>

@Ralph,
Thanks for the answer!

@Ray & Paul,
Thanks for the answers! I wonder what you guys think of Ralph’s suggestion. A simple negative margin seems to be a cross-browser solution:
a {margin-right:-3px;}

@Paul,
I’m afraid your codes don’t seem good in Opera.

Ray and Paul know a heck of a lot more about CSS than I do, so I’d definitely follow their suggestions. :slight_smile:

I’m not very familiar with Ray, but I do know Paul and really believe in him and have already benefited his kind help a lot. (Thanks Paul!) :slight_smile:
However, I always look for reasons before I accept a solution.

Yep. Both Paul (explicitly) and Ray (by his example) have noted that having anchors sitting site by side isn’t great for accessibility and can break in various situations, so it’s a good idea to follow that principle of marking this up as a list.

How do you know the gap is 3px? It might be 5px in some browsers depending on font-size and other criteria (word-spacing, letter-spacing etc). What if there is no gap between an image in the html then your image will overlap with the negative margin. It’s just guessing and although it may work in some situations it is not robust enough for all situations.

@Paul,
I’m afraid your codes don’t seem good in Opera.

Can you show examples please as they are all working for me in Opera with no problem.

Screenshot

Version: 11.60
System: Windows XP

Thanks, but what is the error I am looking at:) That’s how I would expect it to look with a 1px margin as required. Or am I missing the blindingly obvious again :slight_smile:

LOL! Sorry I didn’t explain as I thought it was too obvious: the bottom part of images are cut off.

I would never have noticed that :slight_smile:

Opera is a very naughty browser and needs this fix:


#container:after{/* for opera */
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;	
}

The html remains unchanged.


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container:after{/* for opera */
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	height:0;	
}
ul {
	list-style:none;
	margin:0;
	padding:0
}
#container {
	width:300px;
	overflow-x:auto;
	overflow-y:hidden;
}
#container ul {
	float:left;
	margin-right:-32767px;/* browser limit */
}
img { border:0; }
#container li {
	float:left;
	margin:0 1px 0 0
}
</style>
</head>
<body>
<div id="container">
		<ul>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
				<li><a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a></li>
		</ul>
</div>
</body>
</html>

Of course just setting the height of the overflow div would have had the same effect assuming your thumbnails are all the same size.

Works like a charm! Thanks for your time! :slight_smile:

Dear Paul,

I just came up with a simple solution, that of course I’ll use under list elements as you recommended:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	#container {width:300px; overflow-x:auto; overflow-y:hidden; border-spacing:1px;}
        a {display:table-cell;}
	img {display:block; border:0;}  /* Is [I]vertical-align:bottom;[/I] any better? */
   </style>
</head>
<body>
   <div id="container">
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

Would you mind letting me know what you think?

Yes that should work but of course will not work in ie7 and under as they don’t understand display:table. It’s similar to Rays example with the display:table on the parent and the browser constructs the anonymous cells to go inside - except Rays version works back to Ie6.

If you don’t need IE7 support then the display:table-cell method should do what you want. However it seems to me that you were worried about opera users and yet IE7 users will outweigh opera users tenfold.

It seems to be a similar problem: except in IE and Opera the right part of images are cut. I wonder what’s the reason and how they can be displayed the same across different browsers. Here’s the code:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
	div {display:inline-block; height:200px; overflow-x:hidden; overflow-y:auto;}
        a {display:block;}
	img {border:0;}
   </style>
</head>
<body>
   <div>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
	<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

To clarify the problem here’s a similar code without overflow-x:hidden:

<!DOCTYPE html>
<html>
<head>
<title></title>
   <style type="text/css">
    div {display:inline-block; height:200px; overflow:auto;}
    a {display:block;}
    img {border:0;}
   </style>
</head>
<body>
   <div>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
    <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
   </div>
</body>
</html>

Now you see an unnecessary horizontal scrollbar except in IE and Opera. Of course I can add a fixed width to the container, but how can I calculate it while the scrollbar width isn’t always the same in different browsers/systems?

In a fixed width most browsers will put the scrollbars inside the box thus reducing the space. In a fluid width you may find that some put the scrollbar outside the content and some still put it inside the width. There’s not a lot you can do about it apart from adding a bit of padding for the scrollbar should it appear.

I thought I had old demo somewhere that addressed this issue but I couldn’t find it quickly as I am off on holiday now until the 16th. Someone else will have to jump in :slight_smile:

Have a good holiday! Thanks anyway! :slight_smile: