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?
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.
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
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.
Related
i'm simply trying to set a background image to my submit button in my form. I've tried a couple variations of methods but every time I get the default browser button. Anyone know where I'm going wrong here?
HTML
<div id="headerSearch">
<form method="post" action="Test.php">
<div id="headerSearchBar">
<input class="tbSearch" type="text" name="search" size="12" placeholder="Search...">
</div>
<div id="headerSearchBtn">
<input class="btnSearch" id="button" name="submit" type="submit" value="">
</div>
</form>
</div>
CSS
#headerSearch{
float:right;
width:80%;
height:80px;
}
#headerSearchBar{
float:left;
width:90%;
height:80px;
}
.tbSearch{
height:25px;
width:95%;
margin-top:27.5px;
margin-left:2%;
margin-right:0;
margin-bottom:0
}
#headerSearchBtn{
float:right;
width:10%;
height:80px;
text-align:center;
}
.btnSearch{
background-image:url(../IMAGES/btnSearch.svg) no-repeat;
width:25px;
height:25px;
margin-top:27.5px;
}
You need to use just background
background:url(../IMAGES/btnSearch.svg) no-repeat;
I've found a method that fixes the issue, as Michael St Clair has mentioned I needed to use just background in the css rather than background-image. This removed the default browser image and didn't display my selected image.
I used a different method that has now fixed the issue, I tried this method before but with the background-image tag rather than with just background as Michael St Clair suggested, which all and all has now fixed the issue.
HTML
<input class="btnSearch" id="btnSearch" name="btnSearch" type="submit" value="">
CSS
.btnSearch{
width:25px;
height:25px;
margin-top:27.5px;
}
input#btnSearch{
background:url(../IMAGES/btnSearch.svg) no-repeat;
}
Add background-size:100% 100% to your button css. Something like this: http://codepen.io/shreya1289/pen/QEKGWa
Let me have a div element which is located inside a form as follows:
<from id = "someForm">
<div id = "someDiv">
<!-- Some Content -->
</div>
</form>
Is there a way to submit the form#someForm by clicking on the div#someDiv without using JS? I can use CSS3.
I don't recommend doing this but you can wrap a submit button on the div.
<from id = "someForm">
<button type="submit">
<div id = "someDiv">
<!-- Some Content -->
</div>
</button>
</form>
if you want to play with button
Demo
button {
border:0;
background:none;
}
But i would suggest it this way (inline- JS)
Demo
HTML
<div id="something" onclick="javascript:somefunction();" >i am here</div>
CSS
div {
border:0;
background:none;
cursor :pointer;
width:100px;
height:100px
}
using anchor tag a for same
Demo
HTML
<a id="something" href="javascript:somefun()" <!-- or some url page -->>i am here</a>
CSS
a {
display:block;
border:0;
background:none;
width:100px;
height:100px;
text-decoration:none;
color:black
}
You could have an invisible button that entirely covers your content:
<form id="someForm">
<div id="someDiv">
Some Content
<input type="submit" />
</div>
</form>
CSS
#someDiv {position:relative;}
#someDiv > input {display:block; position:absolute; border:none; width:100%; height:100%; top:0; left:0; opacity:0.01;}
EG: http://jsfiddle.net/3q94jq3a/
In a nutshell: No, you cannot submit a form using only CSS. You must use Javascript to call a function.
I have problem with CSS, can someone help me with it? I can make my design for one browser but then it breaks in another browser.
For example if I fix it for Chrome then it does not work for Firefox, and vice versa...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Bookmark Storage</title>
<style>
.frmsub{
}
.btnsub{
position:relative;
left:-80px;
bottom:-24px;
}
.btnclear{
position:relative;
right:-30px;
top:0px;
}
.mltsub{
position:relative;
right:-30px;
top:375px;
}
.load{
position:relative;
right:290px;
top:30px;
}
</style>
</head>
<body background="http://www.dodaj.rs/f/1F/l0/2CSIzyy1/notebook1.jpg">
<div align="center">
<div align="center">
<form class="frmsub" action="./BK.pl" method="POST">
URL: <input name="HWID" type="text"> <br>
Short description(optional): <input name="HWID1" type="text1"> <br>
<input class="btnsub" value="Submit" type="submit"></form>
<form action="./clear.pl" method="POST">
<input class="btnclear" value="Clear" type="submit">
</form></div></div>
<div align="center"><form method="POST" action="./multiBK.pl">
<input class="mltsub" value="Submit" type="submit">
</form><form method="POST" action="./AddS.pl">
<textarea name="HWID" rows="20" cols="50">Add bookmark source here, press load and then submit.
</textarea>
<input class="load" value="Load" type="submit">
</form></div>
<p align="center"></p>
<div align="center">
<div align="center"> </div></div>
<p align="center"> *Check your bookmarks: Click</p>
</body>
</html>
Just look is important not pay attention to form...
Yes, like Markus said, use a CSS Reset like this well know: http://meyerweb.com/eric/tools/css/reset/
if after applying it still not working well, maybe there's something wrong in your code
Try addin this to the top of your css file:
*{
margin:0;
padding:0;
}
Try addin this to the top of your css file:
{
margin:0;
padding:0;
}
That way you can test if there is some default browser padding/margin issue without using some large css reset thingy...
What i can tell you is that i think the problem is that you are wrapping that in which have default 10px bottom and top padding so maybe try reseting that to 0 in your css.
lineInput{
padding:0;
}
Or just change that paragraph to div.
Maybe that is the solution, but maybe it aint, because you are using absolut positioning...
I have counted the px's and letters in both part of the picture are 15px. In firefox below the letters to the end of the orange part is 11px and in chrom there is 8px. In firefox from top of the letters to the start of the orange part there is 12px and in chrom there is 10px. So that is 5px of difference.
Try this:
btnSubmit{
height:38px;
padding:0;
}
That will make the button be 38px high and letters will be in top left of the button. Then you could add maybe this:
text-align:center;
padding-top:10px;
// or how much is needed to be verticaly centered.
so I have a submit button with this code:
<form method="post">
<input name="submit" type="submit" class="icon" value=" "/>
</form>
an in the CSS I have:
.icon{
background-color:transparent;
background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
height:20px;
width: 20px;
background-position:center;
border:none;
cursor:pointer;
background-size: 100%;
}
But the problem is that the image ( that have h:40px and w:40px) does not shrink to fit the 20px button... Do you guys have any solution for this??
(I rather not use javascript if possible)
EDIT:
Currently working. I just delete history, cash and it works... ty
try this : -
background-size:20px 20px;
Use an image submit button instead, and shrink the element to the desired dimensions using CSS.
<input name="submit" type="image" class="icon"
style="width: 20px; height: 20px"
src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png"
alt="Send" />
add this line in css file:
display:block;
You need to wrap a span to submit button and style it.
DEMO http://jsfiddle.net/H5dmd/2/
HTML
<form method="post">
<span class="icon">
<input name="submit" type="submit" value=" "/>
</span>
</form>
CSS
input[type=submit]{
background:transparent;
width:20px;
height:20px;
border:none;
padding:none;
cursor:pointer;
}
.icon{
float:left;
background-color:transparent;
background-image:url(http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png);
height:20px;
width: 20px;
background-position:center;
border:none;
cursor:pointer;
background-size: 100%;
}
Add an id to the button, Updating the image:
document.body.onclick=function(e){
debugger;
var bid=document.getElementById('bid');
bid.style.backgroundImage="url('http://www.google.co.il/images/srpr/logo4w.png')";;
}
js fiddle here.
You can simply use input of type image, it exists for this purpose exactly: submit button showing an image. As a bonus you'll also get the coordinates where the user clicked.
Example:
<input name="mysubmit" type="image" src="http://www.lcda.fr/pneu-expo/images/drapeau_rond_gb-on.png" />
Live test case.
Only one downside: in the server side code handling the form, you'll have to check if "mysubmit.x" and/or "mysubmit.y" are not empty to know if you got anything sent which is less intuitive than just checking "mysubmit".
I see multiple options here :
Change saving
Save your image to 20x20, and whoops, problem gone.
Use CSS3
CSS3 introduces a new feature that is backgroud-size
Just put that in your CSS :
background-size: 20px 20px;
But it won't be compatible with old browsers.
Use JavaScript [Bad style]
HTML
<form method="POST" action="test.php" name="myform">
<a onclick="javascript:document.forms['myform'].submit ();" ><img src="myimage.png" onclick="submit();" /></a>
</form>
<input type="submit" value="Go!"/>
gives a button like this:
I want the button to span the entire width of the page. How can I do that?
<input type="submit" value="Go!" style="width:100%"/>
Have you tried style="width:100%" ?
I suggest using a hyperlink instead for this and using css to style it something like this
a:hover {
border:60px;
border-color:blue;
padding:30px;
}
a {
border:60px;
padding:30;
}
link