Six Studios

Block level elements are easy to work with. You can give them a height and width, and they’ll pretty much look how you intended. Inline elements, such as links and spans, will flow with the document content. They can’t be styled with the height or width CSS attributes.

CSS to the rescue

CSS allows us to control how the element is displayed with the display attribute. A link will display as a block level element because of the following:

1
2
3

a:link, a:visited {
  display: block;
}

Like the title says, “labels align below radio dots and check boxes.”

Its subtle, but its enough to make a page imperfect. The simple fix for this is to apply a class to the labels you wish to fix. In this example I’ll use the class “valign.”

Include the following CSS:

1
2
3
4

label.valign {
  position: relative;
  bottom: 3px;
}

The CSS will move the “valign” labels up 3 pixels. For Internet Explorer you’ll need to use 2 pixels (2px).

You can read more on browser specific CSS here.

Here is the final product:

In a very special case Internet Explorer 6 will do something very strange with text. This special case is caused by excessive floating of parent and child elements.

You’ll notice the “magna, non” text belongs in the blue-ish box, but it appears in a mysterious location. I’ve only seen this in Internet Explorer 6.

Luckily this problem can be fixed by setting the container of the floating text to position: relative.

This is rendering issue inside Internet Explorer 6. I have only come across it, as stated above, after floating too many parent and child elements. Seeing this should inform the developer that the page can be structured in a cleaner manner, but if rebuilding isn’t an option just set the container to position: relative.

Problem

1
2
3
4
5
6
7
8

<div id="container">
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    ...
  </ul>
</div>

My CSS was as follows:

1
2
3
4
5
6
7
8

div#container {
  overflow: hidden;
  height: 400px;
}

div#container ul {
  position: relative;
}

The list content would display and flow outside of the container.

Solution

Moments after finding the source of the problem I was pointed to this article by a friend:

http://www.defusion.org.uk/archives/2007/04/02/when-overflow-hidden-doesnt-hide-in-ie/

In the article the writer isn’t aware if the bug exists in Internet Explorer 7. Yes it does.

Limit your tools

HTML newsletters can be very easy to build. To do this you’ll need to reduce your daily web toolset to a select few.

You’ll have tables, images, spans, paragraphs, div’s, links, hr’s, and br’s at your disposal.

All CSS will have to be inline and limited to the following attributes: height, width, line-height, font (and variants like font-size/font-family), color, text-align, border (and its variants), and list-style (and its variants) if needed.

Do not use CSS padding, margin or the table attribute cellpadding. These 3 attributes will drastically reduce the level of compatibility with webmail clients.

Browsers render HTML and CSS differently. Box model hacking is too messy. And there are just better ways of solving your cross-browser problems.

1
2
3
4
5
6
7
8
9
10

<!-- Firefox/Safari -->
<link rel="stylesheet" href="/assets/css/style.css" type="text/css" media="screen" />

<!--[if IE 6]>
<link rel="stylesheet" href="/assets/css/style_ie6.css type="text/css" media="screen" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" href="/assets/css/style_ie7.css" type="text/css" media="screen" />
<![endif]-->