This is my first message here, please forgive me if it's trivial.
I'm working on this website, www.partnershipfca.com. I'm trying to make the design CSS based (with
some exceptions, it's a long road), but I'm running into a very frustrating problem with Internet
Explorer. The problem occurs on most of the content pages (no the home page), and example is here:
As you can see from the link I have a top menu, a page header area that includes the organization's
logo and the page title which are both seperate images. Then I have a side menu on the left
(floated), a content area, and a column on the right for a search box, sub-menus and in the future,
announcements and short blurbs from their clients. The right column is floated on the right, the
content flows around the right column. Below the content I have a footer.
CSS wise, ignoring the top menu and footer (not of consequence here), I have the main area inside a
main_container div. That div is 100% wide and has a background image of the organization's logo.
Inside the main_container is a main_inside_container that defines the page. The background is white
and width is set to 760px.
There is a page_header div, which contains the organization logo and the page title image, and the
page title in text which is only there for printing purposes (display: none for the browser).
Below that I have the left_column div containing the left menu. That left_column is floated left.
Next is the right_column which is a container for the search box and various items I mentioned
above. Then the content div is last, before the footer. The content has a left margin of 190, the
width of the left menu. The goal is to have the content flow to the left of the left menu and flow
around the search box and other items in the right_column.
That works right now. The problem is that in Internet Explorer there is a white line running all
the way down the side of the main area, to the right of the right_column. It is displayed past the
760px width of the page area. I thought this might have something to do with the IE 3px float bug
I've read about. I've tried many various fixes from around the net, but I can't nail down a working
This problem only occurs on pages with more than a few paragraphs of text in the content. If the
content is short, the white line doesn't appear.
If anyone can take a good look at the CSS and the structure of these pages, and can suggest a fix, I
would really, really appreciate it.
Creative Director | Partner
(P.S. I may have sent this before, but it was from the wrong email address. I didn't know if it
would get dropped or not. Forgive me if this is a repeat)
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/