Need CSS/Cross-Browser assistnace!

[Maven4Champ]

Greetings,

I am coding for a site that I co-own and operate and do primarily 99% of the programming for while my partner in crime does alot of the designing in Photoshop.

I have a page found here:

http://bringtheblitz.com/btb_black/index.shtml

that has a login form at the top of the page.

My css can be found here:

http://bringtheblitz.com/styles/btb_black.css

So if you open in both firefox and browser, the alignment is COMPLETELY differnet, especially on the submit/login button which doesn't even align with the input fields.

I know there is cross-browser issues and IE treats things differently than Firefox but since a large portion of our audience uses both, I want it to be as close to normal as possible.

Any suggestions, through CSS or HTML on how to get this working?

Thanks!

 

[Vragabond]

I don't know what you're talking about. I am getting the same results in FF, IE6 and IE7. I cannot see any different alignment anywhere. Did you already fix it?

 

[Maven4Champ]

Yes I did fix it yesterday. I found a css "hack" if you will for IE and alternate browsers. My html code is the same but I did the following for the CSS:

button
{margin-bottom:0px;
#margin-bottom:-11px;}

This allowed me to trick the IE browser into aligning it the same way in firefox and I removed previosly added padding to align in firefox so all is well now.

Now my css code isn't W3C compliant because it doesn't allow for the #margin-bottom within the {} apparently but at least the site looks correct on both browsers.

Thanks!

 

[Rieekan]

For your IE hacks, you could use the conditional comments that IE supports and other browsers ignore...

  <!--[if lt IE 7]>
  <link href="/includes/css/quirks.css" rel="stylesheet" type="text/css" media="all">
  <![endif]-->

- George