Jump to content

Chrome Browser Hack not working


JCKnoell
 Share

Recommended Posts

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 by JCKnoell
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...