archaeologist
03-04-2008, 08:18 PM
:confused:
Everything looks great, except there is a small space divs.
There is a picture of what's happening here:
http://flickr.com/photos/mostfamiliar/2216531317/sizes/o/
You can see the breaks in the left and right corner and bottom left.
I don't know how to fix this or what's causing it. At first I thought there might be div paddings that were causing it but i checked those and it seems fine. I am creating the site with ASP.net.
CSS:
* {
margin: 0;
padding: 0;
}
/* retag */
body {
}
p {
margin: 0;
padding: 0 0 0px 0;
font: 11px/17px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
color: black;
}
h3 {
font: 16px/22px Helvetica, Arial, sans-serif;
color: black;
padding-bottom: 15px;
}
td, div, span {
font: 11px/17px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
}
ul, ol {
margin: 0;
padding: 0;
}
li {
font: 11px/17px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
padding-bottom: 10px;
color: black;
}
a {
font-weight: bold;
}
a:link {
color: #ED667A;
}
a:visited {
color: #F697A5;
}
a:active {
color: #FFF;
}
a:hover {
color: #E8DAC1;
}
html * {
padding: 0;
margin: 0;
border: 0;
}
/* main wrapper */
#wrap {
width: 730px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#mastheadimg {
float: left;
line-height: 0em;
margin 0;
border: 0px;
padding: 0px;
}
/*columns*/
#threecol
{
background-image: url(c:/images/bkg.gif); background-repeat: repeat-y;
text-align: left;
float: left;
width: 725px;
line-height: 0em;
margin 0;
border: 0px;
padding: 0px;
}
/* middle borders */
#threecol-centre, #threecol-right {
float: left;
margin-right: 5px;
padding: 0px 0 0 10px;
width: 215px;
border-bottom: 1px solid #FFF;
}
#threecol-left {
float: left;
margin-right: 5px;
padding: 0px 0 0 20px;
width: 215px;
border-bottom: 1px solid #FFF;
}
/* homepage specific */
#threecol-left img, #threecol-centre img, #threecol-right img {
padding: 0 0 4px 4px;
margin: 0 0 7px 0px;
border: 0;
}
#threecol-left h3, #threecol-centre h3, #threecol-right h3 {
margin: 0 20px 15px 0;
}
/* headings */
#threecol h2 a {
display: block;
text-decoration: none;
text-indent: -5000px;
border-bottom: 1px solid #FFF;
margin: 22px 0 15px 20px;
width: 205px;
height: 30px;
}
/* test */
#box1, #box2, #box3, #box4, #box6
{border: 1px dashed #cbcdcc;
height: 220px;
}
#box5, #box7
{border: 1px dashed #cbcdcc;
height: 300px;
}
/* text */
#threecol p, #threecol h3 {
padding: 0 5px 5px 5px;
margin: 0;
}
#threecol h3 {
padding-bottom: 7px;
}
/* footer */
#footer {
text-align: left;
padding-right: 10px;
}
.footerlinks strong {
color: #FFF;
font-weight: bold;
}
Everything looks great, except there is a small space divs.
There is a picture of what's happening here:
http://flickr.com/photos/mostfamiliar/2216531317/sizes/o/
You can see the breaks in the left and right corner and bottom left.
I don't know how to fix this or what's causing it. At first I thought there might be div paddings that were causing it but i checked those and it seems fine. I am creating the site with ASP.net.
CSS:
* {
margin: 0;
padding: 0;
}
/* retag */
body {
}
p {
margin: 0;
padding: 0 0 0px 0;
font: 11px/17px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
color: black;
}
h3 {
font: 16px/22px Helvetica, Arial, sans-serif;
color: black;
padding-bottom: 15px;
}
td, div, span {
font: 11px/17px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
}
ul, ol {
margin: 0;
padding: 0;
}
li {
font: 11px/17px "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
padding-bottom: 10px;
color: black;
}
a {
font-weight: bold;
}
a:link {
color: #ED667A;
}
a:visited {
color: #F697A5;
}
a:active {
color: #FFF;
}
a:hover {
color: #E8DAC1;
}
html * {
padding: 0;
margin: 0;
border: 0;
}
/* main wrapper */
#wrap {
width: 730px;
height: 500px;
margin: 0 auto;
text-align: center;
}
#mastheadimg {
float: left;
line-height: 0em;
margin 0;
border: 0px;
padding: 0px;
}
/*columns*/
#threecol
{
background-image: url(c:/images/bkg.gif); background-repeat: repeat-y;
text-align: left;
float: left;
width: 725px;
line-height: 0em;
margin 0;
border: 0px;
padding: 0px;
}
/* middle borders */
#threecol-centre, #threecol-right {
float: left;
margin-right: 5px;
padding: 0px 0 0 10px;
width: 215px;
border-bottom: 1px solid #FFF;
}
#threecol-left {
float: left;
margin-right: 5px;
padding: 0px 0 0 20px;
width: 215px;
border-bottom: 1px solid #FFF;
}
/* homepage specific */
#threecol-left img, #threecol-centre img, #threecol-right img {
padding: 0 0 4px 4px;
margin: 0 0 7px 0px;
border: 0;
}
#threecol-left h3, #threecol-centre h3, #threecol-right h3 {
margin: 0 20px 15px 0;
}
/* headings */
#threecol h2 a {
display: block;
text-decoration: none;
text-indent: -5000px;
border-bottom: 1px solid #FFF;
margin: 22px 0 15px 20px;
width: 205px;
height: 30px;
}
/* test */
#box1, #box2, #box3, #box4, #box6
{border: 1px dashed #cbcdcc;
height: 220px;
}
#box5, #box7
{border: 1px dashed #cbcdcc;
height: 300px;
}
/* text */
#threecol p, #threecol h3 {
padding: 0 5px 5px 5px;
margin: 0;
}
#threecol h3 {
padding-bottom: 7px;
}
/* footer */
#footer {
text-align: left;
padding-right: 10px;
}
.footerlinks strong {
color: #FFF;
font-weight: bold;
}