Hi everyone, I'm relatively new to the world of freelance and for the most part, I enjoy it. However, nothing frustrates me more than thinking I'm done doing a beautiful website, then checking it in IE Tester and watching the nightmare unfold. It seems that every site I design works flawlessly in Firefox, Chrome, and Safari, rendered the same down to the very pixel. I'm finding that every website I make, needs IE specific stylesheets in order for all of them to function properly. <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> Code (markup): This is not only for IE6 but for IE7, and IE8 as well! It seems like I spend half my time just debugging the damn sites in IE. Is this reflective of my programming ability? Is there an exact way to code without needed IE specific stylesheets at all? I try making changes to my style.css to make it render in IE6 for example, but it ultimately screws something up in Firefox. What can I do to avoid these bugs? How can I code better? What do you do to spend as little time as you can fixing a site in IE? Someone already mentioned to me that a CSS reset will help. Any other suggestions? Thanks in advance for your help
Now you know why designers hate IE! There is no shame in separate style sheets for IE, especially IE6. you may find that some compromise must be made and that some designs may not look right in IE6 without the help of JavaScript (working around unsupported pseudo-classes, etc). To help avoid bugs and major flaws in your design, test frequently with all browsers. Download IETester and don't rely on any one browser to test your design... mix it up. You can also try building your sites off a framework like BluePrint (www.blueprintcss.org).
Thank you for the input. About blueprint, is it easy to learn? I've heard that some drawbacks to using a framework is the main container is not adjustable, sticking to around 960px or something like that.
Yes, it's fairly simple... very low learning curve if you are familiar with CSS. Using the samples they provide with the download, you can pick up on it pretty quick. You are correct in that the main container is fixed width at 960. You may benefit from the reset.css included with the framework though. Otherwise, you can find a good reset.css on Google. Also, there are other frameworks you can use to generate container widths at nearly any size; for example, the 960 grid system (http://960.gs) has a grid generator (http://www.spry-soft.com/grids/).
If you have a high traffic website...there is a good idea to use IE specific style sheets. I usually don`t use it...my websites are very small, so, sadly, I can say I don`t care too much about IE users