I have a couple of buttons inside a div with a specific width, and I am facing a problem where the buttons are being rendered differently in firefox vs chrome and safari.
In firefox, the buttons are bigger and are messing up my layout.
<div id="sort_by">
<button id="sort_by_price" class="sortButton" value="1">Price</button>
<button id="sort_by_bedrooms" class="sortButton" value="1">Bedrooms</button>
<button id="compareButton" class="sortButton">Compare</button>
</div>
CSS:
button {
display:inline;
float:left;
background-color:orange;
border:1px solid orange;
border-radius:5px;
-moz-border-radius:5px;
font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
font-size:14px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
cursor:pointer;
padding:4px 10px 3px 7px;
}
#sort_by {
width:265px;
height:35px;
border-bottom-style:solid;
border-bottom-width:2px;
border-color:#c9c9c9;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
}
Rendered in firefox:
Rendered in Chrome:
It can be seen that the buttons in firefox are bigger. How can I fix this? Thanks.
Firefox adds an extra margin/padding to button elements that cannot be changed by standard CSS, you can however add the following to make it behave
button::-moz-focus-inner {
border: 0;
padding: 0;
}
Related
I'm have a wordpress site where I have three buttons with position:fixed in the right side. The buttons show fine in FF and IE, but disappears behind the next section when I scroll in google chrome. I am pretty sure it is a stacking context problem, but can not make the button appear no matter which value I change. HTML and css below( the theme uses visual composer, if that is any help:)
.button_fixed{
position:fixed;
right:0;
top:35%;
z-index:99999999;
}
.button_fixed a{
border:3px solid #f37121;
border-radius:8px 0 0 8px;
background:rgba(0,0,0,0.4);
display:block;
border-right:0;
color:white;
margin-bottom:25px;
padding:10px;
font-family: 'Deftone Stylus';
font-size:35px;
width:150px;
position:relative;
}
span.oswald{
font-family: Oswald;
font-size:25px;
text-transform:uppercase;
displaY:inline-block;
padding-top:5px;
}
HTML:
<div class="button_fixed">
sell <br/><span class="oswald">equipment</span>
buy <br/><span class="oswald">equipment</span>
outsource <br/><span class="oswald">my sales</span>
</div>
site url: http://tinyurl.com/q9yangh
Thanks a lot for the help.
For #top add overflow: visible
im trying to learn how to use css instead of tables. i'm starting at the basics with a block of text with same height and width
margin-right: 60%;
margin-left:10px;
margin-top: 10px;
margin-bottom:0;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
margin-left: 60%;
margin-right:10px;
margin-top: 10px;
border:thin;
background-color:#FFF;
font: 9pt "trebuchet ms", arial, sans-serif;
color:#003318;
display:block;
however, the results are not good. there's no border. how can i fix this?
I recommend the shorthand border property:
border:solid 1px black;
Try cutting the other border properties and just using that and see if that does the job.
More info: http://www.w3schools.com/css/css_border.asp
Tables are like structure groups of layers while divisions are simple layers.
Think that every division is a . The problem is how to structure your divisions. This is where stylesheets come to your rescue.
ex.:
<div class="table">
<div class="right-td"> </div>
<div class="left-td"> </div>
</divd
And in your stylesheet
div.table { width:100%; float:none; margin:0px auto;}
div.right-td { border:1px solid #000;float:rightt; width:45%; padding:6px;}
div.left-td { border:1px solid #000;float:left; width:45%; padding:6px;}
This is just an example
Please see this css code
#ContactForm .wrapper {
min-height:30px;
padding-bottom:8px;
}
#ContactForm .bg {
border:1px solid #aaaaaa;
background-color:#e9e9e9;
float:left;
}
#ContactForm .input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
When I test it in browser (firefox) the input block is of some height.. I try reducing the top and bottom padding value from 6 to zero but no avail.
Also reducing height from 12 to lower value does not help.
It is stubborn and fixed to some height. What could be wrong??
I can provide with other data also, if needed.
This is html code
<div class="wrapper"> <strong>Phone:</strong>
<div class="bg">
<input type="text" class="input" >
</div>
</div>
Thanks in advance
i think reducing the height from wrapper will halp.. if not the height must be controlled from some other factor.. check that..
on a look on your code this is the solution..
update us for the same..
#ContactForm .wrapper {
min-height:30px; (CHECK THIS)
padding-bottom:8px;
}
Make sure the form your input is in is has the id "ContactForm"
Remove the space between #ContactForm and .input like the following example
#ContactForm.input {
width:200px;
height:12px;
background:none;
padding:6px 10px 6px 10px;
color:#000;
font:10px Arial, Helvetica, sans-serif;
}
That should work.
I have a table and 2 columns in a row. In the first one I have a text input and in the other one I have a container div with a margin in em and 2 inline-block elements inside it.
Everything's fine in Firefox, Safari and even in Opera. But in Chrome the second inline-block element is shifted below. The interesting thing is, if I set the margin(left) of the container in pixels, this doesn't happen.
Here's a fiddle: http://jsfiddle.net/inhan/bttBs/
Here's the structure:
<table>
<tr>
<td><input type="text" /></td>
<td>
<div class="buttons">
<span>Reset</span>
<span>Submit</span>
</div>
</td>
</tr>
</table>
And here's the rough CSS
body {
font-size:0.8em;
font-family:Arial, Helvetica, sans-serif;
color:#2E2E2E;
}
table,tbody,tr,td {
border-spacing:0;
margin:0;
padding:0;
}
input[type="text"] {
width:11em;
border:1px solid #BBB;
padding:4px 3px;
margin:2px;
}
.buttons {margin-left:1em} /* set this to 13px */
a.button {
text-decoration:none;
outline:none;
display:inline-block;
*display:inline; zoom:1; /* IE 6/7 */
width:65px;
height:26px;
margin:0 1px;
font-family:'Open Sans';
font-size:0.9em;
text-align:center;
color:#333;
cursor:pointer;
border-style:none;
/* there's a bg image here */
background-color:lightgray;
}
a.button span {
display:block;
margin:4px 0;
}
Does anybody know what's happening there?
A little advice that may work, is to use CSS reset from the meyerweb, it can be easily searched on Google.
Remove the class from the <div class="buttons">
jsfiddle.net
Apparently this was a bug with that version of Chrome at the time I asked this question. The issue does not exist anymore and the layout in the fiddle I provided looks just fine in the current version (23.0.1271.101) of Chrome in mac.
I have this CSS. the property FILTER In class .crumb make my background and this works perfectly and Chrome, Firefox, safari, iPad, iPhone,Android... but for an unknown reason. It just doesnt work on ie9. I see the dark bordes with a radius, but the background is just completly square.
.left-crumb {
margin-left:15px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.crumb {
margin-top:20px;
margin-bottom:10px;
background-image:0 color-stop(0.3,#798aad), color-stop(0.51,#6276a0), color-stop(0.51,#556a97), color-stop(0.75,#566c98), to(#546993));
background:linear-gradient(top,#4c4c4c0%,#59595912%,#66666625%,#47474739%,#2c2c2c50%,#00000051%,#11111160%,#2b2b2b76%,#1c1c1c91%,#131313100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#131313',GradientType=0);
font-weight:bolder;
border:solid 1px #54617D;
height:30px;
padding-left:10px;
padding-right:10px;
display:inline-block;
color:#FFF;
line-height:28px;
border-color:#484E59 #aaa #4C5C7A #54617D;
}
.right-crumb {
position:relative;
margin-right:10px;
padding-right:25px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here's a quick HTML so you can test.
<div id="adminPanel"><a class="left-crumb crumb right-crumb" href="admin.php">Admin panel</a></div>
adminPanel is just a div to contain all
Still IE9 doesn't supports yet, but you can use SVG to achieve this, please download the source code and check the demo here
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/