Author Archives: Andrew Mager

Using an image for a submit button

Comments (2) September 7, 2008 – 2:08 pm

It’s pretty easy, you just have to use type=”image” in your <input /> tag:

<input type=”image” src=”http://i.bnet.com/images/200806/btn-submit-CAST-182×24.gif” />

Posted in HTML | Tagged |

Styling the horizontal rule

Comments (8) July 27, 2008 – 11:16 am

It’s never good practice to use HTML elements as presentation elements, but sometimes you gotta use an <hr />.

color: #000;
background-color: #000;
height: 4px;
border: none;

Note that you have to specify the color and background color so it works in IE.

Posted in HTML Elements, Presentation | Tagged , |

Blank XHTML Template

Comments (17) July 3, 2008 – 9:58 am

You can’t get very far with CSS unless you have some standard HTML. My favorite flavor of hypertext markup is XHTML 1.0 Transitional. Here is a fresh template:

<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Blank XHTML 1 Transitional Page</title>
</head>
<body>
[…]

Posted in HTML, Standards | Tagged , |

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.

Posted in Presentation, Standards | Tagged , , , |

Reset styles

Comments (7) 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 […]

Posted in Standards | Tagged , |

Make the <pre> tag wrap

Comments (0) 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 */
[…]

Posted in CSS-3, 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 […]

Posted in Hack, Presentation | Tagged , , |
vpn service