Okay! Here's the deal. I am trying to teach myself css and learning as I go so bear with me.

I have been playing with a page. I get the code to work in IE7 and it doesn't look right in FF or Opera. So I pull my hair out trying to get to look the same in all 3 browsers and it ain't working.

So, I figured that I would just have 2 files - 1 for IE and 1 for FF and Opera.

This is the first time to try this and I'm not sure how to call up the different stylesheets to fit the browser. For example, I was thinking that I would have pg1A.css called if someone is using IE7 and leave the default pg1.html for FF and Opera.

I have tried to understand this and it's just not working. Maybe I'm too thick-headed, but is this possible and if so, how can I do this?

Thanks

Don't beat yourself over something that has been the trouble for all web designers alike. The best advice I can tell you is to reset the browser from scratch, and then start from there. You can do this by using * {margin: 0; padding: 0;}

If it's not broke don't fix it

To call an alternate style sheet written for IE put this in your head section:-

<!--[if IE]>
<link rel=”stylesheet” href=”pg1A.css” type=”text/css”>
<![endif]–>

Call your style sheet for other browsers like this:-

<link rel=”stylesheet” href=”pg1.css” type=”text/css”>

The above assumes your CSS files are in the same directory as your HTML files, otherwise you will need to adjust the path.

Hope this helps.

Ok, I have to say it - if you're trying to make it look right in IE FIRST, you're approaching the problem BACKWARDS. Get it to be 'right' in Firefox first, then you'll be 99.9% of the way there for Opera and Safari (and almost for IE7). THEN you go back and address IE's bad behavior with conditional comments to call separate stylesheets that hold only the 'fixes' needed for IE.

It's part of the learning curve and many of us have pulled our hair out over the very same things.

LadynRed is right. It will usually end up being easier if you code for Firefox first and periodically check how things look in IE. The more experience you gain the more you'll know in advance where FF and IE differ and how to ensure your page works best in both.

For example when it comes to lists, one browser uses margin to indent the list and the other uses padding. If you set both margin and padding on your lists to 0 that will make both browsers see the same thing. Then you can add back margin or padding as you like to indent things. The idea is you need to explicitly set both for the two browsers to agree.

I think most of us here will develop for Firefox and maybe end up with a half dozen lines of code that need to be written specifically for one version of IE or another. Then we use conditional comments to serve the IE specific css to IE. At least that's what I usually end up doing.

Originally Posted by vangogh

I think most of us here will develop for Firefox.

Exactly vangogh. I refuse to upgrade my browser to IE6 just for that particular reason (and I want to stick it to the man). But in my experience IE6 is the roughest and toughest browser to get to work.

And unfortunately is still being using by someone out there.

I actually rarely use those IE hacks though, for some reason, it usually works out, at least I think it does. But I will keep the code in mind for future projects. I know it will come in handy.