CSS Chrome Fix (Chrome alone css hack)

October 31, 2010

Chrome alone fix, here when i was in a situation where i had a good design ready for a live implementation, but there was an issue waiting for me. Everything was intact untill i got my site to be run on Chrome browser, i had an exclusive issue that was occuring only on Google Chrome.

The solution has to be in such a way that I get the css style that works only for chrome. How can I have a style written for this exclusive for Chrome???Then i got this Chrome fix on the web,

@media screen and (-webkit-min-device-pixel-ratio:0) { …….. }

Something like this,

@media screen and (-webkit-min-device-pixel-ratio:0) { id_name/class_name{style_property: style_value;} }

One good example for this can be like,

@media screen and (-webkit-min-device-pixel-ratio:0) { #right_col{height: 2419px;} }

Add this to your css styles either inline or external.It works like a wonder :)

Try it on your code and get back with your comments.

About these ads

16 Responses to “CSS Chrome Fix (Chrome alone css hack)”

  1. Dada Says:

    Do you know How to do it for Opera? something like i want to apply gradient for my site withut images using only colors….
    Actually i suceeded in mozilla, chrome,safari and ie how to do that in opera?
    that will be helpful for me


    • Hi Dada,
      Give this try here at this link,
      http://www.felgall.com/gradient.htm

      Also the colour gradient not appear for older browsers when this approach rather than a background image is used, but the code that needs to be added to the web page in order to apply this method will be much larger in size than a properly optimisedf background image to provide the same effect would be. This means that a web page that avoids using an image to provide a colour gradient background will be both slower to download (bigger files) and slower to render (repeating a background image to fill the required area will be much faster than running either the SVG code or Microsoft filter to generate the gradient).

      Try using the CSS repeating of a sliced image, as that might be more efficient than this option of code made gradient.

      Thanks.

  2. Patte Says:

    The heading is quite misleading since this fix targets all Webkit browsers. Sadly this isn’t a Chrome alone fix, rather a Safari and Chrome fix.

    I’m looking for a Chrome alone fix, since Safari, Firefox and IE displaying my page fine, but Chrome is messed up.

    Cheers,
    Patte

  3. Amber Says:

    Thanks so much. This is the 1st time i’ve needed a fix for Chrome. Never thought that would happen since it always displays my webpages the way i want it to.

  4. Gagan Says:

    code really helped to fix thing in chrome thanx :)

  5. Salaction Says:

    I love you. This did wonders <3
    Had been searching for stupid plugins gems js fixes you name it.

  6. mark Says:

    Thanks for the post thanks thanks


  7. [...] CSS Chrome Fix (Chrome alone css hack) « Mahaveer’s BlogOct 31, 2010 … Chrome alone fix, here when i was in a situation where i had a good design ready for a live implementation, but there was an issue waiting for … [...]

  8. Huynh Hieu Says:

    Thanks, that’s good!

  9. BdeS Says:

    Great, lifesaver! (Y) thumbs up!

  10. Sara Says:

    This targets Safari and Chrome – this is not exclusive to Chrome.

  11. StanleyTips Says:

    Thanx for this tutorial, now i will be able to fix all my website bugs found on Chrome :X

  12. nishant Says:

    this is not working

  13. ngf Says:

    great !! working :)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 784 other followers

%d bloggers like this: