FF / IE conflict in design

[pottersdt2k]

I'm hoping this is the right place to put this - I think it is though.
I've been checking my site as I've designed it using IE, and as far as I knew it was ok in Firefox too (not checked it as often, but have checked it occassionally).

Only problem now is, it seems like it's all massively gone wrong - it seems ok in IE, but not FF.... now I'm not quite sure what to do to fix it.

The html file is over at http://www.geocities.com/mwmcreations/testing/random_test1.htm

and the css file is over at http://www.geocities.com/mwmcreations/testing/default.css

I'm running a 1280x1024 resolution - but I don't think it's my screen res that's the problem. Anyone possibly have a look at it for me and let me know their opinion? I want it to - if possible - look the same as FF as it does in IE...

[drhowarddrfine]

You've learned why professional developers never, ever code using IE. IE is non-compliant with web standards, bug-ridden and most sites tuned to it will fail in all other browsers.

In addition, you are using geocities which inserts its own code ahead of the doctype. This puts IE into quirks mode which means it won't work the same as any other browser.

[pottersdt2k]

i was actually testing it on my own pc without remote access, and i've used the exact same template design as another project i'm working on, which i tested in FF without any problems whatsoever - hence i'm confused as to why it's now not working properly in FF...

I'm aware of the implications with geocities, but as I haven't purchased hosting space yet, i'm using free space - geocities was the quickest for me to use (for hosting to show you guys) as i already had the space from earlier days...

i presume then that no-one else knows the reason why the layout is so mis-aligned in FF? if not i guess it's back to the drawing board

[drhowarddrfine]

i presume then that no-one else knows the reason why the layout is so mis-aligned in FF?
Someone already gave you the answer:
you are using geocities which inserts its own code ahead of the doctype. This puts IE into quirks mode which means it won't work the same as any other browser.

[welsh]

design it with ff or another good browser, then when ur done try and make it work in ie.

[CarlsDad]

I do my layouts in BOTH IE and FF at the same time. I do not take the approach that IE sucks and FF is god. FF has it own issues. The fact is MOST people use IE and when having to choose between making something look right in IE or FF, I choose IE. Now down the road, that might come back to bite be, if IE starts working more like FF. As long as you keep as much layout code as possible in a CSS, updates for new browsers should be simple.

I suggest you set your Header height to an em value. This way, as FF scales the font, your height increases as well. Not always at a 1 to 1 ratio, but pretty close. Try a 10em height for your header and start from there.

I would remove the single cell table layout where you have "photography". You are using divs pretty good, don't mess it up with a table.

Using absolute positioning can also cause issues. I prefer relative for my container and any wrapper. I only use absolute for left and right columns within the wrapper. Use divs with wide margins to position the div between or next to columns.

Absolute also works well when with fixed width and height elements such as logos, flash or other graphics.

At least that is my method. I only have a couple years experience with this and I have a long ways to go.

[drhowarddrfine]

FF has it own issues.But nowhere near as many as IE.
The fact is MOST people use IE and when having to choose between making something look right in IE or FF, I choose IE.And here's a guy who can't write standard code and will be asking us why his sites won't work when IE7 comes out.
that might come back to bite be, if IE starts working more like FF.Hmm. So why don't you write code correctly first instead of wrongly for IE?
As long as you keep as much layout code as possible in a CSS, updates for new browsers should be simple.If you mean IE7, most of the significant changes will be in CSS so what you are saying is not true.

[felgall]

IE7 is adding support for standard CSS that Firefox, Opera, Safari etc can already handle but which IE6 doesn't so IE7 will work much more like those other browsers and IE6 will remain the anomaly that you need to patch for until enough people micrate to more modern browsers.

If you follow the standards properly in what you write (HTML and CSS) then your page should function reasonably well in all browsers to start with and the patches you need for IE6 will be minimal.

[CarlsDad]

I will admit, I have a lot to learn, but when someone ask for help, I TRIED to pass on some experience that might help, instead if making personal attacks. That's just not productive.

I always make sure my pages work in FF before I go live, but when faced with a choice of making a CSS change to tweak a page to look better in IE I will do so, as long as the page still works in FF.

I do that because 92% of the visitors to our web sites use IE6. Only 6% used either FF1.1 or 1.5. The rest where a mix of Netscape, opera, safari and IE5.5.
I choose to provide the best web site I can to the most people who view it. If that is IE6, then so be it.

To be honest, I do not have that hard of a time with IE6 and FF. There are a few things, but for most part, I can code a page to look almost exactly the same for both, with little IE hacking. If IE7 works more like FF, then I will make CSS changes as need to accommodate visitors to our web sites.

[Zarel]

I always make sure my pages work in FF before I go live, but when faced with a choice of making a CSS change to tweak a page to look better in IE I will do so, as long as the page still works in FF.

Well, for one thing, you should make it work in Firefox, because if it works in Firefox, it works in Opera, Konqueror, Safari, iCab, Lynx, and every browser other than IE.

And, why is this even an issue? Haven't you ever heard of the Underscore Hack?

div.fixed
{
position: fixed;
_position: absolute; /* since IE doesn't understand fixed */
}

[pottersdt2k]

ok hate to seem totally ignorant here...

but why does adding the _ make IE understand the code? I know it does, was just wondering why?

[Kravvitz]

Read this: http://wellstyled.com/singlelang.php?lang=en&page=css-underscore-hack.html

http://centricle.com/ref/css/filters/tests/underscore/