Member Avatar for ryy705

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>
  • 5 Contributors
  • 6 Replies
  • 103 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for techniner

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.

Member Avatar for ryy705

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.

Member Avatar for digital29

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

Member Avatar for ryy705

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

Member Avatar for ko ko

Float these images.

img {
        float: left
        }

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

Member Avatar for almostbob

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

Edited by almostbob because: n/a
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.