Results 1 to 7 of 7

Thread: Cross browser CSS

  1. #1
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default Cross browser CSS

    Why aren't my floats working in IE 6?

    Problem site
    CSS: Here and Here

    They do work in FF and IE 7

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Looks okay to me in all browsers, but I could be missing the point. Screen shots of the problems?

    I do know that IE will have a problem with right floats when pixels definitions (instead of em) as well as paddings and absolute positioning are used. I don't know why.

    I could probably get it nailed if I could see which ones were the culprits though.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    IE6 has poor support for CSS in general, and almost no support for CSS 2.0.

    Although floating is CSS1.0 I have often had problems with it. If you can explain exactly what the problem is and provide screen shots like Blizzard said we might be able to help out more.

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Alright...

    Well, here's the screenshot of what it's supposed to look like (i.e. what it looks like in IE7).



    In IE 6, the column on the left drops below the right column. Also the sidebar is far far far below the actual page. I've been playing around with things but I'm not any closer.

  5. #5
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    I am assuming that your "right" column has been given first in the coding of your page?

    What you are experiencing is classic IE6. The margins are "overlapping" If you reduce the width of the elements I think you will see that the floats will correct themself.

    If you are using percentages of the available viewport (recommended) there should be 5-10% difference. eg

    Code:
    div#right {
         float: right;
         width: 30%;
    }
    div#left {
         float: left;
         width: 65%;
    }

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Agreed. the right column is the first one, the left column is second. so HTML would look something like:

    Code:
    <div id="leftcol">
    //Sidebar content here//
    <div id="maincontent">
    //main content here//
    </div>
    </div>
    The idea is that the "main content" is inside the "sidebar" div, so the side bar div needs to be larger, and both need a float: left; attribute in the CSS.

    Alternatively, you can check out complete cross borwser full CSS supported layouts here (2 column right menu layout) and all the other layouts too.

    It is well done and easy enough to follow.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by boogyman View Post
    If you are using percentages of the available viewport (recommended) there should be 5-10% difference
    yeah...i figured as much out.
    but there was an additional "clear:both" value that was setting everything off.

    Naturally, adjusting the margins/widths is the first thing i tried but that didn't seem to work because that particlar div was being cleared (or rather the first element in that div).

    Anyway, all's fixed.
    Thanks guys!

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
  •