DIV code produces line breaks - how to fix?

HTML & CSS
1

Ok what CSS do I need to add to fix line breaks in DIV code? Here’s what I’m trying to do: I want to create an image that is sliced in DIVs. It’s a 3 columns 3 row slice. So, I create code like so, but every row has a break that creates spaces between the row of images (the columns don’t have any problems). What am I doing wrong? And what CSS do I need to use to fix it? Here’s a sample of the code:


<div>
<img src="image name.jpg" width="100" height="100" border="0" alt="image name">
<img src="image name2.jpg" width="100" height="100" border="0" alt="image name">
<img src="image name3.jpg" width="100" height="100" border="0" alt="image name">

<!-- This is where the line break between rows of images occurs even though no <br>s are used -->

<img src="image name4.jpg" width="100" height="100" border="0" alt="image name">
<img src="image name5.jpg" width="100" height="100" border="0" alt="image name">
<img src="image name6.jpg" width="100" height="100" border="0" alt="image name">

<!-- This is where the line break between rows of images occurs even though no <br>'s are used -->

<img src="image name4.jpg" width="100" height="100" border="0" alt="image name">
<img src="image name5.jpg" width="100" height="100" border="0" alt="image name">
<img src="image name6.jpg" width="100" height="100" border="0" alt="image name">
</div>

Each row of images horizontally is fine - there are no breaks in the images. But going from one row to the next, there are. How to fix?

2

You probably just need to add this to the CSS:

img {vertical-align: bottom}

That’s because images, by default, align with the baseline of any text that might sit beside them, leaving room below for the descenders.

Any reason why you are slicing the image up? You probably don’t need to do that. :slight_smile:

3

You could also try font-size: 0px or float: left - both work:



<style type='text/css'>
  #fred {width:330px; height:420px; outline:solid 1px #f00; font-size: 0px}
  #fred img {float:left; width:100px; height:100px; border:0; margin:0px; padding:0}
</style>  
</head>
<body>

<div id='fred'>
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
  <img src="http://subdomain.localhost/thumb/chain_letter_thumb.jpg"  alt="image name" />
/div>
4

Font-size:0 dooesn’t work in Opera, just so you know, ify ou pick that option :).

5

Thank you Ralph! Vertical-align worked. I’m looking into the image map option for the image but it results in the image being huge - over 120 kB.

6

So the purpose of this is to have different parts of the image clickable?

7

Yes.

8

Image maps are a bit old hat. A nice way to do this is with a sprite image. E.g.

http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

What you need is much simpler than the one in that example.