DIV code produces line breaks - how to fix?

**WebDesignGeek972** · May 11, 2012 03:31

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:

Code HTML4Strict:

<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?

**ralph.m** · May 11, 2012 06:04

You probably just need to add this to the CSS:

Code:

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.

**John_Betong** · May 11, 2012 06:46

Originally Posted by WebDesignGeek972

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:

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?

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

HTML Code:

<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>

**RyanReese** · May 11, 2012 08:26

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

.

**WebDesignGeek972** · May 13, 2012 01:18

Originally Posted by ralph.m

You probably just need to add this to the CSS:

Code:

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.

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.

**ralph.m** · May 13, 2012 05:26

Originally Posted by WebDesignGeek972

I'm looking into the image map option for the image but it results in the image being huge - over 120 kB.

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

**WebDesignGeek972** · May 13, 2012 11:22

Originally Posted by ralph.m

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

Yes.

**ralph.m** · May 13, 2012 15:51

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/ht...inners-guide-/

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

User Tag List

Thread: DIV code produces line breaks - how to fix?

Thread Tools

Display

DIV code produces line breaks - how to fix?

Bookmarks

Bookmarks

Posting Permissions