When attempting to align form input and button elements you can get a hodgepodge of results across browsers. Here is a trick to get things aligned:

input, button {
vertical-align: middle;
}

You can also restyle the borders, margin and padding to make completely customized appearance of fields and buttons. Just remember, button can be styled across all browsers to appear the same while an input of submit type cannot and will be subject to each browsers gui, most noticeably is Apple’s Safari.

The most common use of this technique is to replace an h1 title of a page with a graphical header. This is done so the markup is still an h1 tag with text and it is only visually changed to an image with css. By maintaining the structured text improves SEO and makes for a nice text only print option. Another common use is to turn a regular text hyperlink into a graphical button complete with mouseover effects without affecting the code behind the link itself.


h1 {
width: 760px;
height: 150px;
text-indent: -9999px;
overflow: hidden;
background: transparent url(header.jpg) top left no-repeat;
}


The text indent effectively overflows the text outside the visible range, and overflow hidden ensures when you select the h1 you don’t get the selection trail that extends to the hidden text.

Now if you want you can also do the same thing but instead of setting the background, width and height on the h1 itself, setting it on a hyperlink inside the h1 allows the background image to become a link. This is also how you would go about making a hyperlink into a graphic button.

Problem:

When I float a thumbnail in a paragraph that isn’t longer than the image it overflows outside of the paragraph and messes up the following paragraphs text wrap.

Solution:


p {
width: 100%;
overflow: auto;
}


Reason:

Adding the width attribute gives the paragraph tag “haslayout” and overflow ensures the overflow is showing.