Ahh! I have spent the last few days designing a website from scratch using only FireFox. I previewed it in IE and it looks terrible! www.hosthaus.ca Someone please help me, I have tried messing around with things to no avail. Any help would be great!
There's quite a few problems - the best way of solving it is to create a separate IE7 css file (and IE6) and link them in to your head. That way, if you are happy with your design in Firefox, Opera and Safari, you can make changes to the CSS that only affect IE. Tinker around with css... you'll get there in the end although it can be as frustrating as banging your head against a brickwall... IE hell... we've all been there... but going through this process is a necessity as if you learn where the problems are, next time you come to design a website you'll have some idea what to look out for. If I'm designing a site, I constantly flick between browsers as I work, rather than designing a site and then comparing it in different browsers. I find it a more efficient way of working.
Cottonwood is right. It's best just to create a separate style sheet for IE. For example, to make your site read one if the user is using IE7, put this bit of code into the <head> section: <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="filename.css" /> <![endif]-->
Well, no... it depends on what's making the site look like crap. Often it's a handful of IE6 bugs, which can be dealt with in a single stylesheet so long as you know what they are (that's the IE hell, not knowing what the bugs are). For instance, a real popular set of bugs are the ones who contribute to float dropping. You have some two or three-column site, looks fine on everyone, then in IE6 one of the floats is way down at the bottom. Usually there's either not really enough room in the container for all the floats (modern browsers like FF will let content overflow a bit and it looks okay) while IE6 drops... if a float is next to non-floated (static) content then 3px-jog bug is often enough to make there not be enough room... or, the side margins on the floats might be doubled (adding display: inline to the float magically fixes it and does no harm to the other browsers cause a float is automatically a block anyway... but removes the dubbeling). IE6 wraps floats too, which other browsers don't, so sometimes there's extra space after a float because the container is stretching to the bottom in IE6 while staying near the top of the floats in other browsers. Set an ugly background colour to each float, container, and positioned element to see where they really are in FF and IE6. It's great for bug-squishing. This is a nice article by Paul, what I said basically comes from him (and experience): http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15 Sometimes you only need a single different declaration for IE6... if that's so, and not a whole bunch of them, then in your single stylesheet you can do * html #elementname { declaration; } which is only seen by IE6 and below. (not ie7, notice). Making sure you have a doctype, esp a doctype without anything above it (no <?xml bs, no spaces, no php code, no comments, not a spacebar space, nothing!) because otherwise IE6 and IE7 will act like IE5 and will be extra retarded. *edit, looked at the site, doctypes good but validating the code might solve a lot of the problems http://validator.w3.org/check?uri=w...(detect+automatically)&doctype=Inline&group=0 and also, each browser has its own default of padding and margins, which can also account for things not quite sitting right. Since everything's tabled, you don't have any of the float problems I mentioned, but it shouldn't hurt to zero margins and padding on everything so every browser starts at the same place: top of CSS sheet: * { margin: 0; padding: 0; } * means "everything" so then you can add back whatever margins and padding you want on stuff.
Thanks ALOT guys. I have seemed to fix the problems, HOWEVER Safari just looks plain fucked. Should I even bother with Safari? browsershots.org + I checked it out myself Looks fine is Firefox, IE6, IE7.. Should I worry about other browsers.. It's a very small company.
Not sure what looks wrong on browsershots... site looks good in Safari-for-Windows and Opera. Yesh, if Safari or Opera makes the site look like sh*t while FF and IE are fine, you really should keep working on it, as they are compliant browsers and are likely pointing out real errors. Meaning when FF or IE gets updated to more compliance, your site would break. But I think it looks fine : )