Monthly Archives: June 2008

Get rid of that dotted border

Comments (18) June 18, 2008 – 1:08 pm

Many times, when you click on someone’s logo, you see that little dotted border around the image when you click it. I think it looks sloppy.

There is an easy CSS fix for this:

a { outline: none; }

Try it.

By Andrew Mager | Posted in Presentation, Standards | Tagged , , , |

Double-Margin Bug in IE6

Comments (18) June 17, 2008 – 9:43 am

I always forget about this bug and end up being puzzled as to why the spacing on my page is all wrong, so remember this! This bug happens when you have a floated element with a margin defined in the same direction of the float. For example:
#sidebar {
float: left;
[…]

By Kevin Cupp | Posted in Hack, Presentation | Tagged , , |

Reset styles

Comments (8) June 16, 2008 – 10:46 am

Kevin Cupp posted earlier about a way to style everything at once using the universal selector (*). That is not my method of choice though because:

It’s too general. I don’t think there should be a rule that applied to EVERY element. Especially margin and padding because those are modified all throughout the cascade.
It’s slower. The […]

By Andrew Mager | Posted in Standards | Tagged , |

Attach Icons to Links Automatically

Comments (27) June 15, 2008 – 11:31 am

Let your readers know before they click a link and it opens up some large application like Acrobat, Word, Excel, or Quicktime.

The HTML for the above link has no styles attached to it:
<a href=”news/issue12.pdf”>View Latest Issue</a>
The trick is all in the CSS:
a[href $=’.pdf’] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
Now when you link […]

By Kevin Cupp | Posted in Presentation | Tagged , |

Make the <pre> tag wrap

Comments (1) June 14, 2008 – 12:13 pm

The pre tag stands for preformatted text, but it acts differently in all browsers. Here is a snippet of code that should cover all bases:
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
[…]

By Andrew Mager | Posted in CSS-3, Presentation | Tagged , , , , , , |

Style Everything at Once

Comments (1) June 12, 2008 – 10:54 am

Have a common property in the majority of your elements? Just style everything the same way with an astrisk:
* { margin: 0; padding: 0; }
For this example, now you only need to set margin and padding where you actually need some! The Universal Selector’s convenience doesn’t stop there, check out Eric Meyer’s post to learn […]

By Kevin Cupp | Posted in Presentation | Tagged |

Easy PNG transparency for IE6

Comments (1) June 11, 2008 – 1:20 pm

In honor of Mager’s new transparancy-heavy (and f***ing sick) site redesign by Marc Mendell, here’s a quick and easy way to make png transparencies work in IE6.
So you have your background url set something like this and it looks awesome in all the real browsers:
#pngImage {
background: url(transparent-bg.png) no-repeat;
}
But in […]

By Carl Harris | Posted in Hack, Presentation | Tagged , , , |

<sup> tag in IE6

Comments (2) June 11, 2008 – 12:21 pm

What’s up with the <sup> tag? It’s a semantic way of marking up superscripts, but it acts funny in IE6 (are you surprised?).

You will notice here that the screenshot on the left looks a little cramped. Here is the fix:
sup {
text-align: vertical
}
If you want to move the number higher […]

By Andrew Mager | Posted in Hack, Presentation | Tagged , , |
vpn service