I'm trying to make a button that's 11px by 11px, but it seems every browser I try has a minimum width of 12px for buttons (except IE9, which does 16px). Is there a way around this or do I need to use anchor tags?
My CSS
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
}
The Result in IE
Every browser has some default css. try using css reset
try adding padding and margin to 0 in your button css
#testButton
{
background-image: url(images/Sprites.png);
width: 11px;
height: 11px;
border: 0 none transparent;
padding:0;
margin:0;
}
Ok, so interesting question. I've been playing around here. And I'm running Safari on a Mac here.
For me, this works (I think) on a simple <button></button> element:
button {
width: 2px;
height: 2px;
padding: 0px;
box-sizing: border-box;
border: 0;
background: red;
}
I think the important thing to note is the box-sizing parameter. You can get more information about it here. Along with, of course, the padding style.
Related
On iOS 8, I'm overlaying a div with a textarea, with the same text and resetting every margin/padding values, but there's still an offset of 3px that I can't get rid of. It works great on Chrome and Safari desktop.
Here's a fiddle: http://jsfiddle.net/jfvz0ved/
textarea, div {
position: absolute;
top: 0;
left: 0;
font-size: 1.1em;
line-height: 1.6em;
font-family: Courrier;
border: 0;
outline: 0;
padding: 0;
margin: 0;
background: transparent;
display: block;
text-align: left;
resize: none;
width: 100%;
color: black;
opacity: 0.4;
}
Any idea what property could cause this issue? I don't want to resort to a browser detection + special class if possible.
What happens when you apply a universal CSS reset?
If that fixes the problem, then one of the containing elements might need to be reset.
After quite a bit of research, it turns out iOS is adding a 3px padding and it can't (apparently) be removed. So the best way to go about it is to compensate for it. I've added a left: 3px on the div when iOS is detected. It's not ideal (I'd have loved to avoid that and have a CSS only solution), but it works.
I have applied the following html
<input type="image" value="Search" class="button" src="" onclick="this.form.searchword.focus();">
and this is the css...
#header form .button
{
/*border:solid 1px #999;*/
background:#664335 url(../images/btn-search.jpg) no-repeat ;
/*color:#fff;*/
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
border: none;
}
I tried by removing the width and height and setting a padding value to it but no-success for this. As I searched different questions, I came to know that if src attribute is not applied then border will appear. But in my case the markup I can't edit, so is there any method to remove that bug.
Anyway I solved it by changing type image to button with jquery.
Apply CSS:
#header form .button {
border: solid 1px #999;
background: #664335 url(../images/btn-search.jpg) no-repeat;
color: #fff;
display: inline-block;
font-size: 0;
width: 16px;
height: 20px;
vertical-align: middle;
background-color: transparent !important;
// delete this
border: none;
}
This questing has been asked more than one time, and the best posible solution to this is just to use type="submit" instead of type="image"and just style it in CSS as you like
P.S. type="image" will not work in chrome as you want, try finding another way for your code, because that border is place holder for an error image like in IE widely known red cross in white box, its just there, you may try adding image that has "Search" written on it or maybe add 1x1 px transparent image there, but thats all.
Hi I want to change the style of the dropdown, nearer the option tags, in HTML. In Firefox it is working, but not properly in IE and google chrome.
The padding is only working in firefox. The background color is working on all browsers, but in IE you can see it, even on the selected value.
Demo with JSFiddle
Html:
<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
<option selected="selected">en_CA</option>
<option>en_US</option>
<option>fr_FR</option>
<option>fr_CA</option>
<option>ja_JP</option>
</select><br />
CSS:
label{
margin: 5px 0px 10px 0px;
padding: 5px;
height: 22px;
display: inline-block;
width: 100px;
}
label em{
color: red;
font-family: Arial;
font-weight: bold;
}
select{
color: #333;
margin: 5px 0px 10px -5px;
padding: 5px;
height: 32px;
width: 262px;
border: #999 1px solid;
}
select option {
padding: 5px 8px;
background: #ddd;
}
Webkit browsers (Safari, Chrome etc) don't allow padding on select elements. You can however mimic padding by manipulating the height for top and bottom padding and text-indent for left-padding.
Update: The same goes for background-color on option elements. Webkit doesn't allow that and I don't believe there's a workaround other than doing your own Javascript implementation of a drop-down using for example an unordered list and some styling.
I don't think you could just style the option tags. I think I read it from somewhere that it is based on OS or something...
in internet explorer 10 (mobile version), a selectbox () gets highlighted blue as soon as it gets focused, (it´s the blue of the whole Modern UI surface of the phone). the styles for the select tag:
border-radius: 5px 5px 5px 5px;
font-size: 14px;
height: 25px;
letter-spacing: -1px;
float: left;
font-weight: 400;
padding: 0 5px 0 5px;
-webkit-appearance: none;
-ms-user-select: none;
background-origin: content-box, content-box;
background-repeat: no-repeat, repeat;
background-size: 11px 6px, 1px 160px;
background-position: right center, 0 -1px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMAQMAAACz9bS7AAAABlBMV…vQuZgJjsYojkBJQf75i4cGzcXt5HJQ/Djs7L5sApGeVNPJDzbGEbOb/85rAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAlgCAIAAADGR8ryAAACZ0lEQ…tDzV5P+JnOAzg9qR2Xlg+a8jAvtyK/P5fSI6Sf3c3NhwADAJ0Rj8qbukvYAAAAAElFTkSuQmCC);
border: 1px solid #CCCCCC;
I was hoping the "-ms-user-select: none" would fix it, but didnt.. Has anyone experience similar?
I've encountered a similar problem on WP7 an WP8, the solution is to move focus from select box to fake input on click event.
jQuery:
$('select').on('click', function() {
$('input.fakeInput').focus().blur()
})
CSS:
.fakeInput {
display: block;
width:0;
height:0;
top: -999rem;
position: absolute;
}
Note: do not forget to add this code only for mobile device, on desktop browsers it will work not as expected.
IE has its own CSS pseudo-element to deal with this highlight.
CSS:
select::-ms-value{ background-color: transparent; color: black; }
You may read more about this on this page.
it´s interesting but since I add this line to my style sheet, it keeps highlighting blue, but doesn´t stay that way after you select something from the selectbox.
Thought I add it as an answer if somebody comes back with the issue.
:focus{outline: none;}
So I've set my input, textarea and select elemtnts width of 97%. Everything is showing fine, but select element is always a bit shorter then rest. See picture for screenshot.
How to fix this? :)
Okey I fixed it byt adding extra margin to select element, here is css.
#cat_add_form input[type="text"], #edtCatDescr, select, .fileUpload
{
background-color: #ffffff;
width: 97%;
padding: 4px;
margin-bottom: 6px;
font-size: 16px;
border: 1px solid #dfdfdf;
display: block;
/* CSS 3 */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
#cat_add_form select
{
margin-left: 10px;
}
Use box-sizing: border-box.
This works in modern browsers, and IE8+.
Live Demo (or 97% version), modified from #Myles Gray's demo.
See here for more details.
For a way that works in IE7, see here.
select {
width:98%;
}
Just play with values until it looks alright,
Demo
What browsers have you tested in?