Back to absolute basics

  • Article

It's the little things you forgot when you stop work with any technology on a regular basis. I was bashing my head against the wall earlier for about thirty minutes trying to figure out why this code

 <img id="sliderLeftEdge" height="4" src="slider_end.gif" width="1" >
<img id="sliderBody" height="4" src="slider_body.gif" width="100">
<img id="sliderRighttEdge" height="4" src="slider_end.gif" width="1">

renders like this:

I don't want any spaces between the images! I added styles to set the margin, border, and padding all to 0 with no effect. Of course anyone who's worked with HTML for more than a day in recent history will realize that the carriage returns in the source code equate to spaces in the output; blindingly obvious for text, but somehow it just didn't click for images.

So, now my code looks like this:

 <img
id="sliderLeftEdge" src="slider_end.gif" height="4" width="1"
><img 
id="sliderBody" src="slider_body.gif" height="4" width="1"
><img 
id="sliderRighttEdge" src="slider_end.gif" height="4" width="1">

and everything is working as expected.