Problems with background colour in nested div blocks.

Discussion in 'HTML' started by damezumari, Oct 8, 2008.

  1. damezumari

    damezumari Guest

    I am trying to create a blue header with two images and text.

    The page is found at http://easyquestion.net/testing/index.php.

    It works as intended in Ie6, but neither in Chrome nor in Mozilla
    Firefox.

    The code has been validated as html and css. Here is the code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1252">
    <title></title>
    </head>
    <body>

    <div style="background-color: #2584BC; width: 980px;">
    <div style="float:left; padding-left:45px;"><img src="images/middle-
    logo122.gif" alt="image"></div>
    <div style="float:right; padding-right:40px;"><img src="images/
    garden2.jpg" alt="image"></div>
    </div>

    <div style="background-color: #2584BC; width: 980px; margin-top:
    -20px;">
    <div style="float:right; font-family: Times, serif; font-size: 13px;
    color:white; margin-bottom:10px; padding-right: 40px;">Garden
    International School, 182/24 Moo 4, Pala Road, Ban Chang, Rayong
    21130, THAILAND - Tel: 00 66 (0) 38 880 360</div>
    </div>

    </body>
    </html>

    What am I doing wrong?

    Regards,

    Jan Nordgreen
    damezumari, Oct 8, 2008
    #1
    1. Advertising

  2. damezumari

    Els Guest

    damezumari wrote:

    > I am trying to create a blue header with two images and text.
    >
    > The page is found at http://easyquestion.net/testing/index.php.
    >
    > It works as intended in Ie6, but neither in Chrome nor in Mozilla
    > Firefox.


    [snip]

    > What am I doing wrong?


    The floated divs aren't seen by their parent.
    This makes the parent have zero height, so you can't see its
    background.

    dorayme has a nice set of pages that explain all the details, here:
    http://netweaver.com.au/floatHouse/

    --
    Els http://locusmeus.com/
    Els, Oct 8, 2008
    #2
    1. Advertising

  3. damezumari

    damezumari Guest

    Thanks a lot Els! I had no idea.

    I added a height and now it works in all browsers.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1252">
    <title></title>
    </head>
    <body>

    <div style="background-color: #2584BC; width: 980px; height: 170px;">
    <img style="float:left; padding-left:45px;" src="images/middle-
    logo122.gif" alt="image">
    <img style="float:right; padding-right:40px;" src="images/garden2.jpg"
    alt="image">
    <p style="clear: both; background-color: #2584BC; width: 980px;
    height: 50px; text-align:right; font-family: Times, serif; font-size:
    13px; color:white;">Garden
    International School, 182/24 Moo 4, Pala Road, Ban Chang, Rayong
    21130, THAILAND - Tel: 00 66 (0) 38 880
    360&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</
    p>
    </div>
    </body>
    </html>

    Well, to be honest, the padding-right part doesn't work well in IE,
    but that is OK.

    I am sure the code can be simplified. Any suggestions?

    Regards,

    Jan Nordgreen
    damezumari, Oct 8, 2008
    #3
  4. damezumari

    Ari Heino Guest

    damezumari kirjoitti seuraavasti:
    > I am sure the code can be simplified. Any suggestions?


    How about

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Garden International School</title>
    <style type="text/css">
    #box {
    background: rgb(37, 132, 188)
    url(images/middle-logo122.gif) no-repeat top left;
    color: #fff;
    float: left;
    }

    #inner-box {
    background: transparent
    url(images/garden2.jpg) no-repeat top right;
    width: 980px;
    height: 170px;
    float: left;
    }

    address {
    font-family: Times, serif;
    font-size: 90%;
    font-style: normal;
    margin: 125px 5px 0 0;
    text-align: right;
    }
    </style>
    </head>
    <body>
    <div id="box">
    <div id="inner-box">
    <address>
    Garden International School, 182/24 Moo 4, Pala Road, Ban
    Chang, Rayong 21130, THAILAND - Tel: 00 66 (0) 38 880 360
    </address>
    </div>
    </div>
    </body>
    </html>


    css should later be placed to an external style sheet.
    --
    Ari
    http://users.utu.fi/athein/
    Ari Heino, Oct 8, 2008
    #4
  5. damezumari

    Bergamot Guest

    damezumari wrote:
    >
    > The page is found at http://easyquestion.net/testing/index.php.
    >
    > It works as intended in Ie6, but neither in Chrome nor in Mozilla
    > Firefox.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


    FYI, that DOCTYPE triggers quirks mode in all browsers. Don't expect
    anything to be consistent. Switch to HTML 4.01 Strict and you'll get
    much better results.

    --
    Berg
    Bergamot, Oct 8, 2008
    #5
  6. damezumari

    Neredbojias Guest

    On 08 Oct 2008, damezumari <> wrote:

    > It works as intended in Ie6, but neither in Chrome nor in Mozilla
    > Firefox.


    Ah, so many times have I seen that very same disclaimer...

    It actually means there is a 100% chance you did something wrong.

    --
    Neredbojias
    http://www.neredbojias.org/
    Great Sights and Sounds
    Neredbojias, Oct 8, 2008
    #6
  7. damezumari

    damezumari Guest

    Thanks for all the feedback!

    Thank you Airo Heino for writing neater code!

    Regards,

    Jan Nordgreen
    damezumari, Oct 10, 2008
    #7
  8. damezumari

    Ari Heino Guest

    damezumari kirjoitti seuraavasti:
    > Thank you Airo Heino for writing neater code!


    That's Ari but thanks anyway!

    --
    Ari
    http://users.utu.fi/athein/
    Ari Heino, Oct 11, 2008
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. HJ
    Replies:
    5
    Views:
    844
    Jonathan N. Little
    Sep 1, 2006
  2. jc
    Replies:
    3
    Views:
    1,728
  3. matt
    Replies:
    1
    Views:
    256
    George Ogata
    Aug 6, 2004
  4. Dj Frenzy
    Replies:
    3
    Views:
    307
    Robert
    Feb 10, 2004
  5. jodleren
    Replies:
    2
    Views:
    197
    Thomas 'PointedEars' Lahn
    Jan 12, 2008
Loading...

Share This Page