clear:left browser compatibility

Discussion in 'HTML' started by Jerry, Feb 12, 2004.

  1. Jerry

    Jerry Guest

    I'm having trouble with my page layout.
    My source code looks like:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>something</title>
    <link href="markup.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="top">Header</div>
    <div id="leftcolumn">
    <div>
    <h3>Left Column </h3>
    <p>article text here. article text here. article text here. article text
    here. article text here. article text here. article text here. article text
    here. </p>
    <h3>Title</h3>
    <p>article text here. article text here. article text here. article text
    here. </p>
    </div>
    </div>
    <div id="rightcolumn">Right Column </div>
    <div id="centercolumn">
    <div class="class1">
    <h1>Main Topic</h1>
    <ul>
    <li>subtopic1</li>
    <li>subtopic2</li>
    <li>subtopic3</li>
    <li>subtopic4</li>
    <li>subtopic5</li>
    <li>subtopic6</li>
    <li>subtopic7</li>
    </ul>
    </div>
    <div class="class2">
    <h1>Main Topic 2</h1>
    <ul>
    <li>subtopic1</li>
    <li>subtopic2</li>
    <li>subtopic3</li>
    <li>subtopic4</li>
    </ul>
    </div>
    </div>
    <div id="footer">Content for id "footer" Goes Here</div>

    </body>
    </html>

    The CSS is:

    #top {
    background-color: #333333;
    }

    #leftcolumn {
    float: left;
    width: 240px;
    background-color: #999999;
    }

    #centercolumn {
    margin-left:246px;
    margin-right: 246px;
    }

    #centercolumn ul {
    list-style: none;
    }

    #centercolumn li {
    display : block;
    float : left;
    text-align : center;
    width : 15em;
    }

    #rightcolumn {
    float: right;
    margin:0px 0px 0px 0px;
    width: 240px;
    background-color: #999999;
    }


    #footer {
    position:relative;
    clear:both;
    background-color: Black;
    }

    ..class2 {

    }

    IE6 shows the page how I want the browsers to show. But this doesn't work
    under Mozilla 1.6 and Opera 7.
    Now, when I put a "clear:left" in ".class2", in Moz it looks fine, but this
    time not with IE/Opera. I'm starting to get a headache here ...

    Any help would be appreciated.
    :(


    Jerry
     
    Jerry, Feb 12, 2004
    #1
    1. Advertisements

  2. Jerry

    DU Guest

    Where is markup.css?
    This is weird semantically-speaking or structurally speaking: you have
    an h1 header inside a sub-div but the top-main div uses h3 div. Right
    here, I think your webpage is not perfectly coherent.
    ..class1 and .class2 are not intuitive, not meaningful identifiers; using
    intuitive, self-explanatory identifiers helps debugging, reviewing by
    others, etc..
    background-color:#333;
    is faster to parse.
    display:block implies that each individual list-item should be rendered
    on a single individual line.
    I wonder why you need float:left here. Since the whole document is ltr,
    then I fail to see the need for this css declaration. When I remove this
    css declaration, I get no significant change in Mozilla 1.6 and no
    change in Opera 7.50: only MSIE 6 for windows change... and it should
    not change.
    margin:0px;
    is faster to parse
    Readers of your post will have no reference to what is the rendering you
    want; no concrete/reliable point of reference. FYI, the rendering varies
    *a lot* in MSIE 6 with different scr. res. and browser viewport
    dimensions. So, statements such as "IE 6 shows the page how I want the
    browsers to show" relates to nothing concrete, nothing practically
    comparable like a screenshot.
    "looks fine" is another impossible statement to relate to; in the
    absolute, it relates to nothing objective, quantifiable. As far as I can
    see/understand you (and here, I could be very wrong), you want even
    list-items (sub-topics 2, 4, 6) to appear sorta "aligned" in the right
    column, under the "Right Column" div.

    After some testing, I think your layout will always break when using
    absolute length values (divs overlapping). Percentage values would avoid
    this and make your webpage much more scalable.

    DU
     
    DU, Feb 12, 2004
    #2
    1. Advertisements

  3. Jerry

    Mark Parnell Guest

    <snip mountains of code>

    A URL would be much more helpful.
     
    Mark Parnell, Feb 12, 2004
    #3
  4. Jerry

    Jerry Guest

    Hi DU,

    thanks for your reply.
    Here is a sample image I want the layout:
    http://www.geocities.com/staccb123/sample.gif

    I know the page is not structurally correct, like the order of the <hX>tags. I
    only put them in to markup the page a bit. Same for the column background colors.
    What's important to me, or better to say, what my problem is, is the *layout
    in the center column*. As you can see in the sample image I want some main
    topics, followed by some sub-topics which are aligned from left to right over
    some lines. That's why I used "float:left". The length of the subtopics
    differ, so I want the text aligned to the center (in every <td>, when they
    were in a table).
    If I don't use "clear:left" in class2, Mozilla (Firefox 0.8) and Opera7 show
    the "Main Topic 2" right after "subtopic7". But when use "clear:left" in
    "class2", Opera & IE show a big "gap" between "subtopic7" and "Main Topic 2".
    The "gap" depends on the length of the left column (that's why I also put in
    left column into my sample).

    Jerry
     
    Jerry, Feb 12, 2004
    #4
  5. Jerry

    Jerry Guest

    Jerry, Feb 12, 2004
    #5
  6. Jerry

    Mark Parnell Guest

    Mark Parnell, Feb 12, 2004
    #6
  7. Jerry

    Jerry Guest

    Jerry, Feb 13, 2004
    #7
  8. Jerry

    DU Guest

    When you reply to someone about a technical post, best is to interleave
    your reply so that the poster does not have to go back and forth to read
    what was said and go back and forth to read what was replied.


    #centercolumn li {
    display : block;

    display:block implies that **each** **individual** list-item should be
    rendered on a single individual line.

    Your explanation for that float:left does not make sense. And the
    rendering in MSIE 6 is wrong obviously. Each list-item should be on a
    single individual line.

    DU
     
    DU, Feb 14, 2004
    #8
  9. Jerry

    Mark Parnell Guest

    Much better. :) Now, you want it to look like it does in IE? With the
    list items following each other, rather than all underneath each other?

    Try adding

    display: inline;

    to your #centercolumn ul rule.

    Why the Japanese character encoding, BTW?
     
    Mark Parnell, Feb 16, 2004
    #9
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.