Why does well written code that shows up on Chrome and Firefox look terrible on IE?

I have written a form, it looks great on Chrome and Firefox, but on IE it looks like a kid just used a drag and drop program and called it a day...

Is there something I need to do to make IE treat my code with respect? I am using XHTML strict... if that helps at all.

 

IE has always been the worst browser on the planet. Inept at best, it is years behind all others in modern standards support and practices. In addition, the elements and properties it does support, it does so poorly. IE will never be a modern browser and is losing market share rapidly as the average person learns of how awful it is. No one who knows what they're doing uses IE.

Without a link to your site, or the complete markup, we can't help with your problem.

 

Sorry, here:

http://www.kaboomlabs.com/PDI/ncmr.html

 

Cheers to the fine Dr Fine, as always!!!


Matt, you've got some minor issues all around there buddy..... Working some out now - give me a few minutes...

 

Actually - you're not that bad off... most of the issues are spacing / padding / margins in your css...

By not having any type of reset in your css, by default you are allowing the browser to display items using their default padding, margins, etc... You need to declare these and or reset then declare these values in your stylesheet.

Other than that, it appears that the general appearance overall, is the same in all browsers with the exception of some spacing and left alignment of areas without a container...

Does that help or make sense?.. I know you've been learning and don't want to give you the solution straight out...

 

Actually it does, I going to add the padding in if it really did come to that, but I was hoping that the browsers themselves would be more uniform.

Although what do you mean by having a reset?

 

Also, is there a way to only allow the padding to be used in IE only? Because I don't need extra padding for some browsers.

 

BROWSERS ARE NOT UNIFORM!!! Especially IE.....

If you use a CSS Reset, then you have a baseline starting point, therefore most of your issues will be resolved by adding the desired values via your stylesheet.

Here are 2 really good resets...

1 - http://meyerweb.com/eric/tools/css/reset/

2 - http://yuilibrary.com/yui/docs/cssreset/

 

I know browsers aren't uniform, but Firefox and Chrome seem to be pretty good on keeping the format clean... as I wrote it.

As for the resets won't that override the rest of the CSS script below it?

I only ask because of my newness... but also, as I asked before, is there a way to make it so that the padding is only used in IE? and ignored in browsers that actually follow CSS to the letter?

 

Ahh... well you're asking a question that has no direct answer.....

But, for a straight answer to your question... YES you could add an IE only stylesheet with an IE hack like so...

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" media=screen" />
<![endif]-->

Code (markup):

 

Is it the right thing to do... In my opinion, NO!

With a reset and some careful code planning, for your particular project, there should be no need for hacks and conditional items to appear or to be used.

Besides, teaching you to work around rather than deal with the issues at hand only saves you time and doesn't not teach you the proper way to code...

 

Ok, but again won't the override if placed at the beginning override everything below it as well? Or am I mistaken?

This is my CSS script.

http://kaboomlabs.com/PDI/pdi.css

 

Whatever CSS you place in the ie.css file will only be used if the browser is any version of IE...

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" media=screen" />
<![endif]-->

Code (markup):

 

Sorry, I meant the original links you have offered... not the "cheat"...

 

The reset will NOT override any CSS declarations you make...

 

Thanks, that is what I wanted to make sure, the last thing I needed was to mess up my CSS

 

Ok, backdraw using the script you suggested on the first links, they have removed all formatting and have overridden the CSS revisions under it.

http://www.kaboomlabs.com/PDI/ncmr.html

 

Ok, after a long slog through editing things correctly, I have a question, how do I put spaces between the items? So they don't blend together in IE?

What is the command, my brain isn't working to remember right now.

Thanks

 

horizontal spacing? - meaning an html space?

 

Code (markup):

Via CSS use padding / margin...

 

wouldn't <br /> work better?