SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE not floating a column

    Hi.
    No sense in explaining the problem. But I've spent 2 weekends and I've refrained myself from trying not to ask stupid questions. But I've been had.

    I've designed a site, highly influenced by sitepoint (some might call it a sickening infatuation). You can see the similarities almost right away, but I"m sticking with it.

    Here is the problem...

    Moz, Opera, Safari, and Netscape all render it fine...but IE gives me this big gap.
    If someone could spot the glitch, please let me know.
    Check it in any non-IE browser first, and then IE, and you'll see the difference.

    Page:
    http://www.polvero.com/temp/new/

    CSS:
    http://www.polvero.com/temp/new/main.css

    Thanks in advance.
    Dustin

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I went thru Paul's FAQ on 50% = 50% = 101%, then tried making one floater at 1% less...also looked at the 3 pixel jog. I just got confused, but i wonder if that's a problem in the layout as well..

    lastly, the margin bug....they're all set to 0, so I don't think that's a problem either.

    just thought i'd give a quick update of where i'm at before someone says "RTF FAQ"

    Thanks.
    Dustin

  3. #3
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok. This is going to be a rare occassion where I'll post my solution mainly because I roam onto Forums looking for answers to similar problems only to find out, nothing was solved.


    I made the #bulk block position:absolute; mainly so I can get both to show up in the same spot. It was at that point where it just became a footer issue....so in that case I placed the footer under my longest column with a nice clear:both

    Thank you very much, and I'm outty
    Dustin



    ****** note ********

    I'll leave the temp address just to see if anyone else wants to offer an alternative solution or thinks they have a better one (which I'll totally consider).
    Plus it makes for a good example to show how crappy IE is again

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

    I think the original problem is that you were specifying #bulk at 100% which means its too wide to go alongside a 20% float.

    Just taking the 100% out and floating the bulkinner should allow it to work in ie.

    Code:
    #bulk {
    text-align: center;
    }
    #bulk_inner {
    border-left: solid 1px #04399C;
    vertical-align: top;
    border-right: solid 1px #04399C;
    width:60%;
    float:left;
    position: relative;
    margin: auto;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    font-family: Trebuchet MS;
    font-size: 13px;
    line-height: 140%;
    }
    #bulk_left {
    vertical-align: top;
    width: 60%;
    float:left;
    border-right: solid 1px #04399C;
    border-bottom: solid 1px #04399C;
    margin: 0px 0px 0px 0px;
    }
    #bulk_right {
    vertical-align: top;
    width: 39%;
    float: right;
    border-bottom: solid 1px #04399C;
    }
    As you say you have already found a solution I didn't bother tidying anything up (e.g. you have a horizontal scrollbar in moz, vertical0align-top only applies to elements in a single line and not whole divs. Padding + % width won't add up correctly)

    Paul

  5. #5
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks paul.
    I was thinking that in a desparate situation, I'd see if vertical-align top would put it up there. I must have accidently left that in there.
    any idea's on the horizontal bar on the bottom?

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just ran into another problem.
    IE 800x600 overlaps on the right column...

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

    Try these settings but you may have to fiddle with them for best effect.

    Code:
    #header form {
     width:155px;
     position: absolute;
     right: 2px;
     top: 20px;
     z-index: 3;
     margin:0;padding:0;
    }
    #bulk {
     margin-left:20%;
     margin-right:20%;
    }
    #bulk_inner {
     border-left: solid 1px #04399C;
      border-right: solid 1px #04399C;
     width:96%;
     float:left;
     position: relative;
     text-align: left;
     padding-left: 1%;
     padding-right: 1%;
     font-family: Trebuchet MS;
     font-size: 13px;
     line-height: 140%;
    }
    #bulk_left {
      width: 60%;
     float:left;
     border-right: solid 1px #04399C;
     border-bottom: solid 1px #04399C;
     margin: 0px 0px 0px 0px;
    }
    #bulk_right {
     vertical-align: top;
     width: 39%;
     float: right;
     border-bottom: solid 1px #04399C;
    }
    Hope that helps.

    Paul

  8. #8
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it wasn't until about 2 seconds when i posted this portion:

    Code:
    #header form {
     width:155px;
     position: absolute;
     right: 2px;
     top: 20px;
     z-index: 3;
     margin:0;padding:0;
    }
    that was part of the horizontal problem going on...

  9. #9
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm...the horizontal nav disappeared in FF, but reappeared in IE.
    I'll look more into it.
    Thanks a million paul.
    I'll be linking to you when i'm finished.

  10. #10
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Found the fix:

    Code:
    #body {
        position:relative;
        width: 98.6px;
        }
    that seemed to have fixed the prob.
    Thanks for your help paul.


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
  •