CSS boxing

Discussion in 'HTML' started by Long, Jan 20, 2004.

  1. Long

    Long Guest

    The following seems to work as planned on Mozilla, but has an
    ugly gap between .bodyleft and .bodyright when viewing in IE.

    What sort of IE hack can fix it for IE?

    <HTML>
    <HEAD>
    <TITLE>CSS Box Test</TITLE>
    <STYLE type="text/css">
    <!--
    body {
    margin:0px;
    }
    .bodytop {
    border: 1px solid #000;
    height: 60px;
    }
    .bodyleft {
    float: left;
    border: 1px solid #000;
    height: 120px;
    width: 200px;
    }
    .bodyright {
    border: 1px solid #000;
    height: 120px;
    margin-left: 200px;
    }
    -->
    </STYLE>
    </HEAD>
    <BODY>
    <DIV CLASS="bodytop">
    <P>bodytop section</P>
    </DIV>
    <DIV CLASS="bodyleft">
    <P>bodyleft section</P>
    </DIV>
    <DIV CLASS="bodyright">
    <P>bodyright section</P>
    </DIV>
    </BODY>
    </HTML>

    ..long
     
    Long, Jan 20, 2004
    #1
    1. Advertising

  2. Long

    Paul Furman Guest

    Long wrote:

    > The following seems to work as planned on Mozilla, but has an
    > ugly gap between .bodyleft and .bodyright when viewing in IE.
    >
    > What sort of IE hack can fix it for IE?
    >
    > body {
    > margin:0px;
    > }
    > .bodytop {
    > border: 1px solid #000;
    > height: 60px;
    > }
    > .bodyleft {
    > float: left;
    > border: 1px solid #000;
    > height: 120px;
    > width: 200px;
    > }
    > .bodyright {
    > border: 1px solid #000;
    > height: 120px;
    > margin-left: 200px;




    I don't know but you've also got the borders doubling up which I was
    able to fix (for tables) with border-collapse: collapse;

    Sorry I can't be more help.
     
    Paul Furman, Jan 20, 2004
    #2
    1. Advertising

  3. Long

    rf Guest

    "Long" <> wrote in message
    news:8m1Pb.128333$...
    > The following seems to work as planned on Mozilla, but has an
    > ugly gap between .bodyleft and .bodyright when viewing in IE.


    IE has a badly broken box model, it breaks in many ways when you use float.
    This is just one of them.

    > What sort of IE hack can fix it for IE?


    Don't specify height for that right hand div.

    Why do you use height anyway? Can you guarantee that your content will be
    less than 200 pixels high?

    Cheers
    Richard.
     
    rf, Jan 20, 2004
    #3
  4. Long

    Paul Furman Guest

    rf wrote:

    > "Long" wrote:
    >
    >>What sort of IE hack can fix it for IE?

    >
    >
    > Don't specify height for that right hand div.



    So I get the following... with zero border to overcome the
    border-collapse: collapse issue
    http://www.edgehill.net/html/css/css-template.htm
    (but it has a gap if I put longer text in the bodyleft)
    I'm just learning this, thanks for the exercise!

    PS this example doesn't have these issues, I can't tell why:
    http://www.edgehill.net/html/css/css-template2.htm
    (I stripped out as much as I could from the original)
     
    Paul Furman, Jan 20, 2004
    #4
  5. Long

    Richard Guest

    rf wrote:


    > "Long" <> wrote in message
    > news:8m1Pb.128333$...
    >> The following seems to work as planned on Mozilla, but has an
    >> ugly gap between .bodyleft and .bodyright when viewing in IE.


    > IE has a badly broken box model, it breaks in many ways when you use
    > float. This is just one of them.


    >> What sort of IE hack can fix it for IE?


    > Don't specify height for that right hand div.


    > Why do you use height anyway? Can you guarantee that your content will be
    > less than 200 pixels high?


    > Cheers
    > Richard.


    I have found that if you put 2 or more divisions within a container element,
    the divisions do not break within IE.
    Specially when you define at least the width.
     
    Richard, Jan 20, 2004
    #5
  6. Long

    Richard Guest

    Long wrote:

    > The following seems to work as planned on Mozilla, but has an
    > ugly gap between .bodyleft and .bodyright when viewing in IE.


    > What sort of IE hack can fix it for IE?


    http://1-large-world.com/samples/the-holy-grail.html

    Your version cleaned up a bit.
    Learn to use border: instead of border-left: if you are not going to be that
    specific.
    You do not need to name all four sides of the border as the demo shows.
    The demo was showing various things you CAN include but are not necessary.
    Voice-family is an option and should not be used at all.
    Anything to do with "speech" is to be avoided.


    The purpose of my "master" division is to define a working area for the
    floating boxes.
    This trick causes IE not to drop the boxes should the window be resized.

    Position: absolute should not be used unless that is an absolute necessity.
    Left: and Top: are also positioning elements which is one reason why you had
    the gaps.

    Border:solid 1px blue;
    This statement says, define the box with 1 pixel wide blue solid border.
    Much better than defining all four sides isn't it?


    http://www.stoneware.dk/english/default.htm

    Get this free editor. It has a library of all the tags and attributes for
    html, javascript and even CSS.
     
    Richard, Jan 20, 2004
    #6
  7. Long

    rf Guest

    "Richard" <anonymous@127.000> wrote in message
    news:...
    > Long wrote:
    >
    > > The following seems to work as planned on Mozilla, but has an
    > > ugly gap between .bodyleft and .bodyright when viewing in IE.

    >
    > > What sort of IE hack can fix it for IE?

    >
    > http://1-large-world.com/samples/the-holy-grail.html
    >
    > Your version cleaned up a bit.


    And destroyed, being fixed width.

    Cheers
    Richard.
     
    rf, Jan 20, 2004
    #7
  8. Long

    Richard Guest

    rf wrote:


    > "Richard" <anonymous@127.000> wrote in message
    > news:...
    >> Long wrote:
    >>
    > >> The following seems to work as planned on Mozilla, but has an
    > >> ugly gap between .bodyleft and .bodyright when viewing in IE.

    >>
    > >> What sort of IE hack can fix it for IE?

    >>
    >> http://1-large-world.com/samples/the-holy-grail.html
    >>
    >> Your version cleaned up a bit.


    > And destroyed, being fixed width.


    What is it with you that nothing can have a fixed value?
    If I want it to have a damn fixed value, it will.
    "oh yeah and you'd be wrong and blah blah blah yada yada".
    If you're so damn perfect, go tell it to w3c and bitch to them.

    I can't have a fixed width, I'm not allowed to use height because I can't
    guarantee height.
    Then why do we have them?
     
    Richard, Jan 20, 2004
    #8
  9. Long

    rf Guest

    "Richard" <anonymous@127.000> wrote in message
    news:...
    > rf wrote:
    >
    >
    > > "Richard" <anonymous@127.000> wrote in message
    > > news:...
    > >> Long wrote:
    > >> http://1-large-world.com/samples/the-holy-grail.html
    > >>
    > >> Your version cleaned up a bit.

    >
    > > And destroyed, being fixed width.

    >
    > What is it with you that nothing can have a fixed value?


    Richard, it is not just me. It is just about all the regulars that frequent
    this newsgrroup. We all agree that a web page should adjust itself to the
    size of the viewers canvas.

    > If I want it to have a damn fixed value, it will.


    Ok You can do that on your own site but please do not bastardize the OP's
    design by applying your stupid width restrictions on his/her design. The
    OP's example flowed quite nicely with the canvas size. Your example does
    not.

    > "oh yeah and you'd be wrong and blah blah blah yada yada".


    ? I'm not saying you are wrong. You can do anything you want, just don't
    tell other people to do that.

    > If you're so damn perfect, go tell it to w3c and bitch to them.


    ? What has the W3C to do with this?

    > I can't have a fixed width,


    You can if you want. Just do not suggest this as a thing to do to the
    newbies here.

    > I'm not allowed to use height because I can't
    > guarantee height.


    That is correct. You can not gaurantee the hieght of a div (unless the only
    thing in that div is an image). Put any text in that div and you totally
    lose control over the divs height.

    > Then why do we have them?


    Because the specs were originally written from what the browsers did at that
    time. Because height sometimes has a use.

    Now please go away and read the HTML and the CSS specs. Then read them
    again. Once you understand what they say, and what they don't say, and what
    they imply, come back here with a proper opinion.

    Cheers
    Richard.
     
    rf, Jan 20, 2004
    #9
  10. Long

    Long Guest

    "Paul Furman" <> wrote in message news:...
    : rf wrote:
    :
    : > "Long" wrote:
    : >
    : >>What sort of IE hack can fix it for IE?
    : >
    : >
    : > Don't specify height for that right hand div.
    :
    Tried as suggested. The gap (left right) goes away, but a bigger gap
    open at top because of the <P> tag.

    :
    : So I get the following... with zero border to overcome the
    : border-collapse: collapse issue
    : http://www.edgehill.net/html/css/css-template.htm
    : (but it has a gap if I put longer text in the bodyleft)
    : I'm just learning this, thanks for the exercise!
    :
    This almost worked, but I noticed you've taken out the <P> in the divs.
    If you put the P's back it looks worse.

    : PS this example doesn't have these issues, I can't tell why:
    : http://www.edgehill.net/html/css/css-template2.htm
    : (I stripped out as much as I could from the original)
    :
    I am not sure about this. It looks strange under IE 5.

    Long
     
    Long, Jan 20, 2004
    #10
  11. Long

    Long Guest

    "Richard" <anonymous@127.000> wrote in message news:...
    : Long wrote:
    :
    : > The following seems to work as planned on Mozilla, but has an
    : > ugly gap between .bodyleft and .bodyright when viewing in IE.
    :
    : > What sort of IE hack can fix it for IE?
    :
    : http://1-large-world.com/samples/the-holy-grail.html
    :
    : Your version cleaned up a bit.
    :
    ??? when viewed with IE 5, somehow the rightcontent box is placed below the
    leftcontent box starting at the centercontent height.

    : Learn to use border: instead of border-left: if you are not going to be that
    : specific.
    : You do not need to name all four sides of the border as the demo shows.
    : The demo was showing various things you CAN include but are not necessary.
    :
    Yes it is a test case.

    : Voice-family is an option and should not be used at all.
    : Anything to do with "speech" is to be avoided.
    :
    I don't recall having that in the original code.

    :
    : Border:solid 1px blue;
    : This statement says, define the box with 1 pixel wide blue solid border.
    : Much better than defining all four sides isn't it?
    :
    I like to be specific. I don't know if all browsers know 'blue".

    Long
     
    Long, Jan 20, 2004
    #11
  12. Long

    Paul Furman Guest

    Long wrote:

    > "Paul Furman" <> wrote in message news:...
    >
    > : PS this example doesn't have these issues, I can't tell why:
    > : http://www.edgehill.net/html/css/css-template2.htm
    > : (I stripped out as much as I could from the original)
    > :
    > I am not sure about this. It looks strange under IE 5.
    >
    > Long


    I stripped out a lot. There were settings for <p> & <h1> etc. See the
    original in the link... lots of hacks I guess. I really have to wonder
    why people say CSS is so great for layout when this seems easy with
    tables.... still studying...
     
    Paul Furman, Jan 20, 2004
    #12
  13. Long

    Long Guest

    "Paul Furman" <> wrote in message news:...
    : Long wrote:
    :
    : > "Paul Furman" <> wrote in message news:...
    : >
    : > : PS this example doesn't have these issues, I can't tell why:
    : > : http://www.edgehill.net/html/css/css-template2.htm
    : > : (I stripped out as much as I could from the original)
    : > :
    : > I am not sure about this. It looks strange under IE 5.
    : >
    : > Long
    :
    : I stripped out a lot. There were settings for <p> & <h1> etc. See the
    : original in the link... lots of hacks I guess. I really have to wonder
    : why people say CSS is so great for layout when this seems easy with
    : tables.... still studying...
    :
    Yes, CSS is over-rated. Browser compatibility is a big issue.

    I did missed the "holy grail" link. Here is the final version for IE 5. I have yet
    to test on Mozilla. Would be interesting to view it under other browsers as well.

    .bodytop {
    border: 1px solid #000;
    height: 1px; /* IE 5 - removes top gap */
    }

    .bodyleft {
    position: absolute;
    left: 0px;
    border: 1px solid #000;
    border-top: 0px;
    width: 201px; /* overlap right-left borders to 1px */
    }

    .bodyright {
    border: 1px solid #000;
    border-top: 0px;
    height: 1px; /* IE 5 - removes top gap */
    margin-left: 200px;

    Cheers,

    Long
     
    Long, Jan 20, 2004
    #13
    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. Siz
    Replies:
    1
    Views:
    549
    Catherine Lowery
    Dec 12, 2004
  2. Shin

    auto boxing

    Shin, Aug 1, 2005, in forum: Java
    Replies:
    3
    Views:
    475
  3. Tomba
    Replies:
    3
    Views:
    544
    Tomba
    Nov 15, 2005
  4. mluebeck
    Replies:
    1
    Views:
    419
    Hemal Pandya
    Jan 9, 2007
  5. Patricia Shanahan

    Is auto(un)boxing good style?

    Patricia Shanahan, Mar 30, 2007, in forum: Java
    Replies:
    2
    Views:
    415
    Kai Schwebke
    Mar 30, 2007
Loading...

Share This Page