Chrome is based on webkit, to so target your CSS for Chrome only, you can use webkit hack. Here is an example:
@media screen and (-webkit-min-device-pixel-ratio:0) { .item { background-color: #FF0000; } #item-group {color: #0000FF;} p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4); }
To make vertical scroll bar appear on the left instead of right, using CSS overflow alone is not enough. A JavaScript jQuery plugin could save all the heavy coding.
In the example below, we have a div named ‘scollme’ and the div has a fixed height and overflow set to auto, to initialize the scrollbar only requires one line, which is $('#scrollme').leftScrollbar();. You can see the demo at: http://www.highub.com/demo/leftscrollbar.html
$('#scrollme').leftScrollbar();
<!DOCTYPE html> <html> <head> <style> div#scrollme { width:200px; height:100px; overflow:auto; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.leftscrollbar.js"></script> </head> <body> <div id="scrollme"> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> hihihi<br /> </div> <script> $('#scrollme').leftScrollbar(); </script> </body> </html>
The minimum value of z-index is 0, for Firefox, you can go all the way to -2147483647, but IE can’t read any value below 0.
The maximum value of z-index is 2147483647.
To vertically align checkbox in HTML CSS, one has to use a combination of vertical align and margin for the checkbox.
<style>.checkbox { vertical-align:middle; margin:0px; }</style> <input type="checkbox" class="checkbox" />
You can set HTML table cellpadding and cellspacing in CSS.
For example, if you want table cellpadding and cellspacing to be zero, here is how you can do it:
table { border-collapse: collapse; // 'cellspacing' equivalent } table td, table th { padding: 0; // 'cellpadding' equivalent }
By right, you shouldn’t get both horizontal and vertical scrollbars unless you make the content large enough to require them.
Howeve typically due to a bug in IE, this happens at times.
IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:
overflow: auto; overflow-y: hidden;
You may also need to add the following for IE8:
-ms-overflow-y: hidden;
Here is the official document that explains how to use CSS in Django: http://docs.djangoproject.com/en/dev/howto/static-files/, basically it’s about setting up your URL’s, then reference you media files in the template.
To add instead of replacing CSS class with JavaScript is easy.
Here is how you can add a CSS class:
document.getElementById("MyElement").className += " MyClass";
By default, iFrame content doesn’t respond to the CSS on the parent HTML. To apply parent HTML CSS rules to the iFrame, you need the help of JavaScript.
Here is the snippet to do so:
var frm = frames['frame'].document; var otherhead = frm.getElementsByTagName("head")[0]; var link = frm.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setAttribute("href", "style.css"); otherhead.appendChild(link);
In IE8, if you set max-height value and overflow to auto, it behaves as if overflow is hidden. The scrollbar won’t appear.
There is a really nasty fix for it.
For instance, if you want to set maximum height to 200px, here is how you can do it:
/* SUPER nasty IE8 hack to deal with this bug */ pre { max-height: 200px; max-height: none\9 }
