dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: Understanding the behavior of my CSS

  1. #1
    Join Date
    Jun 2004
    Posts
    6

    Understanding the behavior of my CSS

    Hi,

    At this site >> ACQ, 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;
    }
    Last edited by ellivrev; 07-01-2004 at 01:42 PM.

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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
    Last edited by Fang; 07-01-2004 at 04:47 PM.

  3. #3
    Join Date
    Jun 2004
    Posts
    6
    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

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    If you use a background image you should define a background color, yours are transparent by default.

    min-height is not supported by IE.

  5. #5
    Join Date
    Jun 2004
    Posts
    6
    Thank you for your invaluable comments. Is there any workaround about the IE limitation?

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles