Putting together a horizontal image based menu for a client of mine (yes, I am well aware of the SEO drawbacks of this, but it’s for a design company, so what can I say?! *sigh*), I spent quite some time trying to work out why the images would not nestle up next to each other properly - a space of probably a couple of pixels existed between each image .
Initial thoughts were that it must be a padding/margin CSS issue (although it shouldn’t have been, because by default I zero all margins and padding at the very top of each stylesheet). So, I added the following to the image and a tags:
img {
padding: 0px;
margin: 0px;
}
a {
padding: 0px;
margin: 0px;
}
However, this had no effect - there was still a horizontal gap in between each of the images.
At this point, I gave up on finding a fix to this problem myself, and hit Google - however, even with advanced search techniques gained over years of finding out how to do stuff on Google, I could not find an answer! I decided to move on to another part of the site and come back at this later, and that was when I inadvertently came across the solution.
If you are anything like me, then you probably try and keep your code in some kind of tidy order (and if you’re exactly like me, you probably fail most of the time!). This is the cause of the problem! To explain, here is the snippet of code that I had been using:
<a href="#"><img src="images/white-buttons_01.gif" alt="ABOUT" id="about-btn" /></a>
<a href="#"><img src="images/white-buttons_02.gif" alt="TOUR" id="tour-btn" /></a>
<a href="#"><img src="images/white-buttons_03.gif" alt="MENU" id="menu-btn" /></a>
<a href="#"><img src="images/white-buttons_04.gif" alt="VENUE HIRE" id="venue-hire-btn" /></a>
The cause of the problem is the fact that the images are spaced out, and on separate lines. In order to remove any horizontal gaps from between the images, it is necessary for the images to be on the same line and for there to be no whitespace in between the HTML tags. To fix the problem with the code above, it needs to look like this:
<a href="#"><img src="images/white-buttons_01.gif" alt="ABOUT" id="about-btn" /></a><a href="#"><img src="images/white-buttons_02.gif" alt="TOUR" id="tour-btn" /></a><a href="#"><img src="images/white-buttons_03.gif" alt="MENU" id="menu-btn" /></a><a href="#"><img src="images/white-buttons_04.gif" alt="VENUE HIRE" id="venue-hire-btn" /></a>
TIP: the above may be wrapped depending on your browser’s available screen size. To check that there are no line breaks, make sure that you turn off ‘word wrap’ in which ever coding program you use, and ensure that the code all appears on one line.
BIG THX, you saved my life. I was THAT close to going berserk over this damn resisting horizontal gaps.
There’s nothing worse than having a beautifully designed layout broken by silly little HTML idiosyncracies like this one
Big thanks!
I’m obviously just like you then! Thanks for posting this, saved me a lot of time searching…
There’s a lot of us out there
thanks so much, I was at the hit google stage when I found this post . . sorted.
Thank you so much, I do wonder though, is it possible to fix this with CSS? Because I’d prefer messier CSS than messier HTML. Thanks again! Michael.
There is an easier way. In stylesheet just add the magic command:
img {
display: block;
}
It works for me.
I swear if I had a million extra I would hand it over to you right now. THANK YOU!
A huge pat on the back. My problem is solved. Major thanks!
“display: block;” forces my images to stack vertically. Here is a good solution that allows you to keep your code tidy. Wrap your line breaks in comment tags. Tidy code with no spaces between the images.
My posted code sample got stripped out. Here it is again:
<a href=”/who.aspx”><img src=”nav_who.png” /></a><!–
–><a href=”/what.aspx”><img src=”nav_what.png” /></a><!–
–><a href=”/where.aspx”><img src=”nav_where.png” /></a><!–
–><a href=”/when.aspx”><img src=”nav_when.png” /></a><!–
–><a href=”/how.aspx”><img src=”nav_how.png” /></a>