SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Easy one I thought: two overlapping layers...

    Hey,

    I tried overlapping two boxes like this:

    .contentbar {
    border: 1px solid #999999;
    text-align: center;
    padding: 1px;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: -6px;
    }
    .postbox {
    border: 1px solid #999999;
    position: relative;
    margin-left: 150px;
    margin-top: 15px;
    color: #999999;
    text-align: justify;
    }

    <div class="postbox">
    <div class="contentbar">top</div>
    <div style="margin: 2px;">blablabla</div>
    </div>


    Very simple, works as expected in IE:mac and mozilla, but... I cannot get it right in ie for windows...

    Any suggestions?

    Thanks!

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the expected result?

    I get exactly the same layout in IE6, NS6 & Mozilla on Win2000:
    Code:
               +-----------------------------+
    +----------+-----------------------------+---------+
    |          |          top                |         |
    |          +-----------------------------+         |
    |  blablabla                                       |
    |                                                  |
    +--------------------------------------------------+

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is the expected result. It appears to be an IE5 problem only.

    IE5 does not overlap both boxes. It only stretches the larger one by 6 pixels like this:

    Code:
    +----------+-----------------------------+---------+
    |          |            top              |         |
    |          +-----------------------------+         |
    |  blablabla                                       |
    |                                                  |
    +--------------------------------------------------+
    If I insert a position: relative for the top box it starts drawing the box from the center, so everything is screwed up.

    Weird.

  4. #4
    SitePoint Wizard silver trophy TheOriginalH's Avatar
    Join Date
    Aug 2000
    Location
    Thailand
    Posts
    4,810
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It's IE 5's fault - MS ballsed up the box model. Skunk kindly helped me with exactly this issue recently in this thread - the answer lies therein
    ~The Artist Latterly Known as Crazy Hamster~
    922ee590a26bd62eb9b33cf2877a00df
    Currently delving into Django, GIT & CentOS

  5. #5
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have got to help me a little bit then, I guess...

    The width of the boxes are both auto, I only tell them how to postion themself (relative) in the text flow.

    The height is controlled by the amount of text, the width depending on the browsers window size.

    So I cannot apply the box model hack here. Also, I only tell the second box to move up a litte bit (6 pixels above the box where it is placed in).

    Point it out to me if I misunderstood you, but from what I understand, the box hack only corrects the width of boxes, not the incorrect rendering of margins and padding (because that is rendered ok, but only from the inside).


Bookmarks

Posting Permissions

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