Internet Explorer 7's ABBR element secret!

A minor detail but consistency has it's worth at all levels.

[JAB Creations]

As I would imagine the vast majority of folks here know that Internet Explorer 7 has tons of bug fixes that have held back the internet as a whole. One of those bug fixes includes support for the abbr element.

However what you might not know is that unlike Gecko and Presto based browsers Trident will not style the abbr element by default. That means we have to set the style in our CSS to ensure that our visitors who use Internet Explorer 7 will receive that visual cue.

John

[DrDoc]

...which we should do anyway :)

[JAB Creations]

True, but we don't always know these things until someone points them out. I didn't know it until Eric Law emailed me asking about why abbr wasn't working for me!

John

[DrDoc]

Very true. I willingly admit that I frequently find myself not explicitly defining certain elements using CSS, after which I find the default not to be what I want :)

[jalarie]

What "certain elements" should we always define?

[DrDoc]

Margin and padding on all elements ... underline on abbr ... fonts on form elements ... line-height on paragraphs ...

[JAB Creations]

Input styles: I give text type inputs a 1px margin to vertically align them with labels in Firefox and Opera (they both have the same properties).

[jalarie]

DrDoc: Margin and padding on all elements ... underline on abbr ... fonts on form elements ... line-height on paragraphs ...

JAB Creations: Input styles: I give text type inputs a 1px margin to vertically align them with labels in Firefox and Opera (they both have the same properties).

Thanks. Would you like to share the values that you use?

[DrDoc]

I for sure start with:

* {
margin: 0;
padding: 0;
}

Then I explicitly set those values for elements like form elements, headings, paragraphs, lists, and other elements. The exact values used vary a lot from element to element and one design to another.

[JAB Creations]

I prefer cleanly presented forms...

XHTML

<form action="" method="post">
<fieldset>
<label class="text" for="name">Name:</label> <input class="text" id="name" name="name" type="text" />
</fieldset>
</form>

CSS

label.text {
float: left;
margin: 0px 2px 2px 0px;
padding: 0px 4px 0px 0px;
width: 90px;
}
input.text {
background-color: #a7a68f;
border: #ebef92 solid 1px;
color: #000;
margin: 0px 0px 1px 0px;
width: 144px;
}

John