CSS

Warning message

JQuery Cycle must be installed in order to run the slideshow. Please go to Status Report for instructions.
label[for=email]
{
    /* ...definitions here... */
}

In this example you can line up 3 divs in the same line

HTML :

<div class="main-class">
    <div class="sub-class">C1</div>
    <div class="sub-class">C2</div>
    <div class="sub-class">C3</div>
</div>

CSS:

.main-class
{
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 10px; /*Optional*/
}

.sub-class
{
    display: table-cell;
}

By using a div with style z-index:1; and position: absolute; you can overlay your div on any other div.

z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.

Sometime situation appears that all over things are working pretty fine on other web browsers except chrome. For writing the things specific to chrome use this code :

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

}

and wrap all the things of CSS inside this code. It will apply specifically to chrome browser only.

JavaScript Solution :

if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button 
}

To Set perfect background picture, which is centered and works on cross browser platform you have to use :

Technique #1 :

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
	
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
	
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }

Technique #2 :


#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
	
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

 

We enable all the "performance settings" which includes "javascript and css optimization" . Sometimes that javascript or css optimization can conflict on various pages and create various bugs, disturb the design of our page, misplace the elements on the page.

To prevent from this, we can disable the JS or CSS to render on that particular pages. To do this we have to use drupal's global configuration variable . Suppose you want to prevent JS and CSS on blog creation page then  :

 global $conf;

 if((arg(0) == 'node' && arg(1) == 'add' && arg(2) == 'blog')) {
            
         $conf['preprocess_css'] = FALSE;
         $conf['preprocess_js'] = FALSE;

 }
Subscribe to RSS - CSS