Hello,
I've cut up a single image into two and I would like them to sit on top of each other. Unfortunately, I can't get rid of the empty space between the two images.

How is this done?
Please copy and paste the code if you wish to view it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#canvas {
  margin-left: auto;
  margin-right: auto;
  width:969px; 
}

#imgCont{
 float:left;
 width:276px;
}
#imgCont img{
 padding:0;
 margin:0;
 border-top: 1px solid blue;
 border-bottom:1px solid black;
}
</style>
<title>Conforming XHTML 1.1 Template</title>

</head>

<body>
  <div id="canvas">
   <div id="imgCont"
     <img src="http://goyami.corante.com/archives/images/july4th05.gif" />

	 <img src="http://www.logoogle.com/images/logooward/july4th04.gif" />
   </div><!--/#imgCont"-->
  </div><!--/#canvas-->

</body>
</html>

Hello,
I've cut up a single image into two and I would like them to sit on top of each other. Unfortunately, I can't get rid of the empty space between the two images.

How is this done?
Please copy and paste the code if you wish to view it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
#canvas {
  margin-left: auto;
  margin-right: auto;
  width:969px; 
}

#imgCont{
 float:left;
 width:276px;
}
#imgCont img{
 padding:0;
 margin:0;
 border-top: 1px solid blue;
 border-bottom:1px solid black;
}
</style>
<title>Conforming XHTML 1.1 Template</title>

</head>

<body>
  <div id="canvas">
   <div id="imgCont"
     <img src="http://goyami.corante.com/archives/images/july4th05.gif" />

	 <img src="http://www.logoogle.com/images/logooward/july4th04.gif" />
   </div><!--/#imgCont"-->
  </div><!--/#canvas-->

</body>
</html>

I suggeest using css style sheet or inline css to pad 0px to place them right next to each other.

padding-right: 0; and padding-left: 0px; on the other side.

I suggeest using css style sheet or inline css to pad 0px to place them right next to each other.

padding-right: 0; and padding-left: 0px; on the other side.

padding and margins are already set to 0.
And the images are set up to line up vertically.

have you tried margin-bottom: -10px; ?
I know it sounds strange...but I have been using this method for a while and it works good..

Would anyone know why I have to set margin-bottom:-10px why wouldn't margin:0 work?

Float these images.

img {
        float: left
        }

Notice that float makes browser debug. But it should work.

production code should not be indented, it causes problems
whitespace in your code
html interprets whitespace as a space
multiple tabs and spaces before <img are a space,
that space shows between the images

<img src="http://goyami.corante.com/archives/images/july4th05.gif" /><img src="http://www.logoogle.com/images/logooward/july4th04.gif" />

no space

I assume the closing > in line 31 is a typo and not reflected in the code with problems

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.