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?
Related
<div style="float:right;">
Upgrade now
Buy more credits
</div>
The float:right|left (whether inline, or in my stylesheet) seems to make the links lose both their vertical padding and their bottom border. If I remove it, I have no problem.
Here's the CSS for the links:
.button2 {
color: #fff;
font-size: 18px;
text-shadow: 0 -1px 0 #064687;
border: 0;
border-bottom: 2px #0B5BAC solid;
border-radius: 8px;
background: #1E88F2;
background: -moz-linear-gradient(top, #6BB0F7, #2089F2);
padding: 9px;
cursor: pointer;
box-shadow: 0 2px 2px #999;
text-decoration: none;
width: 270px;
}
Try the old 'hasLayout' fix by adding zoom: 1;
.button2 {
zoom: 1;
}
http://www.satzansatz.de/cssd/onhavinglayout.html
I don't like doing hacks like that but it seems to achieve what you want.
That is because you are trying to assign styles to an inline element in which they typically don't apply. Such as vertical padding, widths, and borders. Try giving it display:inline-block or display:block; float:left;, and in the case of IE7 if you use display:inline-block, look for the display:inline-block fix for IE 7 and you should be all set. jsFiddle: http://fiddle.jshell.net/wUD9q/5/show/light/
FYI - Float has nothing to do with it at all. Removing the float on the outer div doesn't fix it either. jsFiddle for it still broken: http://fiddle.jshell.net/wUD9q/1/show/light/
IE7 is used by less than 1% of the world browsing the internet. Just move on!
SOURCE: http://theie7countdown.com/
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...
So I wanted a custom select box and I did the following :
html :
<div class="select">
<select name="Step_01_Roof_Width" onChange="GetWidth();" class="Step_01_SelectBox" id="Step_01_Select_Width">
</div>
css :
.select select
{
width: 300px;
background: transparent;
padding: 5px;
font-size: 10px;
line-height: 1;
border: 0;
border-radius: 0;
height: 19px;
-webkit-appearance: none;
}
.select
{
width: 270px;
height: 19px;
border-radius: 15px;
border: black solid 1px;
background: url(/wp-content/themes/blackbird/phpwizard/HTML5Application/public_html/images/Step_01/selectarrow.png) no-repeat right white ;
}
However, this only works for chrome and safari as far as I know, firefox and IE give some problems with this. You can view it here : http://www.solar-discounter.nl/uw-pv-systeem/ If anyone has any idea on how to achieve the chrome and safari example on firefox and IE, that would be such a big help to me!
Thanks for reading.
I think this is what you are looking for : How to remove the arrow from a select element in Firefox
Add opacity:0; to .select select and a div with position absolute before your select.
You can then update the div text with javascript/jquery.
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.
Trying to figure out a rather annoying IE7 CSS issue. For some strange reason on the page below, its padding is appearing to be much larger than normal. No properties I apply seem to fix the issue and I cannot figure out why it is happening. You can see the issue here on the buttons (the main culprit):
Example: http://www.matthewruddy.com/demo/?page_id=1088
Here is the CSS being applied:
.button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
margin: 0;
padding: 0;
display: inline-block;
white-space: nowrap;
}
.button span {
margin: 0;
padding: 8px 12px;
display: inline-block;
white-space: nowrap;
}
You can see the entire CSS here: http://pastebin.com/Grsxh97H
And the source of the webpage: http://pastebin.com/rW33Nh0D
Thanks to anyone who can shed some light on the issue, Matthew.
I've come across this one before.
Simply applying overflow: visible to your buttons will fix it.
I will try to find a reference link.
See:
http://jehiah.cz/a/button-width-in-ie