Hi all -

We have a standard three-column layout. We’ve tested it in numerous browsers on both Windows and Mac, and it looks great. It also XHTML and CSS validates.

The only browser that is misbehaving is IE 6. The majority of the pages look fine, but two in particular break. What breaks is the right-hand column, which displays further down on the page and on top of the second column’s content:

http://www.urbanturf.com/about/
http://www.urbanturf.com/articles/category/neighborhoods/

I think this is the so-called Having Layout bug that my CSS book discusses, but I can’t be sure because I don’t have enough experience. I am relatively new to CSS and am working with code that was provided to us by a third-party designer.

I do know that our site uses the 960 grid system stylesheet (http://960.gs/)

Here is the XHTML code for the column that is causing problems:

Note that the tertiary ID is not given any styling in the stylesheet; it’s actually never even mentioned. I believe our designer just put it there for reference. The “grid_3” class comes from the aforementioned 960.css stylesheet.

I tried adding both “display: inline-block;” and “height: 1%;” to the grid_3 class styling in 960.css, but it had no effect, so I took them back out. (Those are workarounds to the Having Layout bug suggested by my CSS book.)

Can anyone help?

Thanks

Any chance you can post a link to the page in question?

In IE6, this seems to solve it (add this to an IE6 only stylesheet):

Andy -

The URLs are:
http://www.urbanturf.com/about/
http://www.urbanturf.com/articles/category/neighborhoods/

e-man - thanks! I’ll try that and let you know.

Andy Harris - 18 June 2008 03:01 AM

Any chance you can post a link to the page in question?

Sorry, you have posted a link to the page in question haven’t you. One of those days for me

e-mans suggestions works just fine. I notice you also seem to have the left column and center column pressed up real close. I fixed that by dropping the main content down 20px and adding that as padding-left, but not sure how that stacks up against the CSS grid rules.