Jump to content
Sign in to follow this  
JCKnoell

Chrome Browser Hack not working

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...