Understanding the behavior of my CSS

[ellivrev]

Hi,

At this site >> ACQ (http://www.guyverville.com/divers/test.html), you'll see a resulting page (ASP coding).

There is a major wraper, "cadreprincipal",
which contains all the elements.

Then the div for the logo ("haut"), the div for the menu ("menu"), and the div for the content.

"cadreprincipal" has the main background.
Inside "cadreprincipal":
"Imagegauche" is floating left inside and contains an "img" (this image has to be modified by ASP coding)

"Contenu" is floating right. I've put a border to show you.

I simply don't understand why "contenu" , in IE, is not flush top right...

And... in Firefox, it doesn't work at all... the "contenu" is transparent, flushes the background of "cadreprincipal"...

Any idea?

Here is the CSS:
body,td{
font-family: "Trebuchet MS", "Bitstream Vera Sans", verdana, lucida, arial, helvetica, sans-serif;
font-size: .9em;
line-height: 150%;
margin: 0;
padding: 0;
}

div#bandegauche{
left: 0;
position: absolute;
top: 77px;
}

div#cadreprincipal{
background-color: #C0C0C0;
background-image: url(img/ray.jpg);
border: 4px solid #4A0000;
border-width: 0 4px;
color: #FFFFFF;
line-height: 130%;
margin: 0 auto;
min-height: 100%;
padding: 0;
position: relative;
width: 765px;
}

div#contenu{
background-image: url(img/bandedroite.jpg);
background-position: top right;
background-repeat: no-repeat;
border: 1px solid #000000;
color: #000000;
float: right;
margin: 0;
padding: 0 30px 0 0px;
width: 535px;
}

div#creditphoto{
color: #000000;
font-size: .8em;
left: 10px;
padding: 0 10px 0 0;
position: absolute;
text-align: left;
top: 490px;
width: 200px;
}

div#haut{
height: 50px;
}

div#imagegauche{
float: left;
width: 192px;
}

div#menu{
background-image: url(img/xp3b.gif);
height: 27px;
margin: 0px;
padding: 0 0 0 8px;
}

div#pied{
font-size: .8em;
height: 30px;
padding: 3px 0 0 3px;
text-align: center;
}

div.boite{
margin: 10px 0;
}

div.boite p{
color: #000000;
margin: 0;
padding: 5px 10px;
}

h1{
color: #7C1B1B;
font-size: 2 em;
margin: 0;
padding: 0 0 0 0;
}

h2{
font-size: 1.3em;
font-style: italic;
margin: 0 0 .5em 0;
padding: 0;
}

h3{
font-size: 1.2em;
font-style: normal;
margin: 0 0 .5em 0;
padding: 0;
}

h4{
border-color: #A9A9A9;
border-left-style: solid;
border-top-style: dashed;
border-width: 1px 0 0 3px;
color: #7C1B1B;
font-size: 1.2em;
font-weight: bold;
margin: 15px 0 0 0;
padding: 3px 0 0 10px;
}

p {
margin: 0;
padding: 5px 0 5px 0;
}

p.avertissement{
background: #FF00FF;
border-style: solid;
border-width: thick;
color: #000000;
display: none;
}

ul{
list-style: disc;
margin: 0 0 0 15px;
padding: 0;
}

.info{
background: #FFF7E5;
color: #000000;
font-size: 1em;
font-weight: bold;
padding: 2px;
}

[Fang]

One problem is //Insertion des documents in your html! <!-- html documentation -->

There also appears to be a problem with background-image: url(img/bandedroite.jpg); in div#contenu
It does not exist, no default background color is defined so IE (default transparent) so reverts to it's container, background #C0C0C0 (img/ray.jpg also not found) Moz. only applies the background of the html

[ellivrev]

Originally posted by Fang
One problem is //Insertion des documents in your html! <!-- html documentation -->

That was it! It was not in the APS code brackets. Thanks.

There also appears to be a problem with background-image: url(img/bandedroite.jpg); in div#contenu
It does not exist, no default background color is defined so IE (default transparent) so reverts to it's container, background #C0C0C0 (img/ray.jpg also not found) Moz. only applies the background of the html

All those background images are present in the img folder...

And why the "min-height" seems not to function? I'm certainly missing something :)

[Fang]

If you use a background image you should define a background color, yours are transparent by default.

min-height is not supported by IE.

[ellivrev]

Thank you for your invaluable comments. Is there any workaround about the IE limitation?

[Fang]

min-height hacks:
http://www.greywyvern.com/code/min-height-hack.html
http://www.svendtofte.com/code/max_width_in_ie/