10 replies [Last post]
chris.mccreery
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-02-09
Posts: 6
Points: 0

Hey everyone I am having an issue with the css of a site that recently launched, the css validates and looks perfect in IE7 and firefox as I designed based on Firefox. Now that it is live and some users....for unknown reasons are using IE6 the layout is off. I have a container div, menu, content, right column. The right column in IE6 is getting bumped below the content but still floating to the right. I've tried adjusting the width on all elements and the floats and position:relative; and have cleared some floats but can't for the life of me get it to work. If anyone could point me in the right direction or knows what I'm missing here that would be great.

site: www.lin.ca
the two main css files are:
www.lin.ca/App_Themes/LIN/Default.css
www.lin.caApp_Themes/LIN/homepage.css

Thanks in advance for any help you might be able to provide.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 2 weeks 5 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

chris.mccreery wrote:Hey

chris.mccreery wrote:
Hey everyone I am having an issue with the css of a site that recently launched, the css validates and looks perfect in IE7.

Valid CSS is useless unless you apply it to valid HTML! Your HTML has 96 errors.

There are no standards for invalid HTML. Each browser attempts to correct errors but since there is no standard way to do that they all do it differently.

Without valid HTML markup CSS can't work properly.

We ask for valid HTML up front, and we expect you to provide it.

Once you get your HTML valid, if the problems persist, come on back and ask again.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ed, the errors are mostly

Ed, the errors are mostly trivial, not using "/>" to close self closing elements, duplicate IDs, not using &, they shouldn't affect the rendering in any browser.

Usually, when a column is dropped down like that, the browser doesn't think there is sufficient room for the column. I can't see where the width problem is. The container is 779 wide and the three columns + their padding are 758 (or 766 in IE6 terms*) wide, which would appear to leave plenty of extra space.

Try making the container progressively wider until you find the width at which IE6 can accomodate all three columns. Then go looking for what could possibly require that extra width. Placing background colours on bits of the page will show which elements overlap in FF and which elements are pushing your columns wider in IE6.

* IE6 will take a width as "advisory" when overflow is visible, expanding the element if any of its contents requires more width. Your image across the column is 5px wider than the column width.

chris.mccreery
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-02-09
Posts: 6
Points: 0

Thanks I've resized the

Thanks I've resized the image, but that didn't seem to do anything. I also set the container id #frame to 900px but still doesn't let element display beside where it should in IE6. Would it have something to do with some clearing divs and spans that I'm using?

chris.mccreery
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-02-09
Posts: 6
Points: 0

Ok so I've put a red border

Ok so I've put a red border around every element for testing purposes so I could see what was happening in IE6 but it looks like there is plenty of room for the element to fit in there. Can you take a look and see if i'm missing something?

Thanks again.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I don't see any borders.

I don't see any borders. Borders aren't always the best idea. A border can affect margin collapsing. For that reason I prefer to use contrasting background colours.

But, you're right, its not widths. Get rid of the "<span class="clearfix" />" at the bottom of the centre column. Also look into using "faux columns" to ensure your column backgrounds match the length of the tallest column.

chris.mccreery
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-02-09
Posts: 6
Points: 0

Took the borders off

Sorry took the borders off for now. The faux columns, I assume you mean something similar to what I'm using for the #frame element I used it for the homepage of the site but the rest of the site is only 2 column. Anything else you can see? Or should I just do a rewrite? I passed my original css file to some developers but they didn't exactly follow it and now I'm left trying to fix it. Grrrrrrrrr. Thanks for the help so far.

chris.mccreery
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-02-09
Posts: 6
Points: 0

Oye

Ok figured it out!! I was using a <span class="clearfix" > and in my css I had defined it as

{
clear:both;
display:block;
}

so ditched the display attribute and tada, issue solved.

Thanks for all the help.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Maybe I wasn't clear, but

Maybe I wasn't clear, but that's what I said Wink

Chris..S wrote:
Get rid of the "<span class="clearfix" />"

chris.mccreery
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-02-09
Posts: 6
Points: 0

I couldn't get rid of the

I couldn't get rid of the clear then my container element (#frame) wouldn't wrap around the floating elements.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

put it after the third

put it after the third column. or better yet, put overflow:hidden on #frame.