Archive for the ‘CSS’ Category
Internet Explorer Z-Index Bug
March 12th, 2010 | 
Author: Problem :
If you are working on hover menus with sub-menus & under it there is an image. When you hover menu & expanded sub-menus hide behind image as both div’s are positioned well with the right z-index property.
In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
Fix :
To fix this bug, Give parent div a higher z-index value
<div style="z-index: 3000">
<div style="position:absolute;z-index:1000;">
<a href="#">Page</a>
...
</div>
</div>
<img style="position:absolute" src="image.png" />
How to style Form "Input" elements differently depend upon their type
If you want to style your Form "Input" elements depend upon their type="text" or type="input" or type="submit"
You can use this format to style your Form “Input” elements
For “Text” Input Type :
input[type="text"] {
/* Add Style Here */
}
For “Button” Input Type :
input[type="button"] {
/* Add Style Here */
}
For “Submit” Input Type :
input[type="submit"] {
/* Add Style Here */
}
Posted in CSS | 
Tags: "input", CSS, depend, diffeently, differently, elements, form, how, style, their, to, type, upon | 
No Comments »
CSS Rounded Corners Without Images
To get rounded corners, Try this CSS
For Firefox :
-moz-border-radius: 10px;
For Individual Corners :
-moz-border-radius-topleft:10px; /*Top Left Corner*/
-moz-border-radius-topright:10px; /*Top Right Corner*/
-moz-border-radius-bottomleft:10px; /*Bottom Left Corner*/
-moz-border-radius-bottomright:10px; /*Bottom Right Corner*/
For Chrome/Safari :
-webkit-border-radius: 10px;
For Individual Corner :
-webkit-border-top-left-radius:10px; /* Top Left Corner */
-webkit-border-top-right-radius:10px; /* Top Right Corner */
-webkit-border-bottom-left-radius:10px; /* Bottom Left Corner */
-webkit-border-bottom-right-radius:10px; /* Bottom Right Corner */
For Internet Explorer :
You have to first download .htc solution & upload it.
Then add this to your css
behavior: url(/css/border-radius.htc); /* This is the path where you upload .htc solution */ border-radius: 10px;
