I only have this problem in chrome. How remove the border around the image? please see the fiddle in chrome.
<form>
<input type="image" class="searchbox_submit search_btn" value="">
</form>
form input[type=text]:focus, form input[type=password]:focus, textarea:focus {
outline: none;
}
.search_btn {
background: url("http://static.ak.fbcdn.net/rsrc.php/v1/yu/r/yo348KDuskF.png") no-repeat scroll 0px -200px transparent;
height: 25px;
width: 30px;
outline: none;
border: none;
outline-width: 0;
-webkit-appearance: none;
}
Demo: http://jsfiddle.net/TXYg6/
You're using <input type="image" />, so a src attribute is expected. You haven't specified one, so Chrome shows a grey border, in the same way it does for an img with no src attribute.
If you want to stick to using <input type="image" /> and using a CSS sprite, you're going to have to specify something as the src, such as a 1x1 transparent "blank.gif".
http://jsfiddle.net/thirtydot/TXYg6/14/
However, that just seems horrible. Instead, I recommend switching to <input type="submit" />, which solves the problem.
replace it like that with submit type
<input type="submit" class="searchbox_submit search_btn" value="">
correct your css height and width
Give it a blank image as a src using a data: URI. Since you're only concerned with Chrome, there's no problem:
<input type="image" class="searchbox_submit search_btn" value="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=">
http://jsfiddle.net/TXYg6/23/
Chrome gives a border/outline thingo to any image without a src, you could set the input type to 'submit' and this will go away.
Alternatively, use an with a src and trigger the submit from this, but you may as well just use a type="submit"
unwanted chrome borders
Do you really need that att type="image"? Because that's the thing causing the problem...
Semantically I'd say use a button since you don't actually have an associated input value, and as such it's not an input:
<button type="submit" class="searchbox_submit search_btn"></button>
From the docs:
Buttons created with the BUTTON element function just like buttons
created with the INPUT element, but they offer richer rendering
possibilities: the BUTTON element may have content. For example, a
BUTTON element that contains an image functions like and may resemble
an INPUT element whose type is set to "image", but the BUTTON element
type allows content.
Cheers
Related
I have an <input> and an <input type="image"> displayed as table-cell.
I cannot figure out why the image is on a new line in WebKit-powered browsers.
This is my HTML:
<div id="search">
<div id="search_input_wrapper">
<input type="text" name="Search" id="search_input" />
<input type="image" name="Submit" id="search_submit" alt="Search" />
</div>
</div>
And this is my CSS:
div#search {
display:table;
width:100%;
table-layout:fixed;
}
div#search_input_wrapper {
display:table-row;
}
input {
display:table-cell;
margin:0;
padding:0;
border:0;
}
And here's a jsFiddle
This is an interesting problem that only pertains to -webkit browsers.
If you take a look at this (example), you will clearly see the problem. An input element with the property display:table-cell should normally appear on the same line, as inline elements do. You will notice that this is true if type="submit". However, if type="image", then the input elements act as block level elements, appearing on a new line.
The root of the problem lies with the property -webkit-appearance. If you were to apply -webkit-appearance:none to both input elements, you will notice they now both act the same! (example)
The default property of an input element with type="submit" is -webkit-appearance:push-button therefore we can solve the problem by applying the same property to the type="image" elements, as they normally have the property -webkit-appearance:none by default.
Problem solved, (example).
input[type="image"] {
-webkit-appearance:push-button;
}
Here is an updated example, fixing your initial problem.
I also added a src to input[type="image"], as that is the purpose of type="image".
Again, all these pertains to -webkit browsers, if you are using IE, FF or Opera, none of these example will mean anything to you, as they don't demonstrate the issue.
I have a simple HTML form with only two elements -- a text box and a submit button -- that need to be horizontally aligned.
The button has a background image, and I would like to set its value="".
In Safari and Firefox, the alignment is maintained if I set the line-height on the elements.
In Chrome, however, this is not enough. I have to set the value=" " (note the space), or give it another text value. Otherwise, the elements shift.
This is the HTML and css
<form>
<input type="text" id="email" class="textBox" />
<input type="submit" id="submitSubscribe" class="submitButton" value="" />
</form>
.submitButton{
width:30px;
line-height:30px;
background:url('');
}
.textBox{
line-height:30px;
}
#email{
width:146px;
}
Here is my jsfiddle:
http://jsfiddle.net/EmCQJ/5/
Does anybody know why Chrome calculates the alignment differently with the text in the value attribute than when the value is blank? Leaving that space in the value feels like a hack solution to me, but I've tried all the obvious css fixes and still can't get it working. Any input is greatly appreciated. Thanks!
This should do it: http://jsfiddle.net/EmCQJ/38/
The key here was
vertical-align: text-top;
It seems the input-text and input-image elements have different baselines (the default setting for vertical-align) but the same text-top line.
You should manually set the margin, padding, and border of the input-text element because different browsers have different defaults. When doing this, remember height is the size of the element less the margin, padding, and border so if you want a total height of 30px make sure to subtract 1px from the top and 1px from the bottom giving you a CSS height of 28px.
I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.
My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's session.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.
I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?
Any help would be greatly appreciated.
EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/
Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:
position: absolute;
and also using z-index which tells the page what items to display over top of the other:
z-index: 0;
EDIT
Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:
http://jsfiddle.net/FyNZw/2/
so I have a form that I have multiple input text fields as well as a select box or two and then 3 checkboxes. Everything lines up correctly in Chrome and looks great, then I look at it in firefox and everything except the checkboxes line up, they instead are center aligned in their area rather than being to the left like in Chrome. I have tried putting an extra div around it and everything but nothing seems to break it. Any help or errors that I am not seeing in the code?
Checkbox on the form
<div class="blueTable"> - this is for the rest of the form and table
<div class="checkbox"> - this is what I put in to override
<label>Is this a letter?</label>
<input type="checkbox" name="letter" value="YES" class="checkbox"/>
<label>Return label?</label>
<input type="checkbox" name="return" value="YES" class="checkbox"/>
<label>Save destination for future shipments?</label>
<input type="checkbox" name="save_destination" value="YES" class="checkbox"/>
</div></div>
CSS File
.blueTable input,.blueTable select{
float:left;
font-size:12px;
padding:4px 2px;
width:400px;
margin:2px 0 20px 10px;
text-align: left;
}
.checkbox {
text-align: left;
float: left;
vertical-align: bottom;
position: relative;
}
http://jsfiddle.net/MfNdF/ is this something you are going for?
.blueTable input gives your checkboxes width of 400 pixels which might cause the problem.
Try using a CSS and table hybrid layout. To align your page. This may help your web page show up better across more browsers especially ones that are not as CSS compliant as chrome.
I'm using submit controls in my web page
<input type="submit" name="BtnSearch" value="Search" id="btnSearch" title="Search" />
Even when I turn off CSS I get a big gap before the start and after the end of the text of my button. My buttons are also bigger than I want. Is there a way to style buttons in IE6 and 7 to make them more compact?
Set overflow to visible:
input {
overflow: visible;
}
And then set the padding to whatever you want it to be.
Most of the browser-specific styling is done with the border--set border-width to 0 if you want a plain square button.
You could try to style like so:
input [type="submit"] {
padding: 0;
border: 0;
}
or simply add a class to your button and add style rules for that class.