4 replies [Last post]
csshead
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-03-06
Posts: 3
Points: 0

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>

csshead
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-03-06
Posts: 3
Points: 0

mozilla + ie6 div background image inconsistency ! hmm..?

hmmm....

is there no answer?? or is the answer so obvious that no one is telling me?
Evil

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 16 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

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

The only way to learn is to do it yourself

csshead
Offline
newbie
Last seen: 16 years 23 weeks ago
Joined: 2004-03-06
Posts: 3
Points: 0

mozilla + ie6 div background image inconsistency ! hmm..?

hey, thanks a lot! that was the answer to my problem. thanks man!!

craig552uk
craig552uk's picture
Offline
newbie
Last seen: 13 years 23 weeks ago
Joined: 2007-03-04
Posts: 1
Points: 0

Thanks!

I've had the same problem. It's been bugging me all week!
I'll come back here again...