• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 218
  • Last Modified:

div and images in css

mcdown75, Cd&, and others

I created a web page using all div but for some reason when I display the web page there are tiny white spaces between by three graphics that go together to make up my top design for my web page.

Can this be fixed?

Here is the code:

.div800 {
     position: relative;
     height: auto;
     float: none;
     font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     width: 762px;
     voice-family: "\"}\"";
     voice-family:inherit;
}
.div750 {
     position:absolute;
     left:500px;
     top:410px;
     border-style: outset;
     border-color: red       

     
}

.div375 {
     float: left;
     margin: 0px 0px 0px 1px;
     padding: 1px 1px 1px 1px;
     font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
     height: auto;
     width: 375px;
     voice-family: "\"}\"";
     voice-family:inherit;
}

.div167 {
     float: left;
     margin: 0px 0px 0px 1px;
     padding: 1px 1px 1px 1px;
     font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
     height: 125;
     width: 167px;
     voice-family: "\"}\"";
     voice-family:inherit;
}
.div144{
     float: left;
     margin: 0px 0px 0px 1px;
     padding: 1px 1px 1px 1px;
     font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
     height: 60;
     width: 144px;
     voice-family: "\"}\"";
     voice-family:inherit;
}
.div326 {
     float: left;
     margin: 0px 0px 0px 1px;
     padding: 1px 1px 1px 1px;
     font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
     height: 125;
     width: 326px;
     voice-family: "\"}\"";
     voice-family:inherit;
}
.div238 {
     float: left;
     margin: 0px 0px 0px 1px;
     padding: 1px 1px 1px 1px;
     font: normal normal normal 8pt/10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
     height: 125;
     width: 238px;
     voice-family: "\"}\"";
     voice-family:inherit;
}
-->
</style>

<div class="div800"><div class="div167"><img src="page_r1_c1.jpg"></div><div class="div326"><img src="page_r1_c2.jpg"></div><div class="div238"><img src="r1_fill.jpg"></div></div>

thanks for all insights,

Don
0
dprice7
Asked:
dprice7
  • 2
1 Solution
 
dprice7Author Commented:
by the way if I display the exact same thing in a table it all looks right and there are no gaps. :(
0
 
COBOLdinosaurCommented:
Don

You have padding 1px 1px 1px 1px that causes the images to be rendered 1 px from the edge of the div. Changing them to padding:0px should solve the problem.

Cd&
0
 
dprice7Author Commented:
Cd&,

I actually already discovered the error with the padding after I asked the dumb question..

sorry..

It is actually starting to look like something now. Still trying to get the external pieces to work though nothing happens when I define them externally.

thanks,
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now