Question

So, I was messing with CSS for my buttons and tried to test the following CSS code on the button element:

button {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

The 2 buttons at the end are created by this HTML:

<div id="header">
    <div id="logo"><img src="logo.jpg" /></div>
    <div id="search">
        <form id="search-form">
            <input type="text" style="width:80%;height:28px;background-color:#F5F5F5;font-size:16px;position:relative;top:-3px;"/>
            <button type="button" style="position:relative;top:6px;"><img src="mgt.jpg" /></button>
        </form>
    </div>
    <div id="upload" class="top-button"><button>Upload</button></div>
    <div id="signin" class="top-button"><button>Sign in</button></div>
</div>

Last 2 buttons “upload” and “signin” are the ones n question.

and the result:

As viewed in Firefox. Any ideas what is causing this?

Answer 1

I don’t see the issue …. Check out http://jsfiddle.net/vb7S3/

But I would still recommend not to use <button> tags and rather define style classes for #upload and #signin.

HTML

<button id="upload" class="top-button">Upload</button>
<button id="signin" class="top-button">Sign in</button>

CSS

#upload, #signin {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

Also <button> is tag may not be supported by all browsers.

Better Way…

HTML

<input id="button" class="upload-button" type="submit" value="Upload" />
<input id="button" class="sign-in-button" type="submit" value="Sign In" />

CSS

#button {
    width:85px;
    height:29px;
    background-color:#800080;
    color:#FFFFFF;
    font-size:14px;
    font-weight:bold;
}

Must include <input> tag inside the <form> ... </form> block.