Chrome Browser Hack not working

[JCKnoell]

Okay, so my site, http://www.cleantelligent.com,

has a specifically styled form in the footer. I had to use inline styling to get all the fields to show up where I need them. In Firefox and IE, it looks fantastic and all lined up. But when I opened it in Chrome, all the fields are misplaced.

I tried using the following browser hack:

/*Chrome Fix*/@media screen and/*!*/ (-webkit-min-device-pixel-ratio:0) {.infusion-field-footer{	float: left;	padding-top: 5px;}.chromefix-fn{	position: relative;	left: -200px !important;	margin-top: 3px;}.chromefix-phone{	left: -6px !important;	position: relative !important;}}

But it's still not affecting the styling in Chrome.

Any ideas here? I can post any additional code you need upon request.

Edited April 18, 2014 by JCKnoell

[davej]

Text inputs inside spans inside paragraphs? Then you throw in relative positioning? The Rube Goldberg school of web design?

[JCKnoell]

Yes, I understand. I have to absolutely style this form in order to get it to behave.

It's a mixture of styling provided by the contact form 7 plugin, and my own relative styling to get the field to line up. My question is, why does it work in Firefox and not the other two? Do I need to change something and start over?

 

Any help here is appreciated... This is a huge deal for the site and needs to be fixed right away... :S

[davej]

Well, I started looking at it but you really have a confusing assembly of code there. Perhaps you missed clearing one of the browser styling defaults? Did you zero out the margins and padding for everything?

 

It looks like you have perhaps partially fixed it? Email and Phone are still out of control.

 

Also you should look at the W3 validator sometime. There are a lot of issues that are being flagged.

 

If I were you I would rebuild the "supplementary" div so that it uses normal "float" page flow. You probably need to add a "fourth" div because you need four column groups.

 

Actually, you have a table in the "second" div that should be able to solve the visible problem with e-mail and phone. Why doesn't the table have two columns? You can just put e-mail and phone and the submit button into the second column of the table.