SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bad visualization of 3 cols layout only on IE6 and lower

    Here I am again :-)
    I'm working now at a 3-columns layout of my personal framework...

    http://www.ivanhalen.com/framework/3cols_800.htm

    I splitted the original full CSS in some pieces to separate the original Blueprint ones with my custom modifications (style.css)
    More, the markup is a "left column-right column-center column" configuration, but with CSS I show a classic "left column-center column-right column" visualization

    The layout shows nice on Firefox, Opera, Chrome and IE7, but not on IE6 and lowers: the center columns "shifts down" and the right-column paddings are wrong: please, can you help me with this?
    Thanks so much :-)

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Hi, it is overexpanding because you have too much margin set on ".column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5"

    Set the right margin to 4px and it all aligns up.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2008
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mmm. is there a way to fix this only in IE6<? t least, I see it right in every other browser...

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Just use a CC to target IE6 only (make sure it comes after your other stylesheets)
    Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    .column, div.span-1, div.span-2, div.span-3, div.span-4, div.span-5
    {
      margin-right:4px;
    }
    </style>
    <![endif]-->
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •