Firefox OK, IE issues...whats new!

**incrediblehelp** · #1 (**permalink**) 01-03-2006, 04:32 PM

Hello everyone,

I was wondering if anyone could help me here. I recently widen my columns on my SEO blog. The blog renders correctly in Firefox, but IE is having issues with it. In IE it puts the middle column contents under the first column. Any ideas?

www.jaankanellis.com

**brian.mark** · #2 (**permalink**) 01-03-2006, 04:51 PM

I get similar issues on our "How to..." blog. Seems that even the default template is only designed for FireFox, so it doesn't matter if I change it or not.

Since I run Linux, I can't even see what it looks like in IE. That fixed the problem for me. :-)

If I come across any revelations while trying to fix ours, I'll let you know.

Brian.

**incrediblehelp** · #3 (**permalink**) 01-03-2006, 04:56 PM

Well considering most of the world still uses poopie IE we have to code for it as well.

bj · #4 (**permalink**) 01-03-2006, 05:09 PM

I call it Microsoft Math- 1 + 1 = 2.05 or thereabouts. Not only does IE need more room for EVERYTHING, which results in columns dropping, but also the IE Margin Doubling Bug on floated layouts is often a culprit.

Reduce paddings and margins bit by bit and make your elements a bit narrower than FF requires to fit in the space and IE will eventually play nice. And if it is a floated layout with two floats next to each other going in the same direction put display: inline; on those two floats and that should fix that.

richkoi · #5 (**permalink**) 01-03-2006, 05:40 PM

I was just about to create a rant post about this... but I'll reply to yours instead.

<rant>IE SUCKS AT RENDERING CSS AND TABLES CORRECTLY! Why does everyone use it!? Why can't Microsoft get its act together and comply to standards!?</rant>

Ok, feeling better... Now, this is how I fixed it. I reduced the size of my middle column by a few pixels and that worked like a charm.

...however, it screwed up other parts of the layout in FireFox... Eventually I tweaked everything just right, changing pixels here and there in my CSS file... but now I feel like my layout is held together with duct tape and rubber bands just waiting to explode.

**incrediblehelp** · #6 (**permalink**) 01-03-2006, 05:45 PM

Thanks everyone I will play with it and let everyone know.

One thing that is cool that I found during this fix process is this plugin:

https://addons.mozilla.org/extension...info.php?id=60

I am sure most are aware of it, but it is so helpful when trying out changes on live websites.

Faglork · #7 (**permalink**) 01-03-2006, 05:48 PM

incrediblehelp,

your DTD is throwing browsers into different rendering modes. See
http://hsivonen.iki.fi/doctype/
for comparison.

For matters like these, I suggest
- chosing a DTD which triggers the same rendering mode
- a global whitespace reset
and work from there.

hth,
Alex

Faglork · #8 (**permalink**) 01-03-2006, 05:52 PM

Quote:

Originally Posted by incrediblehelp

I am sure most are aware of it, but it is so helpful when trying out changes on live websites.

This is what I call my secret weapon. Just a few extensions more (like Launchy, Colorzilla, etc) and FF turns into a very usable development center. Oh, and don't forget to install IETabs - it lets you view pages in FF with the IE rendering engine. Whoa!

faglork

bj · #9 (**permalink**) 01-03-2006, 06:20 PM

You might also want to check out this one:
http://karmatics.com/aardvark/

Though the webdev extension is definitely a top tool, I actually find Aardvark more helpful for debugging the stuff that goes wrong in layout spacing since it shows me exactly WHICH element is doing the "pushing" and causing the bork. If you find the pushy element in FF by using Aardvark, and fix it, then usually IE falls into line (unless it's one of the long list of IE Buggies causing the problem.)

**incrediblehelp** · #10 (**permalink**) 01-03-2006, 07:22 PM

Quote:

Originally Posted by Faglork

incrediblehelp,

your DTD is throwing browsers into different rendering modes. See
http://hsivonen.iki.fi/doctype/
for comparison.

For matters like these, I suggest
- chosing a DTD which triggers the same rendering mode
- a global whitespace reset
and work from there.

hth,
Alex

I choose this one:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Does this one satisfy your recommendations above?

Faglork · #11 (**permalink**) 01-04-2006, 04:40 AM

http://hsivonen.iki.fi/doctype/

... as you can see, no.

This does not mean that you *have* to change your dtd: you just have to take the different modes into consideration when writing/applying your CSS. You might use MS proprietary conditional HTML statement to serve a different CSS to IE.

But I think it is easier the other way 'round.

faglork

**incrediblehelp** · #12 (**permalink**) 01-04-2006, 11:06 AM

Well the column issue is fixed. BJ was right, I just played with the "width:" sizes for each, #content and menu-right# until it worked in IE and Firefox.

Thanks!

**incrediblehelp** · #13 (**permalink**) 01-04-2006, 11:09 AM

It seems that this doctype is pretty standard:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

This should work for most web pages right?

I understand what you mean by using the doctype to serve websites differently for different browsers, but I dont think this applies or is needed in my case.

Faglork · #14 (**permalink**) 01-04-2006, 12:49 PM

Quote:

Originally Posted by incrediblehelp

It seems that this doctype is pretty standard:

"standard" is not the question here. There are several standard DTDs, each one having different effects on how a given browser renders the page.

Quote:

Originally Posted by incrediblehelp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

This should work for most web pages right?

This is not about "working or not working". Different DTD --> different rendering mode. The above DTD triggers standard mode for some browsers, "almost standard" mode for some others, and IE is thrown into quirks mode, thus resulting in different page rendering by applying a different box model.

Quote:

Originally Posted by incrediblehelp

I understand what you mean by using the doctype to serve websites differently for different browsers,

No, this is not what it is all about. For a given DTD, browsers render pages in a different way by applying a different rendering mode. Nothing is served differently to different browsers. All browsers get the same DTD, they just react differently: They apply a certain rendering mode, dependent on the chosen DTD.

Quote:

Originally Posted by incrediblehelp

but I dont think this applies or is needed in my case.

It applies in EVERY case, there is nothing you can do about it. Even if you omit the DTD ...

Whether you NEED a certain DTD is up to you and the way you construct your pages.

What I suggested is just a way to minimize cross-browser issues by eliminating basic rendering differences (broken box model etc.). If you are happy working your way around, so be it. I just wanted to point that out.

hth,
faglork

bj · #15 (**permalink**) 01-04-2006, 07:44 PM

You're welcome, Jaan!

One thing you can do to help avoid problems with IE and the width thing is to define your structure with divs (usually I id the main structural elements) then put any padding on the INNER elements, such as the paragraphs, headlines or lists. When you put padding on a structural div that has a width defined it ADDS to the size of that div- so a div you thought was the right size turns up being too big for the space after you've added padding!

**incrediblehelp** · #16 (**permalink**) 01-05-2006, 04:57 PM

Special thanks to Bootboy from PM's as well.

Tim · #17 (**permalink**) 01-06-2006, 04:55 PM

You're welcome, Jaan!