ReDsgn

We were once sold on the Idea that we needed true CSS hacks to make stuff work in IE we were also sold on browser detection with JavaScript for other content.

I have been using conditional comments for years now and this may seem like old news to some, To others this is refresher.

Conditional comments can do more than allow you to serve up different CSS for specific versions you can use conditional comments for just about any type of content you want to exclude or include for various versions. Conditional comments work in IE versions 5 and newer. You can be as specific as you need to like IE 5.01 and 5.5. (continue reading…)

Ever encounter this IE bug… The issue occurs when you style fieldsets with a background color. The top of the fieldset color will bleed out of the border to the top of the legend. IE pads to the outside of borders and its apparent here when the padding is increased to accommodate a legend which is over the border of the fieldset.

This is a simple fix that will work in all browsers so no need for special IE Hacks or Conditional Comments.

First add a position: relative; declaration to the fieldset rule so that the absolute positioning of the legend will be relative to its fieldset:

fieldset {
position: relative;
background: #ffffcc;
}

Next, add a new rule for the legend element and set its absolute positioning properties to emulate its current position:

legend {
position: absolute;
top: -.7em;
left: .2em;
}

That’s it… That’s all there is to it.

In today’s modern web design Rounded corners are the new trend. So in keeping up with the trend we need to accommodate new designs with our current markup. In this post I will show you how to take any four containers of markup and convert them into a semantic rounded corner display. This technique will be fluid and accommodate text size changes. (Tested in IE 6 and 7 and Firefox 3) If this works in other browsers please let me know.

This technique uses the Sliding Doors of CSS technique described by Douglas Bowman on A List Apart.

We need 4 containers or elements we can apply style to, to define the four corners we want to round. Here you see I’m using an h4 tag as my outer container and nesting inside it two spans one for the header text and one for a link or anchor point. With the inclusion of our anchor tag we now have our four elements.

<h4><span class="title">H4 Demo Title 2</span><span class="link"><a href="edit_link.htm" title="edit">Edit</a></span></h4>


<h4><span class="title">H4 Demo Title</span><span class="link"><a name="anchor">&nbsp;</a></span></h4>


The markup may seem a bit overkill in this example but I tend to always design for the future. In my original markup I wanted to allow for Graphic headers as well as edit links in my headers. But as you can see in my second example the edit link can be used as a legacy anchor. No matter how you split it up the goal here is to have semantic markup in the end not a bunch of meaningless wrapper divs. I will get into using wrapper containers in a later post.

(continue reading…)

This is a simple technique for creating large heading style list numbers while maintaining normal text sizes in the content of my list.

The Problem: HTML Lists don’t allow you to style the list counters separate form the contents of the list.

Here is the markup for my Ordered List. (note the span tag that wraps the content… this is important)

<ol>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
<li><span><strong>Intro</strong> description. </span></li>
</ol>

The basic Idea here is to overcome the limitations of styling the list numbers separate from the content. In order to accomplish this I use the span tag to wrap the content.

Now for the CSS

ol {
color:#225E8A;
font-size:1.5em;
font-weight:900;
}
ol li span {
color:#696969;
font-size:0.7em;
font-weight:normal;
}

Whats going on?

I am setting the color and size of the font on the “ol” element, to a 1.5em larger size from its parent size (the body) and making it bold and blue. This will style the list numbers and the content. Now I need to reset the content of my list items to use a smaller font of regular color and weight. To do this I simply style the span that is wrapping the content to a smaller size and normal color and weight.

I use a .7em here to say I want to make my font .7em of its parent size which was 1.5em larger than my base size. So if my body font size is 12px, 1.5em makes my “ol” font size 18px. Now I want to re-size my lists content font to roughly 12px, so .7em of the “ol” font size (18px) we will get 12.6px. (A closer number would be .67em.) I am also resetting the color and weight to match the rest of the page text.

Example

for more information read my other post on Calculating ems.

This isn’t the actual way ems are measured in typography, Most browsers assume 1 em is equal to the calculated font size. For example, if the base font was 11px, then 1em would be 11px, 2em = 22px, etc.

As an example, set a div font size to 10px (use a contrasting background color), zero out the border and padding, and then set the width to 100em. It should equal 1000px exactly.

The accurate method to convert a true typographic em is to use a capitol M’s width to calculate the em size. It’s the same method for calculating the en and ex units. Most browsers just treat en and ex as one-half em.

calculated: 1em == 2en == 2ex