Sat, 2004-03-06 12:40
Hiya,
I have come across a problem that i cant seem to find an answer for, can you help please?
it happens when i use a background image in a div. I specify the height of the image in a css file to force the div height to the height of the image (otherwise it wont show) when thats done for some reason in ie6 it puts a blank gap under the image whereas in mozilla it shows as should be expected.
please check this url for what i explained above, its a lot easier to understand.
YOU CAN VIEW THE PROBLEM HERE:
http://www.zedmeister.com/~dpetrie/Untitled-2.gif
this is the css for the box that is in the picture
/*-----------------------left column stuff ---------------------------*/
div.left-box{ /* box containing all left column*/
float:left;
width:185px;
border:0px solid #000000;
margin: 0px 0px 0px 0px;
}
div.left-box-top{
background-image:url(images/leftmenutop_01.gif);
background-repeat:no-repeat;
border:0px solid #000000;
height:8px;
width:185px;
margin: 0px 0px 0px 0px;
}
div.left-col-news{ /* light pink container around darker pink */
background-color:#FCF6F6;
}
div.left-col-content-container-news{ /* container for content in left column */
width:173px;
background-color:#F3EDF3;
margin-left:6px;
}
div.left-col-content-news{ /* content in left column */
margin-left:3px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
color:#6D6A6A;
}
div.left-box-bottom{
background-image:url(images/leftmenubottom_01.gif);
background-repeat:no-repeat;
height:8px;
width:185px;
margin:0px 0px 0px 0px
}
THIS IS THE HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>3 Column: NEWS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="3columnnews.css">
</head>
<body>
<div class="left-box">
<div class="left-box-top"></div>
<div class="left-col-news">
<div class="left-col-content-container-news">
<div class="left-col-content-news">left column content here and loads of stuff blah blah</div>
</div>
</div>
<div class="left-box-bottom"></div>
</div>
Mon, 2004-03-08 23:18
#1
mozilla + ie6 div background image inconsistency ! hmm..?
hmmm....
is there no answer?? or is the answer so obvious that no one is telling me?
Tue, 2004-03-09 04:15
#2
mozilla + ie6 div background image inconsistency ! hmm..?
IE has a problem with small heights
In the following you have set an 8px height, but line height or font zise is larger, so IE makes the height larger
div.left-box-top{
background-image:url(images/leftmenutop_01.gif);
background-repeat:no-repeat;
border:0px solid #000000;
height:8px;
width:185px;
margin: 0px 0px 0px 0px;
}
Add overflow: hidden; to the above div and it will work. Did not check the others, so there may be more you need to add it to.
Note: it is difficult to see a problem if a link is not provided. In this case I could not check the size of the background image.
Regards
Day
Tue, 2004-03-16 20:01
#3
mozilla + ie6 div background image inconsistency ! hmm..?
hey, thanks a lot! that was the answer to my problem. thanks man!!
Sun, 2007-03-04 13:21
#4
Thanks!
I've had the same problem. It's been bugging me all week!
I'll come back here again...