[newbie] Div results empty in Ie, works in FF

[J.f.k.]

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

 

[Toby Inkster]

Internet Explorer jumps the line "min-height"

Current versions of Internet Explorer doesn't support min/max-height/width.

Google: Dean Edwards IE7

Might be of some use.

 

[Toby Inkster]

cross-browser solution...

PS: if you're just looking for a three-column layout, look at:

http://examples.tobyinkster.co.uk/3col

(I really ought to get it tested and working in Mac IE and iCab.)

Sorry for my english...

It's better than my Italian.

 

[J.f.k.]

PS: if you're just looking for a three-column layout, look at:

http://examples.tobyinkster.co.uk/3col

(I really ought to get it tested and working in Mac IE and iCab.)

Thanks...But I think layout works fine too
The problems still remains if I get the simple div stand-alone... I know
about IE bug about height (it adds verticatal "borders" on external parts of
the div if there are some float div near to) .... but I'd like to hack the
bug ...

I try to semplify:
If I had an empty DIV only with jpg background (fixed dimensions).. how to
see for its complete height? (I've tried every combination of "display :
...." but nothing...)
I hoped to solve with min-height but it works as you know only with Firefox,
ok...but how to solve for IE? If I use height:350px; it shows the jpg AND
the bug.
Any ideas?
Thanks a lot, ciao
Gianfranco

 

[Quasimido CSS]

"J.f.k." <[email protected]> in

snip

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

i'm not having to bother with Ie, lucky me.

however, i've seen some things about specifying seemingly redundant height or width to
divs to help out IE.

i've checked some of my pages in IE, and IE hasn't been clipping anything (except where
i've used large negative margins)

you could try experimenting with height:100%
or height:99.5%
or try same with % widths

then see if your rendered heights become "automatic" as mine seem to be.

 

[Toby Inkster]

The problems still remains if I get the simple div stand-alone... I know
about IE bug about height (it adds verticatal "borders" on external parts of
the div if there are some float div near to) .... but I'd like to hack the
bug ...

Not sure what you mean.

Probably best if you provide a URL to an example: a minimal example, with
everything stripped away except what is required to show the bug.

 

[J.f.k.]

Thanks, finallòy I solved...was a mix of my mistake (a padding border to get
off) and a margin to avoid for Firefox and needed for Ie... so I've learned
that:
min-height works for FF but not for IE
// tags in css style works for Ie and NOT for FF...

Solution was to declare min-height to 350px (FF) and height to 350px (IE)
and adds a // margin-top:-15px (IE)...

Thank you very much
Ciao
Gianfranco