CSS Tips and Tricks

· Leave a comment · in CSS

This will be an ongoing post of useful CSS tips and tricks.

They will vary from simple to advanced.

Feel free to contribute via a comment and I’ll add them to the list!


1. Relative and Absolute positioning
Have you ever applied absolute positioning to an element but it fails to align as desired to the parent element? The fix is simple, the parent element also needs positioning.

Adding relative position to the parent element will cause the absolute positioning to render as desired.
Example:

position:relative;

2. Maximum z-index value
The maximum z-index value that can be used is 2147483647.

3. Horizontal centering of an element
Adding the following margin style to an element will cause it to center horizontally within it’s parent. The element must have width set and cannot be floated.
Example:

margin:0px auto;

4. Vertical centering of text
Add a line height to the text element that matches the height of the parent element. For some fonts, you may have to adjust the line height to be a lesser or greater value.
Example:

line-height:12px;

5. Hex color code shorthand
Color codes with similar repeating values can be reduced from six values to three.
Example:

color:#00f; /* shorthanded from #0000ff */
color:#fff; /* shorthanded from #ffffff */
color:#9da; /* shorthanded from #99ddaa */

6. Double padding bug
This bug can show up mostly in IE when you apply padding to one side of an element but the opposite side unwantingly gets the same padding. Add one or both of the following styles for a fix.
Example:

display:inline-block;
zoom:1;

7. Rounded corners (CSS3)
True rounded corners on elements is possible with CSS3. You also need to add the browser-specific property to render in all current browsers.
Example:

border:1px solid blue;
/* shorthanded so all borders have same radius */
border-radius:4px; /* standard property */
-moz-border-radius:4px; /* mozilla */
-webkit-border-radius:4px; /* safari */

/* each corner has a different radius */
border-radius:4px 2px 3px 6px; /* standard property */
-moz-border-radius:4px 2px 3px 6px; /* mozilla */
-webkit-border-radius:4px 2px 3px 6px; /* safari */

8. Removing dotted outline on clickable elements
Those annoying dotted outlines that appear on a clickable element can be removed with the following style.
Example:

outline:none;

9. Cross-browser opacity
Opacity value for non-IE browsers is between 0-1, IE is 0-100.
Example:

opacity:0.5; /* all browsers except IE */
filter:alpha(opacity=50); /* IE */

10. Making text-align:justify work on one line of text
Justifying text will not work unless the text wraps more than one line. The fix is to insert blank content into the element forcing it to wrap, set a height and overflow to hidden. Adjust the height to hide the blank content.
Example:

.ourElement{
    text-align:justify;
    height:80px;
    overflow:hidden;
}
.ourElement:after {
    content: "";
    display: inline-block;
    width: 100%;    
}

 


This entry was posted in CSS and tagged .
Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

To include code in your comment: Paste your code in the comment form, select it and then click the language link button below. This will wrap your code in a <pre> tag(or shortcode) and format it when submitted.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">