IE not floating a column

[polvero]

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

[polvero]

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

[polvero]

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

[Paul O'B]

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.

#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

[polvero]

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?

[polvero]

just ran into another problem.
IE 800x600 overlaps on the right column...

[Paul O'B]

Hi,

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

#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

[polvero]

it wasn't until about 2 seconds when i posted this portion:

#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...

[polvero]

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.

[polvero]

Found the fix:

#body {
    position:relative;
    width: 98.6px;
    }

that seemed to have fixed the prob.
Thanks for your help paul.