html/css positioning issue in ie7/8

Question

I cannot for the life of me figure out how to get this aligned correctly in IE7/8..

If you look at the site in Firefox 4+ it works fine! Not sure if that is the right thing or not..

At the top where the "Sign In" link is; in firefox is exactly how I want it but in IE it is displayed all weird.

If anyone could help, that'd be great. (the site isn't fully functional yet.. still working on it.. thanks!)

Answer 1

First, before any attempt to debug CSS is made, you must always validate your page.

You have 23 Errors at this time, and they are pretty important (but easy to fix) ones. You have unclosed divs, paragraphs, etc. It may be just a couple of errors that are causing a cascade.

My advice: Fix those errors. Start at the first one and work your way down until they all are gone. You are likely to see IE problems disappear. The other browsers are just being more forgiving.

Conditional comments are an option for when you're really stuck, but 99% of the time you don't truly need it. Often IE errors are caused by mistakes that other browsers are nice enough to deal with in a graceful manner.

Once upon a time I used to design IN Internet Explorer, and found that checking my work in FF or Chrome was almost always in line with IE's rendering. Sometimes the newer browsers are too forgiving of errors so you don't catch them.

Answer 2

In your html you can use special css just for ie so other browsers just ignore:

<!--[if lt IE 9]>
<style type="text/css">
 your css here

</style>
<![endif]-->

Answer 3

you could just create another styling section for IE using *+ hack. IE:

*+.signin{
 .....
}