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
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
thanks for all insights,
Don
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&
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER