Posted by J.f.k. on 01/12/04 11:29

Hi to all,
I've a problem with a strange bahaviour in Ms I.E.(6)..
I've created a page via css with a <div> container that includes some divs :
(Header, Left Column, Content, Right Column, Footer)
Almost everything works fine....
My problem is related to div#Content.

This is the css style for Content

DIV#content {
background-color: #999999;
min-height:350px;
margin-right: 140px;
margin-left: 140px;
}

It needs to put the div between the columns and it works fine. (
Obviouslythere are some float in left and right divs to achieve the goal)


In html page the code is :
<div id="content">
<?php include("novar.htm"); ?>
</div>

This php get the value in "novar.htm" that is this:

<div id="mainbackground"></div>

This div simply uses an img to set itself for a background with a jpg.
Here the css code
#mainbackground {
min-height: 350px;
background-image: url(../immagini/Content.jpg);
background-repeat: no-repeat;
}

And the problem is here!!!!
With Firefox the syntax "min-height" works and I see the jpg included in the
div (so the page is showed correctly), meanwhile Internet Explorer jumps the
line "min-height" and the div height remain about 20px so I can't see the
jpg.
I've tried to set "height:350px;" in css code (mainbackground div) and it
works but I.E. adds 2 spaces of 3 pixels (right and left) at the div... WHY?
How to leave off those "borders"?

How can I solve this dilemma?
I guess is an IE bug but I can't find a cross-browser solution...

Sorry for my english...
Thanks in advance
Gianfranco
PS If this is the wrong place to post this msg, my apologies
Ciao

[Back to original message]