• Skip to main content

Victor Font Consulting Group, LLC

Digital Business Strategists

Call Us:

+1 919-604-5828

  • Home
  • Care Plans
    • Care Articles
    • Optional Subscriptions
  • Consultations
  • Products
    • Code Snippets
    • Public GitHub Repositories
    • Gist Snippets
    • Pastebin Snippets (Free)
    • Free Plugins
  • FAQs
  • Support
    • Graphic Design
  • Contact
    • Speakers
    • Portfolio
  • Resources
    • Free WordPress Video Training
    • Tutorials
    • Articles
    • Cybersecurity
    • EU Referral Network
You are here: Home / Code Snippet / Chrome and Safari Conditional CSS

Chrome and Safari Conditional CSS

By Victor M. Font Jr.
May 14, 20142 Comments

CSS Tips and TricksIf your web pages display differently in Safari and Chrome as opposed to Internet Explorer and Firefox, you can use this cool CSS trick to correct the differences. Chrome and Safari use variations of the Webkit rendering engine.

The example below is a snippet of .CSS code that adds a top padding of 60px to a page's title element. It works fine in Firefox and IE, but when rendered in Safari and Chrome, the title is too close to the page's logo.

.title-section { padding: 60px 0 0; }

The code below will become effective in any Webkit based browser. The pages now appear the same way in Chrome and Safari as they do in IE and Firefox with the above code.

/* to fix rendering differences in Chrome and Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.title-section { padding: 120px 0 0; }
}
  • 7shares
  • Facebook0
  • Twitter0
  • Pinterest0
  • LinkedIn6
  • Print
  • SMS1

About Victor M. Font Jr.

Victor M. Font Jr. is an award winning author, entrepreneur, and Senior IT Executive. A Founding Board Member of the North Carolina Executive Roundtable, he has served on the Board of Advisors, of the North Carolina Technology Association, the International Institute of Business Analysis, Association of Information Technology Professionals, Toastmasters International, and the North Carolina Commission for Mental Health, Developmental Disabilities, and Substance Abuse Services. He is author of several books including The Ultimate Guide to the SDLC and Winning With WordPress Basics, and Cybersecurity.

Reader Interactions

VictorFont.com runs on the Genesis Framework

Genesis FrameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple—start using Genesis now!

Click here to download The Genesis Guide for Absolute Beginners (PDF - 1.4 MB)

Leave a Reply Cancel reply

Your email address and website will not be published. Required fields are marked *
Posting a comment means that you agree with and accept our Comment & Product Review Policy

Comments

  1. Lohith

    September 24, 2014 at 1:38 pm

    Hello Sir,

    do i have a specific conditional css statement for safari?

    please let me know if we have?

    thanks

    Reply
    • Victor M. Font Jr.

      September 24, 2014 at 1:53 pm

      Lohith,

      Safari and Chrome are both webkit based. The conditional CSS is the same for both browsers: @media screen and (-webkit-min-device-pixel-ratio:0)

      Reply

Call: +1 919-604-5828

Send us an E-mail

Accessibility Statement | Affiliate Marketing Disclosure | Capability Statement

Cookie Policy | Comment & Product Review Policy | Privacy Policy | Site Map | Terms & Conditions

Copyright © 2003–2022 Victor M. Font Jr.

Return to top of page
Posting....
We only use analytical cookies on our website that allow us to recognize and count the number of visitors, but they do not identify you individually. They help us to improve the way our website works. By clicking Accept you, agree to cookies being used in accordance with our Cookie Policy.OkNoCookie policy