I need a little help with a project I am helping a friend with.

There are two things I am trying to align correctly in at least three browsers: IE, FF, and Chrome. There is a text byline and a floated list of nav links. I can get it to look fine in FF and Chrome but IE doesn't want to cooperate.

Notice that with no styling on either div right now, they line up in different places. In IE they line up in the same space. While in FF or Chrome they line up one above the other.

Click Here to View my mess.

Thanks,
Shadrach

It doesn't look right in Firefox either, the menu is smack on the middle of the header. Put about a top margin on #topnav and it'll move down. In FF and IE6, the links are in a horizontal line if that's what you meant.

The margin:auto on the floated links won't work unless you define a width first.

I know it looks bad. There is no styling for either div. The problem is that each div has a different origin in IE than in FF or Chrome. I can use a top margin to move each div down. But because they started in different places they end up in different places. I don't know how to fix the problem in IE without messing it up in FF and Chrome. And fixing the problem in FF and Chrome.. See what I mean.

Why can't all browsers be standards compliant???

I mean what's the point of "code" if you can interpret it however you want?

Thanks,
Shadrach

Why can't all browsers be standards compliant???

I mean what's the point of "code" if you can interpret it however you want?

Well, the biggest offender is IE and it's been the bane of web designers for years, so welcome to our world

Conditional comments and a separate css file for IE will allow you to get things working for the compliant browsers and then spank IE until it behaves. The IE only css file will contain ONLY those rules needed to make it obey.

The divs are in the same place in the HTML for all browsers, you just have to compensate as mentioned above, the rest should work just fine.