Question

I’m trying to make a 30×30 pixel box. I don’t care if it uses a button, a, span, whatever.

I can’t get anything to show up uniformly across all browsers.

Here are the requirements:

1. Must append to the end of an
   existing line (no line breaks)

2. Must be able to assign click events in jQuery

3. Must be a square

4. Appears flat with no sort of bevel

Answer 1

You should be able to achieve what you want simply by styling an ‘A’ tag in your css.

CSS:

a {
    display:inline-block;
    width:30px;
    height:30px;
    background-color:#ccc;
    border:1px solid #ff0000;
}

HTML:

<a href=""></a>

See working example: http://jsfiddle.net/fQP6J/1/