Double-Margin Bug in IE6

Comments (18) | June 17, 2008 – 9:43 am | By Kevin Cupp

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;
     width: 200px;
     margin-left: 10px;
}

IE6 will actually double margin-left to 20px, throwing your page out of whack if you have a tight layout. To fix, all you have to do is add this rule to the floated element:

display: inline;

And boom! Another IE6 bug is squashed.

Categories Hack, Presentation Tagged , ,

Reset styles

Comments (7) | June 16, 2008 – 10:46 am | By Andrew Mager

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 browser sifts through the DOM tree and applies those styles to every element.

Here is a better way to “reset” your styles:

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
	vertical-align: baseline;
}
a img, :link img, :visited img {
	border: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
ol, ul {
	list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
	content: "";
}

This is Eric Meyer’s rendition of reset.css. Try it out, and let us know how it works.

You should start every web project with this bit of presentation-layer code.

Categories Standards Tagged ,

Attach Icons to Links Automatically

Comments (27) | June 15, 2008 – 11:31 am | By Kevin Cupp

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 to a PDF, your reader will be prepared. Other ideas for this include Word and Excel docs, and even mailto: links (for which you need to use the ^= option instead of $= to search the beginning of string). Looking at the first line of the code, you can see this can be used on any element and any of its attributes.

Categories Presentation Tagged ,

Make the <pre> tag wrap

Comments (0) | June 14, 2008 – 12:13 pm | By Andrew Mager

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 */
     white-space: -pre-wrap;      /* Opera 4-6 */
     white-space: -o-pre-wrap;    /* Opera 7 */
     word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Thanks to Tero Karvinen for this tip.

Thankfully, in CSS-3, the <pre> tag will be fixed.

Categories CSS-3, Presentation Tagged , , , , , ,

Style Everything at Once

Comments (1) | June 12, 2008 – 10:54 am | By Kevin Cupp

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 how to get the most out of it.

Categories Presentation Tagged

Easy PNG transparency for IE6

Comments (1) | June 11, 2008 – 1:20 pm | By Carl Harris

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 IE6 it looks like pure shyte. All you need is a simple star hack and MS’s proprietary AlphaImageLoader…

* html #pngImage {
      background-image:none;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
      (src='transparent-bg.png', sizing='scale')
}

This is a great trick when you just have one (or a few) png transparencies in your css.

Categories Hack, Presentation Tagged , , ,

<sup> tag in IE6

Comments (2) | June 11, 2008 – 12:21 pm | By Andrew Mager

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 up, try decreasing the line height.

Hope this helps you!

Categories Hack, Presentation Tagged , ,

What’s for lunch?

Comments (1) | April 3, 2008 – 1:44 pm | By admin

This website was created because someone was thinking about food, and the need for a simple CSS trick blog.

How brilliant would it be if I could make a CSS blog during my lunch break? -Andrew Mager

We will try to make our posts as Googlable as possible too so you can always find them.

This blog will contain tips and tricks for making your sites look the same in all browsers. People are always gonna use IE6, and we have to be ready for that.

You can also write for the site. Just email me and I’ll get you an account.

Categories Presentation
vpn service