Gap between pics 1

[JimJx]

Hi all,

I am trying to change a page from tables to CSS only and have already hit a problem. I have 2 header graphics that I need to butt up against each other, but I am getting a space of 3px or so. Any ideas?

body {
	margin:0px 0px; 
    padding:0px;
	text-align:center;
	}
	
#Content {
	width:781px;
	margin:0px auto;
	text-align:left;
	background-color:#fff;
	}

A:link {
	        TEXT-DECORATION: none;
            color: #0000ff;
}

A:hover {
	        TEXT-DECORATION: underline overline;
            color: #0000ff; 
}

a:visited {
          color: #0000ff;
}

a:active { 
         color: #0000ff;
}

.maintext {
	        font-family: Verdana, Arial, Helvetica, sans-serif;
	        font-size: 12px;
	        color: #ffffff;
	        line-height:16px;
}	

.bottom {
	        font-family: Verdana, Arial, Helvetica, sans-serif;
	        font-size: 10px;
	        color: #4985BC;
	        line-height:35px;
}

.headpic1 {
          margin: 0px 0px 0px 0px;
          float: left;
          padding:0px 0px 0px 0px;
}

.headpic2 {
          margin: 0px 0px 0px 0px;
          float: left;
          padding:0px 0px 0px 0px;
}

The HTML is

<div id="Content">
<div class="headpic1">
<img src="../MyHT/images/logo.jpg" width="215" height="153" alt="" border="0">
</div>
<div class="headpic2">
<img src="../MyHT/images/right_pic.jpg" width="564" height="153" alt="" border="0">
</div>
</div>

Thanks for any help.

Jim

 

[Vragabond]

Why put images in a div? Can't you simply float the images themselves?

That will solve your problem. Here's a quick why:

Images are inline elements -- just like text. You create two containers floated next to each other. Those two containers have two images. Two inline images. Here's where the problem starts. IE will probably take into account the white-space you have in your code and render a little space bar next to the images, hence the gap. Even FF sometimes puts some arbitrary space around images.

So, how does floating images help? Any element that is floated has to be displayed as a block. That means that the display of images is changed from inline to block and as such, the white-space and all the potential text gaps don't matter anymore.

All in all, by removing the divs you will make your page more semantically correct and get rid of your gaps.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BabyJeffy]

A quick fix is to get rid of whitespace between the wrapping div. You could easily restructure your code a little bit (and simplify the CSS a little) to get rid of unneeded elements...

<div id="Content"
  ><img src="../MyHT/images/logo.jpg" width="215" height="153" alt="" border="0" class="headpic"
  ><img src="../MyHT/images/right_pic.jpg" width="564" height="153" alt="" border="0" class="headpic"
></div>

Note that I have wrapped the previous element close tag to just before the opening tag of the image... this ensures there is no whitespace between the nodes - which is sometimes the cause of the problem you have described. You can just run it into one long line - but it doesn't read as well

Here is the revised css...

<style type="text/css">
#Content {
  width:781px;
  margin:0px auto;
  text-align:left;
  background-color:#fff;
  position: relative;
}
.headpic {
  margin: 0;
  padding:0;
  float: left;
}
</style>

Let us know how you go!

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BabyJeffy]

Ah - Vragabond's advice is good. I didn't refresh before I posted to realise he was up so early on a Saturday morning!

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[JimJx]

All excellent answers, thanks!

Jim