I am in the midst of creating a website using CSS. I had originally created the site when IE7 was still the newest version. Now that IE8 has been released I am having a bit of trouble. The side bar is not being viewed correctly. If I hit the Compatability Button near the Refresh Button it works fine, but if that button is not hit it is off to the right. You can look at what I am referring to by going to www.youinfer.com. I have attached both the html file and the CSS file. Any help would be greatly appreciated. Thanks, Brandon
This is one of the biggest mistakes newbs make, using any version of IE as a test bed. IE is the worst browser on the planet and 11 years behind all others in modern standards and compliance. Always, always use a modern browser, anything but IE, to initially test your markup. Then you check in IE for if/when it screws up. But the quirks and bugs of IE are known, as are the hacks to fix it. 1) IE8 does not work the same as IE7 compatibility mode which doesn't work the same as IE7 which doesn't work like IE6. 2) XHTML1.1 is a XML application and should be serve as XML, which you are not. Drop back to 1.0. 3) Validate your your list of errors.
A CSS reset is always a good idea when dealing with different browsers and compatibility issues. It also help you avoid the unexpected consquences of using certain HTML elements that have preset properties. However, there is no sense in reseting what you aren't using. For example, I don't think you will be using <blockquote>, yet its in your reset. Some of your rendering issues may be because of your XHTML errors. As correctly stated, you should look at your validation errors as it can help you fix many of the mistakes caused by you and not the browsers. For example, did you know that you have this in your source "</html></div>"?
But you have to ensure your site compatible with them all, for half the visitors are still using IE, right? At this point, web designers have no choice.
Well, what if I use <blockquotes> the day after tomorrow, or maybe next saturday a <fieldset>? It might be very different from what we're expecting. Reset is redefining styles, it is said that "Never say never", so I think it's a good habit to define seldom used styles, as well as most often used ones.
You may check this page for some good ideas about reset styles. http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/ Code (markup): Hope that helps and inspires.
I didn't say not to. I said you have to make sure your markup is tested in a proper browser. THEN test it in IE so you can fix IEs screw ups.
Even better: test in modern browsers AND IE at the same time, especially if you're new to using CSS. This lets you catch bugs really early, and makes fixing them, for any browser, easier because you can nip a big problem in the bud. I confess that nowadays I find myself building everything and only looking in FF until my major boxes are good... and only going into major browser testing later. Likely because the same techniques are used on most pages, and I've seen them in other browsers before.