Need a quick help in CSS margining..

Please check this site in IE7, and Firefox

http://www.ramonbongrevillajr.com/

as you can see, the top menu doesn't display in IE7, but it displays in firefox... this is the CSS in the top Menu:

.topmenu {
	text-align:right;
	float: right;
	margin-top: 37px;
}

Code (markup):

If i set the margin top to 20, the top menu can now be seen in IE7, but it was placed so high in FF.

How can I put a condition, or maybe just do the trick in CSS that If the browser is IE7, the margin-top will be 20px, and if FF, the margin-top will be 37px..

need help CSS gurus..

 

You know the site doesn't work in IE6, IE7 or opera?

Anyway, I know this won't help this time, but you may wish to consider using a "reset" stylesheet when building sites in the future, something like the following will help reduce the errors you are now facing.

CSS:

*
{
padding: 0;
margin: 0;
}

Code (markup):

Also, have you tried validating your html and css?

 

Add this

.header form {
 margin: 0;
}

Code (markup):

 

Thanks nicangeli and SoKickIt Now it displays just fine

@nicangeli - i haven't validated it yet.. thanks for the heads up

 

Also, do you know how to use IE's conditional comments, which allow you to provide code specifically for versions of IE you declare with the conditional comment.

IE Conditional Comments

 

Oooooooh.. i don't know about it.. thanks CSSDevMonkey

 

Avoid using conditional statements wherever possible. It will cause you so many headaches down the road, it is not even worth it. Site maintenance is really difficult if you are using IE conditional statements.

 

Thanks for the heads up ChaosFoo