How to prevent Chrome from changing text color when printing

Chrome has a feature that turns light text to black before printing. For instance, if you have a light gray paragraph on the page, it will print as black text. While this feature might ensure that unoptimized pages are readable when printed, you might want to disable it so colors come out the way you […]

Using CSS3 transforms and calc() in Internet Explorer

Although CSS calc sizes are supported in Internet Explorer 10 and above, they do not work when used in transform attributes. For instance, transform: translate(0, calc(100% – 10px)); does not work in Internet Explorer. To work around this, you can chain transforms. For instance, the following statements are equivalent: transform: translate(0, calc(100% – 10px)); //Does […]

Print preview significantly different from Inspector in Chrome?

Are you having issues with the Chrome print media emulator showing different results from print preview? Here’s how I solved this problem. In the emulator, my styles were showing just fine, but despite all the !important rules in the world, nothing would work in print preview. It turns out the print preview will display your […]

Disabling font zooming in Chrome on Android

If you are here, you have probably tried disabling font zooming by using -webkit-text-size-adjust:100% and discovered it didn’t work. Chrome conveniently ignores this non-standard property, so you need to use an inconvenient hack to disable what is called font boosting by adding the following line to your CSS file: html * {max-height:1000000px;} Your fonts should […]

How to force IE8 to render without compatibility mode

Some companies force Internet Explorer 8 to render all pages using the Internet Explorer 7. This is what Microsoft calls “compatibility mode”. Fortunately, you can override that setting and force IE to render the page using the latest version of its rendering engine (IE8+) with a simple meta tag. Place this before all other tags […]

How to remove the dropdown arrow in Internet Explorer

Unlike other browsers, Internet Explorer will not fully disable a <select> element’s style when you use the CSS3 appearance property. To hide the dropdown’s arrow, use the following CSS line: select::-ms-expand { display: none; }

Firefox, display:table-cell and absolute positioning

This is now fixed in the latest release of Firefox, so you should not have to worry about this. If you have reached this page, you are probably trying to put a position:absolute element in a display:table-cell; position:relative element. This shouldn’t be a problem with Chrome and Internet Explorer, but Firefox will probably ignore position:relative […]

Mobile web design: how to disable zooming on your mobile sites

When you are making a mobile website, you might want to disable sideways scrolling and zooming. Although I wouldn’t personally recommend disabling zooming, it’s easily done. In your head tag, insert the following meta tag: <meta content=’width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0′ name=’viewport’ /> This tag is recognized by all major browsers, including Chrome on Android and […]

How to prevent Safari from resizing text in iOS

By default, rotating the iPhone’s screen will resize the font in mobile Safari. Although this can be useful for desktop websites, it can easily break a beautiful mobile design. All you need to do is to set the following CSS attribute on the body element: -webkit-text-size-adjust: none; This will prevent webkit browsers (Safari included) from […]

Integrating Django forms with Twitter Bootstrap

With this template, you will be able to use Twitter Bootstrap with your Django forms. In this example, we assume our form is in the form variable. <form class=”form-horizontal” action=”” method=”POST” {% if form.is_multipart %}enctype=”multipart/form-data”{% endif %}> {% csrf_token %} {{ form.media }} {% if form.errors %} <div class=”alert alert-error”> <ul> {% for error in […]