SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Reduce the space between scrolling links

    Hi,

    Sample:

    Code:
    <!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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I guess you could try something like this:

    Code:
    img {border:0; margin-right: -3px;}

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code HTML4Strict:
    <!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>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Ray, Nice to see you posting

    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.

    Code:
    <!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.

    Code:
    <!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.

    Code:
    <!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>

  5. #5
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    I wonder what you guys think of Ralph's suggestion.
    Ray and Paul know a heck of a lot more about CSS than I do, so I'd definitely follow their suggestions.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Ray and Paul know a heck of a lot more about CSS than I do, so I'd definitely follow their suggestions.
    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!)
    However, I always look for reasons before I accept a solution.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    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.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    @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;}
    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.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Can you show examples please as they are all working for me in Opera with no problem.
    Screenshot

    Version: 11.60
    System: Windows XP

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    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

  12. #12
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    am I missing the blindingly obvious again
    LOL! Sorry I didn't explain as I thought it was too obvious: the bottom part of images are cut off.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    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

    Opera is a very naughty browser and needs this fix:

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

    Code:
    <!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.

  14. #14
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Works like a charm! Thanks for your time!

  15. #15
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,

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

    Code:
    <!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 vertical-align:bottom; 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?

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Rain Lover View Post
    Dear Paul,

    I just came up with a simple solution, that of course I'll use under list elements as you recommended:
    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.

  17. #17
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Opera is a very naughty browser and needs this fix:

    Code:
    #container:after{/* for opera */
    	content:".";
    	display:block;
    	clear:both;
    	visibility:hidden;
    	height:0;	
    }
    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:

    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>

  18. #18
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To clarify the problem here's a similar code without overflow-x:hidden:

    Code:
    <!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?

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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

  20. #20
    SitePoint Addict
    Join Date
    Dec 2010
    Posts
    226
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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
    Have a good holiday! Thanks anyway!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •