SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Contents of 3rd floated column do not show up in IE6

    I'm trying to change one of my sites from a good ol' table based layout to a CSS / XHTML one but I'm having a (first) problem with a the layout I started from a "template" I took from here:

    http://www.fu2k.org/alex/css/layouts...NN4_FMFM.mhtml

    Here's what I'm talking about:

    http://www.link7.ro/misc/cssd/test1.html

    Basically I have a 3 (faux-)column layout with 3 floated divs. The first and second columns are put in a separate container float and the third column is floated next to this container. Everything was alright while developing in Firefox but then I checked in IE 6 and there it was: the surprise! The contents of the third column were not showing up. I think it's there though, because it's taking up space under the other elements... But it's somehow invisible. I tried fiddling with the contained div's width and I noticed that if I reduce it by ~5 pixels the content shows up in IE but it's misaligned to the right and I don't understand why because if I set the third column's background to be visible there's clearly a gap on the left even if I set all margins and paddings to 0.

    Sorry about the mess in the code, I know half the comments are in English (kept from the original template) half are in Romanian. It's actually a draft, I haven't had time to clean it up yet.

    Please suggest fixes or alternate templates I could start out from. I would like the column order in the source to be [main column], [side column 1], [side column 2]. The order of the side columns doesn't really matter but I would like my main column to come first.

    Thanks!
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  2. #2
    SitePoint Wizard Wolf_22's Avatar
    Join Date
    Jul 2005
    Posts
    1,714
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, I would come up with a better width for your whole document as it appears to be running off the right side. After that, I would check this out:
    http://validator.w3.org/check?verbos...d%2Ftest1.html
    and then try to stay away from tables... Unless your displaying data...
    Way to go though on the CSS validation!

  3. #3
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, it validates now. But unfortunately the problem is still there.

    How can I avoid table use? In my table I basically have a list of classified titles together with their type (the bullet on the left) the country they're coming from and the date they were posted. Doesn't this justify the use of a table?

    Nevertheless the problem is still there. And it's there only in Internet Explorer 6. Firefox and Opera work just fine, as they should because I made the div widths pixel perfect... Is there a hack or something?
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    That's an old layout and uses hacks for nn4 which is a step too far in my opinion . Also it doesn't take into account ie's 3 pixel jog and "layout" problems and tries to incorrctly address the by using position:relative insetad of forcing "layout" (see faq).

    Obviously these things weren't known at the time of that layout and ther are more modern models about.

    You can fix the issues using the code below.
    Code:
    /* mac hide \*/
    * html .column-three{height:1%;}
    * html .columns-float {margin-right:-3px;}
    * html .column-three{ margin-left: 676px;}
    /* */
    This will address the 3px jog and layout issue.

    However you might be interested in a much simpler approach for a fixed layout that is very clean and simple.

    http://www.pmob.co.uk/temp/3col-content-first.htm

    You can of course apply the background image techniques to get your full length columns but I kept theexample as simple as possible to show how its done. The only hacks required are the box model hacks

    Of course it won't work in nn4 lol

  5. #5
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, your addition fixed the issue...

    I don't need NN4 compatibility but I found that "template" the best to start out with. I will try to migrate to the one you proposed later on today and I'll post my results.
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  6. #6
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I started to work on your layout but I hit the first problem in almost no time. If I altered the width of the side columns to touch the main (middle) column, the right one suddenly decides to jump downwards...

    See here: http://www.link7.ro/misc/cssd/paul1.html
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are going to change things then you must be consistent

    You have increased the width by 10px but you did not reduce the margin by 10px which was creating the space in the original layout .

    Code:
    #leftmenu {
    width: 150px;
    height: auto;
    margin: 0px 10px 0px 0px;
    background-color: #f2f2f2;
    display: inline;
    float: left;
    position:relative;
    left:-450px
    }
    The margin needs to be zero now because you have made the element 10px wider.

    As a rule of thumb if a float has dropped in good browsers then you have made it too big. (IE is a different matter because of its own bugs etc)

    Usually most errors in css are due in fact to the simplest of housekeeping errors and people not adding up correctly

  8. #8
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    /me turns away ashamed...
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  9. #9
    SitePoint Enthusiast rev909's Avatar
    Join Date
    Mar 2002
    Location
    Romania
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep, your (Paul's) template (with a few customizations) works out just great.

    http://www.link7.ro/misc/cssd/paul2.html

    I added a wrapper div and moved the header out from the container into this wrapper. The real footer will also be outside the container but inside this wrapper. I added the fake_footer div to finish off my fake columns in a neat way.

    Now the question is: is the use of a table in the middle column justified in my case? I explained what I'll be using it for above but you can check a live example here...
    Science is magic that works!
    -- Kurt Vonnegut Jr.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I would say that the relationship between those elements is tabular. It probably could do with a header row to show what lies in each column specifically .


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
  •