css layout frustration between IE / Firefox..

[Orion]

Hey all,

I've helped others resolve similar issues here and I'm hoping I can find a solution or two now that I'm pulling my hair out.

I'm redesigning the site for our cottage association and got pretty far then ran into one of these, I can get this to work in either firefox or ie but not in both.

right now it's working in ie... when I switch to firefox I lose the formating for the right column..

Here's an image of the layout I'm trying to achieve:

Here's the links...

Chandos Lake Property Owners Association - page

http://www.clpoa.ca/css/clpoa2.css - style sheet

Any hints? always appreciated!

[sands]

Add the clear float fix to the main DIV as as suggested by BJ in an earlier post.

[syktek]

i like to have it looking proper in FF then use whatever hacks i need for IE as rule of thumb.

[JohneeMac]

Just add this to the bottom of your stylesheet.

#footer{
clear:both;
}

[fr3nch13]

one thing I always place at the top of my stylesheets is this:

* {
Margin:0;
Padding:0;
}

U may end up having a little larger of a stylesheet, but it defaults everything (including the issues with list items).

Hope this helps someone.

[Orion]

Thanks Sands, worked great, really appreciate the hand on that.

I'm still trying to think of something simple to make it look a bit nicer but clearing up that code helped a ton!

[bj]

Sands is right. Use the br class="clearA" trick right before the closing of the div named main. See the links from that post he sent you to. Clearing the footer may LOOK like it solves the problem but in essence the main div will still not be cleared, so for layouts that use faux column backgrounds on that div, it won't work, since the background will stop where clearing does (where footer starts now.)

OOPS! You must have been posting while I did!

I'm glad that did the trick!

[LeadMaverick]

OK I am going to give you pointers to the resources that makes the IE/FF issue a non-issue.

First go to http://[URL="http://developer.yahoo.com"]developer.yahoo.com[/url] and USE their YUI features for fonts and grid layout. These CSS sheets will neutralize the browser settings.

Second, use IE conditional statements in your top header <![if IE]--> and create a style sheet for FF and then one for IE (use the conditional statement for the IE CSS file AFTER the link reference to the FF CSS file).

Finally design your site for FF FIRST using the Web Developer Toolbar from Web Developer. This tool is ABSOLUTLY Essential to all web development. Make sure you donate to the cause because if Chris stops developing this we are all doomed (which is why his tool is one of the 10 ten downloads for FF extension ever).

With these three resources you can completely negate the IE/FF CSS issue and create XHTML compliant sites across all browsers.

Lead Maverick
Generate more leads from search engines for FREE at Free Search Engine Marketing Tool from Lead Maverick

[bj]

Orion, I'm still seeing it not clearing, and don't see the clearing element added. I do gurantee that's the easy fix for Firefox. Then if IE isn't playing we can help you fix that.

And yes, I use conditionals, but I use ONE ie stylesheet then feed to both ie6 and 7 with straight style statements for both browsers, and use * html hack statements within that stylesheet to feed things to ie6 that only it needs.

[CyberCrone]

Orion, I got the impression this problem had been fixed but when I go to your page in FF 2.0.0.6, the main text extends way below footer and overlaps it. In IE the footer is correctly placed but the text overlaps lefthand column and the content of LH column is gone.

Maybe you are still fooling around with it but I thought I should report this.

[Christiaan]

For "floating" layouts, visit:

Floatutorial: Step by step CSS float tutorial

[ksawatzk]

I've started using conditional statements just to save me time in going back and cleaning up compatibility problems in past websites I've done... don't fix what ain't broke, right? Especially if I'm doing it gratis since I already got paid to do it.... <sigh>

I haven't seen an example posted in this thread, so here's what I use, 1 each for IE7, IE6-, and FF:

<!--[if lt IE 7]> <link href="main_ie.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if IE 7]><link href="main_ie7.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
<!--[if !IE]>--><link href="main_ff.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

Web Developer is GREAT for FireFox, as is being able to load a separate tab both for FF and IE7...

HTH

[Orion]

sorry all.. was up north for the long weekend here and on the road all day yesterday.. missed a couple posts there. the corrected page is at: Chandos Lake Property Owners Association

appologies and THANKS! to everyone for the help...

I always try to get away with the least amount of code as I can.. sometimes I just have to bite the bullet to get some extra in there.

ksawatzk in relation to your suggestion there. what do you use to view in IE6? Has anyone out there found a tool to allow both installs, or an emulator?

[Orion]

Hey everyone...

Working well, here's a completed page up on the site now: Chandos Lake Property Owners Association

Still a couple small problems IE6 and Safari mess up?

[Ratanfx]

Hi Orion,

From my experience I learned few things,
1: Use Clean / Structured HTML, (Validate you markup with The W3C Markup Validation Service )
2: Never use paddings - This will effects the widths of the corresponding divs.
3: First you do it for FF then There is a " * html " Hack to cover the IE.

You should use Clear float FIX for the nested divs.

I strongly suggest to analyze Markup with the WebDeveloper Tool bar ( FF Add-on)
Web Developer

[Orion]

I always validate using WC3.. and hacks don't always validate....

This code validates perfectly btw.. the only mess up is theweathernetwork.com widget the URL to pull it in is all invalid and is the only errors (21 of them) that come up.

There is no problem using padding in fact you need to sometimes if you want the spacing between the edge of the object and the object itself all you do is subtract padding from width or add it on in your calculations... always works.

appreciate the thoughts though.. I did go back and double check it all =o) lol..

right now the issue I'm having is the hack is working in IE7 but not in IE6 and safari (for windows)isn't working either (can't check safari of IE for mac so no clue there)

[sands]

Don't know about IE6, but putting <br class="clearA" /> immediately after (outside) the main DIV seems to set things right.

But there seems to be one problem in IE7. I see the horizontal scrollbar. But viewing the same page with the same browser when saved on the local drive I do not see it. Is it just me.....?

[Orion]

you can go through most of the pages now from Chandos Lake Property Owners Association I don't get a scroll bar here might have been mid changes? or possibly your browser was smaller than the site? it's set to 950 px width for 1024x768 res.

[sands]

Originally Posted by Orion

you can go through most of the pages now from Chandos Lake Property Owners Association I don't get a scroll bar here might have been mid changes? or possibly your browser was smaller than the site? it's set to 950 px width for 1024x768 res.

I see the horizontal scrollbar on all the pages using IE7. Also it is not due the monitor resolution being lesser than the page width. Wonder....