Rumbling with the HTML

This post is mostly for my own memory:
I have been playing around with custom HTML buttons and such, for use with a ‘story-reader’ I am attempting to write in PHP. It should be noted that I know nothing about using PHP.
Basically I’m writing a simple page that will pull text from a mySQL database and then allow the reader to read a story by navigating with page buttons.
Once I had the initial page-system working, with navigation, I then started playing around to make the buttons look nicer.

At first it looked like I could just replace the button with a

input type="image"…

But the problem with that is when the button is pressed, the information that gets submitted is the X,Y location of the image and not the data I’m passing in (the current progress through the story). So that didn’t work.
I finally got


test

to work, in a basic sense, but the button was bigger than I wanted. I messed around with styles after doing some web searches:

.btnExample {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border: 1px solid;
border-color: #696 #363 #363 #696;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
height:25px;
width:100px;
}
.btnExample:hover {
color: #FFF;
background: #900;
}

Which made a decent button, but the image was funky.

Irrelevant detour – along the way I discovered that:

<input class="mbutton" type="submit" value="test" >Submit</input>

Creates a button with Test as caption and the word Submit beside it. Oddly, if you leave value blank it defaults ot the text “Submit Query”… I’m assuming that elsewhere in my wordpress sites this is defined for the class or something as a default.

And oh yeah, the really important bit is that within my <style> section I cannot have any spaces! I don’t know if this is because the page I’m experimenting with his a hack of internal php and html code. I’ll have to remember this.

Anyways, some progress made.
An okay button is here:

.btnExample {
color:#050;
font: bold 84% 'trebuchet ms',helvetica,sans-serif;
background-color:#fed;
border: 1px solid;
padding: 0px 0px;
text-align:left;
padding:2px;
width:60px;
border-color: #696 #363 #363 #696;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa');
}
.btnExample:hover {
color: #FFF;
background: black;
border: 2px solid green;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#000000',EndColorStr='#ffeeddaa');
}
.btnExample img {
float:left;
padding:2px;
}


What do I still need to figure out?
1. Alignment (get the buttons to row up properly)
2. Figuring out why the button has too much ‘top space’

Notes: I use Internet Explorer. Deal.
Also, for memory’s sake, from http://codex.wordpress.org/Writing_Code_in_Your_Posts we have:

< = < > = >
/ = /
] = ]
[ = [
" = "
' = '