Check out this page: <!-- m --><a class="postlink" href="http://www.ann0yanc3.com/test/">http://www.ann0yanc3.com/test/</a><!-- m -->
In Internet Explorer, the center column DIVs render properly, right on top of each other. In Firefox, there is some whitespace between them. My HTML and CSS look right.
Any ideas?
Here's the CSS...
body{
color:#000;
background-image:url('images/bg.jpg');
}
p{
margin: 1em 0;
}
#container{
margin: 0 auto;
width:800px;
overflow:hidden;
border:1px solid #666;
background:#fff;
}
#services {
float:left;
width:299px;
position:relative;
background-image:url('images/services.jpg');
background-repeat: no-repeat;
border-right: 1px solid #666;
padding-bottom: 10px;
}
#services img {
margin-top: 115px;
margin-left: 35px;
border: 1px solid #666;
}
#services .description {
text-align: justify;
margin: 20px 0;
padding: 0 20px;
font-family: Verdana;
font-size: 12px;
}
#services .heading {
width: 200px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#services .heading h1 {
font-family: Verdana;
font-weight: bold;
font-size: 11px;
text-decoration: underline;
margin:0 0 10px 0;
}
#services .heading ul {
font-family: Verdana;
font-size: 10px;
list-style-type: square;
margin-top:0;
margin-bottom:0;
}
#commitment{
float:left;
width:300px;
padding:20px 0;
}
#commitment img.border {
display:block;
border: 1px solid #666;
margin:0 auto;
}
#commitment .header {
width:277px;
margin:0 auto;
}
#commitment .content {
width:235px;
margin:0 auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
background-image:url('images/commitment-bg.jpg');
background-repeat: no-repeat;
text-align: justify;
padding: 20px 20px 10px 20px;
font-family: Verdana;
font-size: 12px;
}
#commitment .footer {
width:277px;
margin:0 auto;
}
#rightpanel{
float:right;
width:200px;
position:relative;
background-color:#606;
}
Thanks.img {display:block;} (<!-- m --><a class="postlink" href="http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps">http://developer.mozilla.org/en/docs/Im ... rious_Gaps</a><!-- m -->)The default font height is making the div higher than the graphic - setting a small font size for the .footer resolves this #commitment .footer {
width:277px;
margin:0 auto;
font-size:1px;
}
Cheers
Graeme
edit: Noticed Fang's post after I posted, I keep forgetting about that one - the block removes the font size from the equation. I normally don't have that problem as I usually insert presentation graphics as backgrounds...Don't know why IE is ignoring this when it's 20px:
#commitment{
float:left;
width:300px;
padding: 0px 0;
}Thanks for the help. The font-size:1px fixed the issue at the bottom, and setting the height in the .header class fixed the top part. I didn't adjust the display type of the image or the padding.Read the link I gave; at least you will then know why this happens!
In Internet Explorer, the center column DIVs render properly, right on top of each other. In Firefox, there is some whitespace between them. My HTML and CSS look right.
Any ideas?
Here's the CSS...
body{
color:#000;
background-image:url('images/bg.jpg');
}
p{
margin: 1em 0;
}
#container{
margin: 0 auto;
width:800px;
overflow:hidden;
border:1px solid #666;
background:#fff;
}
#services {
float:left;
width:299px;
position:relative;
background-image:url('images/services.jpg');
background-repeat: no-repeat;
border-right: 1px solid #666;
padding-bottom: 10px;
}
#services img {
margin-top: 115px;
margin-left: 35px;
border: 1px solid #666;
}
#services .description {
text-align: justify;
margin: 20px 0;
padding: 0 20px;
font-family: Verdana;
font-size: 12px;
}
#services .heading {
width: 200px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
#services .heading h1 {
font-family: Verdana;
font-weight: bold;
font-size: 11px;
text-decoration: underline;
margin:0 0 10px 0;
}
#services .heading ul {
font-family: Verdana;
font-size: 10px;
list-style-type: square;
margin-top:0;
margin-bottom:0;
}
#commitment{
float:left;
width:300px;
padding:20px 0;
}
#commitment img.border {
display:block;
border: 1px solid #666;
margin:0 auto;
}
#commitment .header {
width:277px;
margin:0 auto;
}
#commitment .content {
width:235px;
margin:0 auto;
border-left: 1px solid #666;
border-right: 1px solid #666;
background-image:url('images/commitment-bg.jpg');
background-repeat: no-repeat;
text-align: justify;
padding: 20px 20px 10px 20px;
font-family: Verdana;
font-size: 12px;
}
#commitment .footer {
width:277px;
margin:0 auto;
}
#rightpanel{
float:right;
width:200px;
position:relative;
background-color:#606;
}
Thanks.img {display:block;} (<!-- m --><a class="postlink" href="http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps">http://developer.mozilla.org/en/docs/Im ... rious_Gaps</a><!-- m -->)The default font height is making the div higher than the graphic - setting a small font size for the .footer resolves this #commitment .footer {
width:277px;
margin:0 auto;
font-size:1px;
}
Cheers
Graeme
edit: Noticed Fang's post after I posted, I keep forgetting about that one - the block removes the font size from the equation. I normally don't have that problem as I usually insert presentation graphics as backgrounds...Don't know why IE is ignoring this when it's 20px:
#commitment{
float:left;
width:300px;
padding: 0px 0;
}Thanks for the help. The font-size:1px fixed the issue at the bottom, and setting the height in the .header class fixed the top part. I didn't adjust the display type of the image or the padding.Read the link I gave; at least you will then know why this happens!