PDA

View Full Version : spacing issues in IE7 -- help!



archaeologist
Mar 4th, 2008, 09: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;
}

jcdevelopment
Mar 4th, 2008, 10:02 PM
which div or class is wrapping those images?

archaeologist
Mar 4th, 2008, 10:47 PM
mastheadimg - wrapping the top image (not visible in photo)
wrap - wrapping the entire body of images
threecol - wrap the three columns of information/pictures

does this help?

Apostropartheid
Mar 5th, 2008, 06:24 PM
Why would you define Lucida Grande and not Lucida Sans Unicode? They're essentially the same fonts (MS and Apple have a deal for a few web essential ones to be cross-platform compatible.)

maxvee8
Mar 5th, 2008, 06:46 PM
maybe ...


html, body {
padding: 0;
margin: 0;
border: 0;
}