CODEWITHSUNDEEP
htmlcss
jason dancks
jason dancks

Reputation: 1142

CSS applied to button leaves purple box under buttons

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:

Buttons with weird purple box under them

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

Upvotes: 0

Views: 1179

Answers (3)

Lethosor
Lethosor

Reputation: 46

It could be the height property that's causing this, since the purple area appears to be 29 px high. I'm not sure what the extra border below the text is, but it's possible that the border is being applied around the text instead of the entire button. Try adding border:none and see if that helps.

Upvotes: 0

Debajyoti Das
Debajyoti Das

Reputation: 2138

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.

Upvotes: 2

Zaffar Saffee
Zaffar Saffee

Reputation: 6305

see this demo on jsfiddle

you issue is id='upload' or id="signin"in

<div id="upload" class="top-button"><button>Upload</button></div>

there is some conflect between the CSS for upload and signin ids, possibly , some hieght value issue

Upvotes: 0

Related Questions