My css tips and tricks

Absmiddle in css. There is no absmiddle for vertical alignment in css like there is with HTML and the img align=”absmiddle”.

from: http://code2design.com/forums/another_way_to_do_absmiddle_with_css. What really makes me smile is that after this wise person posted the following tip, two others thanked him, one saying “THANK YOU. You seem to be the first, and only, person on the entire internet to figure this one out. It was the .25em trick that did it.”

This is an equivalent:
IMG.absmiddle {
vertical-align: middle;
margin-bottom: .25em;
}

Vertical-align:middle puts the center of an image at 1/4 em above the text baseline, not at the center of the line height. The margin-bottom:.25em; pushes the alignment up of the text next to the image. You might be tempted to adjust the top margin by -.25em so as not to muck with the line height, but this can cause problems with elements above, such as lines in tables, so I don’t do it.

Class and ID:
.myselector is a class, you can use it more than once on the same page. Use it like this in the stylesheet .myselector, and use it like this in the page <span class=”myselector”>.

#myselector is an id, you can only use it once on a page. Use it like this in the stylesheet #myselector, and use it like this in the page <span id=”myselector”>.

This works for css to suppress spaces between images:

Lines too close together – line spacing farther apart:
When you cannot set the space between the lines using line-height, if it’s the line distance between the paragraphs, then you want to set the margin-top instead.

p { margin-top: 0.5em; }

This will do the same but only for a paragraph following a paragraph:

p + p { margin-top: 0.5em; }

If you still have too much space between paragraphs or h1, h2, h3 h4, h5, or h6 tags, you can use a margin-top: -0.5em; This was a yay! moment when I found it after two hours of pouring through line height adjustments in a 737 line stylesheet.css

Sometimes Internet Explorer ignores margin-bottom or margin-top unless you specify line-height in the same tag!
—-

Firefox has extra space at margin-top when Internet Explorer does not have extra space at the top of an element:
If you do not specify a span<span> at the beginning of your element, Firefox inserts a paragraph <p> without you actually using a paragraph. A workaround is to explicitly set a paragraph or span inside your div and wrap that paragraph or span around your content, then Firefox will not force a p around your content. Ideally both Firefox and IE will have the same top spacing inside your div, however this one is intermittent.

Here is my simplest workaround for IE extra top margin not in Firefox:

margin-top: -16px; *margin-top: 0px;

This forces IE to honor the * css directive whereas Firefox ignores the asterisk (rightly so) and only reads the first top margin space.

—-

Extra space after a table, cell, or block level element:
If it’s css, like extra space after a

or or

you can set your margin-bottom: 0px;
it it’s a table cell , then refer to my html tips and tricks

Spaces between elements when hiding with css:
Make sure you’re using display:none rather than visibility:hidden to keep
your hidden div from pushing items around on the page or taking extra space even though you don’t see them. If you mistakenly use visibility: hidden, the page would be layed out as if it was still there occupying space even though it wouldn’t actually display.

Centered image latest technique:

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Image Centering – Aligning an image to the middle (horizontally)
There is no HTML img align=”middle” for horizontal alignment!
You can create a center tag and place the image inside that, but the tag is now deprecated. Same goes for image alignment, but they will not go away anytime soon, if ever. The most future proof way is to use CSS to center align the image.
An image is an inline element, not block, therefore it cannot be centered. Forcing it to be a block element may work but not be consistently honored by various browsers.
Create a css style for it and apply the style in the page:
Create a style class and add it to the HEAD section of your page. Even better, add it to your external style sheet and use it on every page!

.centeredImage
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}

Then, apply the class to the container element:

That’s slightly more trouble than just applying align=”center” to the paragraph tag, but it has the added benefit of giving you more control over the spacing around the image. In the example, the margin and padding values are set to zero pixels to avoid extra spacing that may push other content farther down the page.

—-

Centering a div, which can be used to align images, text, flash and the entire body of the page in the middle. Instead of centering the text and images inside the container (text-align:center;), this will center the entire container on the page-> margin: 0 auto; You must declare a width, and must set each margin to auto so that they will be forced to be equal margins in Firefox and Internet Explorer. This technique is future proof in that it doesn’t use the deprecated <center> tag in HTML and it is properly displayed in Internet Explorer 6, 7 and Firefox.

#content {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

--

If you find that setting a width breaks the centering, you can nest a forced width paragraph inside a centered div instead of trying to declare all of this in one tag.

.centered
{
text-align:center;
margin-top:0px;
margin-bottom:0px;
padding:0px;
}
.content {
 width: 400px ;
 margin-left: auto ;
 margin-right: auto ;
 text-align:center;
}

If you still are having trouble centering a div, here’s a great exhaustive set of examples:

http://haslayout.net/css-tuts/Horizontal-Centering

—-

If the stylesheet body properties are not working but the other elements are working, odd inconsistencies can be caused by two stylesheet declarations in the same document without closing the first one!

Another possibility is that you are using ID tags instead of Class tags,  Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Line Positioning Reference at my favorite CSS learning resource

—-

How to create custom code for Internet Explorer using just css:Browser detection for Internet Explorer, this no longer works with IE7 and Internet Explorer 8!

To send different CSS rules to IE, we can use the child selector command which IE can’t understand. The child selector command involves two elements, one of which is the child of the other. So, html>body refers to the child, body, contained within the parent, html.

Using the example of the header margin, our CSS command would be:

#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}

IE can’t understand the second CSS rule due to the html>body CSS command so will ignore it and use the first rule. All other browsers will use the second rule.

—-

Leave a comment