I am trying to float a <button> to the right. the <button> is outside of <form> but is on the same line. For some reason this is not working in FF. I made my form background red and found out that the <button> is still in the <form> in FF even though its not! Every other browser works fine, the <button> is not in the <form>.
Screenshot:(left is chrome...the one with http:// and the right is Firefox
alt text http://img375.imageshack.us/img375/3824/ffchrome.png
HTML:
<form>
<input type="url" placeholder="http://" />
<input type="submit" value="Crypt" />
</form>
<button type="button"> ? </button>
CSS: (Took out the unnecessary code)
section.crypter {
padding: 25px;
}
section.crypter form {
display: block;
float: left;
background: red;
}
/* Input */
section.crypter input[type="url"] {
border:1px solid #666;
color: #939393;
font: italic bold 1.7em Verdana, Arial, Serif;
outline: 0;
padding: 10px 10px;
width: 240px;
}
section.crypter input[type="submit"] {
border:1px solid #666;
color: #000;
font: 2em Verdana, Arial, Serif;
margin:0 0 0 -10px;
padding: 8px 20px;
}
section.crypter input[type="submit"]::-moz-focus-inner {
border: 0;/* Firefox hack */
}
section.crypter button {
display: block;
float: right;
padding: 10px 25px;
}
I tried your code with firefox 3.6.8 and did not have the issues you got. I also don't think Firefox will manipulate the DOM (moving the button into the form tag), what seams to happen.
So I guess its one of your Firefox extensions, that causes the issue.
It might be worth trying to uninstall and install firefox and the good old fashion reboot.
Hey guys, I figured it out thanks to Kroc Camen. In Firefox, I cannot float something to the right unless it is first in order within the wrapping element. (A engine quirk since the 90's) haha Thanks for the help though!
Related
Following annoying problem: jsfiddle.net/f6juduq1
Two buttons, one input type="submit", the other an a tag, should look the same:
HTML:
I'm a button
<br><br><br>
<input type="submit" class="button" value="I'm a button">
CSS:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
The last line (box-sizing) is needed to achieve the same width. (Or min-width - the buttons should be flexible in width.)
Now the issues:
Firefox 40
The inner box (inspect the first button with Firebug and click the Layout tab) is 150 x 22px.
Second button: 150 x 24px. Why?
Chrome 45
First button (inspect with Chrome's Developer Tools): 150 x 21px.
Second button: 150 x 21px. Okay, but they differ from Firefox. Why?
Internet Explorer 11
First button (inspect with IE's Developer Tools): 150 x 20.7px.
Second button: 150 x 20.7px. Okay, but "20.7" huh? Why?
Safari 5.1.7
(Can't inspect the jsfiddle's result iframe.)
Opera 31
(Same as Chrome.)
Taking a screenshot from Firefox's result and comparing it in Photoshop shows the input (second button) is 2px higher than the a tag (first button):
In Chrome and Safari it looks good:
In IE the a tag is 1px higher.
Now the final question is how to fix this or rather how to prevent those messy issues?
Thanks in advance!
Very interesting observation here. The issue affects both height and width, specifically in Mozilla Firefox, due to built-in CSS style declarations.
Adding the following CSS should fix both height and width discrepancies.
input::-moz-focus-inner { border:0; padding:0 }
Illustration of the bug and fix here (notice, I've taken out your CSS styles for height:
html{font-family: Arial; font-size:0.8em;}
.wrapper {
background: red;
white-space: nowrap;
}
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
}
.button:hover,
.button:focus,
.button:active {
text-decoration: underline;
}
input[type="submit"].button {
box-sizing: content-box;
}
input.buttonfix::-moz-focus-inner {
border:0;
padding:0
}
NOTE: Use Firefox browser to see the issue.<br>
<div class="wrapper">
I'm a button
<input type="submit" class="button buttonfix" value="I'm a button">
<input type="submit" class="button" value="I'm a button">
</div>
Notice last button has extra height forcing the container to show top/bottom of other buttons
<br>
<br>Input Button - Fixed<br>
<input type="submit" class="button buttonfix" value="I'm a much longer button">
<br>A Tag - fine<br>
I'm a much longer button
<br>Input button - bug?<br>
<input type="submit" class="button" value="I'm a much longer button">
Read about the issue in detail here: https://css-tricks.com/forums/topic/button-padding-issue/
The solution
Basically there are three issues:
Different box lengths
Different default settings across several browsers
Firefox CSS discrepancies
The solutions are listed below.
1. Different box lengths
An a tag is longer than an input submit:
To solve this you have to add box-sizing: content-box; to the input's CSS. As from now the (short) buttons look like:
2. Different default settings across several browsers
The buttons have different heights thanks to different browser default settings:
The input (second one) is higher.
The solution here: resetting all those defaults. Set line-height and height:
3. Firefox CSS discrepancies
And finally the last one, a pretty annoying behavior just in Firefox.
The buttons above are equal: same height, same width. But if the button text gets longer you might see this:
The input button is wider. This is because Firefox uses pseudo elements within the button elements. To redress this problem reset padding and border for input::-moz-focus-inner:
The code
Here's a sample: http://jsfiddle.net/f6juduq1/12/
CSS
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
padding: 10px 20px;
min-width: 150px;
cursor: pointer;
line-height: 1.5;
height: 27px; /* 18px x 1.5 = 27px */
}
input[type="submit"].button {
box-sizing: content-box;
}
input.button::-moz-focus-inner {
border:0;
padding:0;
}
Thank you all for help. I hope this answer is concise & clear to help other people finding the solution as soon as possible.
To obtain the same height in all browsers you need to specify the height
and for vertical align center line-height same as height value
for example try this:
.button {
background: #257abc;
border: none;
display: inline-block;
color: #fff;
font-size: 18px;
font-family: Arial;
text-align: center;
text-decoration: none;
min-width: 150px;
cursor: pointer;
padding: 0 20px;
/* Adjust your height here */
line-height: 35px;
height: 35px;
}
I was having a problem with <a> being sized differently than <button> only in Safari, and it was caused by having SVG icon buttons.
The SVGs were sized at 35px, and both the anchor and button tags had explicit height of 35px set on them.
The problem was that the buttons were smaller than the anchors only in Safari.
I removed the height declarations on the buttons and it made the button take the size of the SVG inside it.
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...
I have a very little but hard (for me) problem to solve.
I have a text input, and a submit button. I need them to be the exact same height and for this to be true across Chrome and Firefox, ideally internet explorer also.
HTML
<input type="text" name="email" /><input type="submit" value="»" />
CSS
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 9px;
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
}
I've setup this basic code on a jsfiddle here.
You should notice if you load it in chrome, the button is less height than the text input and in firefox, its larger.
What am I missing?
Remove/add line-height: 18px; for both.
Vertical padding of the submit button has no effect. This seems to be a webkit bug. You can solve the problem by specifying explit heights and increasing the height of the submit button by the top and bottom padding of the input field.
input[type=text] {height: 60px;}
input[type=submit] {height: 78px;}
The problem is your padding that is applying wrong to your button.
Trying solving it like this.
input[type=submit], input[type=text] {
font-size: 18px;
line-height: 18px;
float: left;
border: 0;
display: block;
margin: 0;
height: 30px; /* or whatever height necessary */
}
Additionally, you can keep the padding left and right on your button like this.
input[type=submit] {
background: #000;
color: #fff;
padding: 0px 9px;
}
input {
height: 19px;
}
This maybe?
Also, remove the padding property.
http://jsfiddle.net/xkeshav/e6aTd/1/
Maybe it's the padding that is making problems. Try removing the padding, setting the button to a fixed height and make the offset with line-height.
You need to remove the height and work on the actual height of the input text field just by padding/font-size
jsfiddle
Removing/adding line-height: 18px; for both is not a perfect solution because I see a little difference height in firefox...
The best solution I found is to put a div arround and set its style to display: flex.
All is perfect this way.
body {
background: #ccc;
}
div{
display: flex;
}
input[type=text] {
width: 218px;
}
input[type=submit] {
background: #000;
color: #fff;
}
input[type=submit], input[type=text] {
padding: 5px;
font-size: 25px;
border: 0;
margin: 0;
}
<div><input type="text" name="email" /><input type="submit" value="»" /></div>
TRY
body {
background-color: #ccc;
}
input[type=text] {
width: 218px;
}
Working DEMO
The source code is like this:
<div id="contact">
<div class="form">
<form action="contact.php" method="post" name="contact-us">
<div class="right">
<div class="labeled">
<label for="text">body</label>
</div>
<textarea id="text" name="text" cols="20" rows="5"></textarea>
</div>
</form>
</div>
</div>
And this is css block for textarea and related objects :
div.right {
float: right;
margin: 5px 0;
}
div.labeled {
width: 150px;
float: right;
}
div.right div.form textarea#text, textarea#text {
background: #A2A2A2;
border: 1px solid #811D1D;
height: 50px;
margin-right: 20px;
width: 220px;
color: #FFFFFF;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}
in FF all things are correct but in IE the textarea hasn't been styled and remains Intact.
You can see difference in below image too :
Also as you can see the label tag styled true in FF and remains intact in IE!
How could I fix these?
Regards...
Not all versions of IE support the textarea styling.
In your code, the textarea is within the div that floats right. Seems like you're asking for odd behaviour. Better float the 'labeled' div (or rather remove that div and do some trickery on the label itself).
http://jsfiddle.net/KzYgt/
overflow: auto; - for the scrollbar
Styling form elements is a serious hell since most of the controls are styled by OS and browser and those styles are hard to override, in some cases impossible. You should however be able to achieve the background color and scrollbar disappearing.
Are you certain there is no other element with the id "text" on your page?
A good overview of what's possible with css for textarea styling can be found here: http://www.456bereastreet.com/lab/styling-form-controls-revisited/text-input-multiple/#ie6-xp
Solved!
There was just this css block on page's header :
div.form input[type="submit] {
padding: 2px;
background: #A2A2A2;
border: 1px solid #811D1D;
color: #000000;
height: 20px;
}
And As you see there is one lost quotation mark at [type="submit"]. IE couldn't correct code but other browsers do that! This was the problem
P.s: Special thanks to #Bakudan for introducing jsfiddle Online Editor
Regards...
having my first attempt at rounded corners in a login form. Just doing the layout right now, but having some IE7 troubles. Trying to avoid using conditional statements, but although I can get it displaying perfectly in Firefox 3.5, IE looks to be creating a larger margin on the right and left of my login button. It could be that I'm not structuring this the best way possible, so looking for a little insight from the community. Most of my problems began after trying to round to corners using the method shown. My goal is IE6/7 compatibility.
<div id="credentials">
<div id="credsheader"><div id="tr"> </div></div>
<input type="text" class="blurred" id="username" value="USERNAME" />
<input type="password" id="password" class="blurred" value="PASSWORD" />
<button type="submit" id="login"><img src="./images/login.png" alt="Submit" /></button>
<div id="credsfooter"><div id="bl"> </div></div>
</div>
div#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666;
padding: 0px 5px;
}
div#tr{
float: right;
background: url('../images/tr.png');
background-repeat: no-repeat;
cursor: default;
}
div#bl{
float: left;
background: url('../images/bl.png');
background-repeat: no-repeat;
cursor: default;
}
#credsfooter{
position: absolute;
bottom: 0px;
left: 0px;
height: 6px;
}
#credsheader{
position: absolute;
top: 0px;
right: 0px;
height: 6px;
}
#username{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
font-size: 8pt;
padding: 3px;
margin: 8px 3px;
vertical-align: middle;
}
#password{
font-size: 8pt;
padding: 3px 3px 4px 3px;
margin: 8px 17px 8px 3px;
vertical-align: middle;
}
input.blurred{
color: #AAA;
}
input.focused{
color: #000;
}
#login{
background: transparent;
border: 0px;
padding: 4px 0px 2px 0px;
margin: 0px -12px;
cursor: pointer;
vertical-align: middle;
}
On a <button> element in IE7 you need to set overflow visible:
button {
*overflow: visible;
}
Found here: http://refresh-sf.com/blog/2009/06/button-padding-ie7-bu/
I personally like to use the "* hack" to target IE7 only - although probably unnecessary in this case.
Ok so I found a lot of problems cause by browser inconsistencies which were causing you a whole lot of problems so I basically started over. I hate forms because of inconsistencies so this was a learning experience for me. I was able to really consolidate the CSS because a lot of it was used to compensate for weird padding and margins. The main thing was I used an input element for a button instead of a button because it is more consistent across browsers. I also added a form tag to fix any issues there. Note that the <p> in the form is intentional. I also added an reset.css file that makes a huge difference because It resets all elements to a state that is consistent to all browsers.
Below is the re written-code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Buttons Suck in IE7!</title>
<link rel="stylesheet" href="reset.css" type="text/css" />
<style type="text/css">
#credentials{
position: absolute;
right: 10px;
top: 10px;
background-color: #666666;
padding: 10px;
-moz-border-radius: 5px;
}
input.text-input{
font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
border: 1px solid black;
vertical-align: middle;
height: 20px;
width: 140px;
color: #AAAAAA;
}
input.text-input:focus{
color: #000000;
}
input#login{
background: transparent;
border: 0px;
height: 20px;
cursor: pointer;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="credentials">
<form action="http://www.site.com/login.php">
<p>
<input type="text" class="blurred text-input" id="username" value="USERNAME" />
<input type="password" class="blurred text-input" id="password" value="PASSWORD" />
<input id="login" type="image"
src="http://www.axialis.com/objects/users-home.jpg"
name="submit" value="Button Text" />
</p>
</form>
</div>
</body>
</html>
Note that the image I used for the button is some random image I found on Google! You probably also notice that I used -moz-border-radius: 5px; for the rounded corners. This was for simplification. What you can do is take a screen shot of the credentials box in Firefox and then crop just the box out in your favorite image editor. Next you would fill in the inputs with the gray color using some sort of paint brush tool. Now you would have a blank gray box of the same shape and size. Now all you have to do is set that as the background image of your credentials box. That's a lot simpler then do each corner at a time! Don't forget to get rid of -moz-border-radius: 5px; after you do this.
Oh, and before I forget here is reset.css:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
Include this reset.css on every page its a lifesaver trust me. Oh and one last note. input.text-input:focus{} probably wont work in IE6 or 7, it will only work on tags. But don't worry because I think IE6 has a limited lifespan at this point.
I hope That helped...good luck!
UPDATE: I tested this on IE 5.5-8 and it looks the same on every one, the only problem is :focus only works in IE8 for input tags.
Not sure if this is the case, but it could be the 'IE Double Margin Bug'.
From memory, I think it might be worth trying to add display: inline; to your floated elements?
Good Luck!
That's difficult to answer that without viewing the HTML in action (with images, for example). Could you set a sample page up somewhere?
Theoretically, it could be a case of not having hasLayout for your button element. You can add the position: relative CSS style to the button element and see if it works. Alternatively, it could be a case of negative horizontal margins (IE does not like them sometimes).
Got acceptable margins, but still not perfect cross browser. Just spent time manipulating margin sizes in pixels until it didn't look terrible.