Link to home
Start Free TrialLog in
Avatar of dprice7
dprice7

asked on

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
Avatar of dprice7
dprice7

ASKER

by the way if I display the exact same thing in a table it all looks right and there are no gaps. :(
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&
ASKER CERTIFIED SOLUTION
Avatar of dprice7
dprice7

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial