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...
Related
I am having trouble making a contenteditable look like a textbox on my site. Does anyone know what is the font on the picture - I have tried a lot of them an none matches well.
The contenteditable is above and the textarea is bellow .. i would like to know what is this font?
Here is the code as well
#mw {
-moz-appearance: textfield-multiline;
padding: 11px;
}
.mw1 {
padding: 11px;
}
<div id="mw" contenteditable>I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.
</div>
<textarea id="aid" name="inputText" class="mw1">I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.</textarea>
Still having trouble with trying to match fonts and color? See this Snippet for details.
SNIPPET
.textBox { font: 400 13px/1.428 'Courier New'; color: rgba(0,0,0,1); }
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
padding: 5px;
border-radius: 4px;
border: 2px solid #ddd;
padding: 4;
overflow: hidden; overflow-y: auto;
height: 100px;
background-color: #FFFFFF;
resize: both;
overflow: auto;
width:300px;
height: 100px;
font: inherit;
color: inherit;
}
.maintextarea {
padding: 5px;
border-radius: 4px;
border:solid 2px #ddd;
background-color: #FFFFFF;
width:300px;
height: 100px;
font: inherit;
color:inherit;
}
<section class="textBox">
<div id="textarea" contenteditable>
In this demo, I have wrapped a <section> element around both boxes. It has a class name of .textBox.
This is the CSS:
.textBox {
font: 400 16px/1.428 'Courier New';
color: rgba(57,64,68,1);
}
</div>
<textarea id="firsttextarea" name="inputText" cols="100" rows="20" class="maintextarea">
Now for the 2 editors #textarea and .maintextarea we add the following CSS to both of them:
font: inherit;
color:inherit;
</textarea>
</section>
i think the font is Consolas. but as for making the div appear like a textarea, you can try
<table bgcolor=buttonshadow cellpadding=3 cellspacing=3>
<tr>
<td bgcolor=buttonhighlight>
<div id="mw" style="
font:consolas;
width:400px;
height:200px;
overflow-y:scroll;
overflow-x:hidden;" contenteditable>
I am not really sure what this font is and I am trying to make a contenteditable area look like a text area.
Thanks for the help.
</div>
</td>
</tr>
</table>
Just adjust the Width and or Height to the way you like it.
This would work as long as you don't have a super long string fragment that has no spaces (ie a hyperlink). if you do then that super long word may be cut off.
You can remedy that by changing
overflow-x:hidden;
to
overflow-x:auto;
but that would add a horizontal scroll bar if it is needed. Alternatively you can add a "-" and a space somewhere in the Long word to seperate it into two or more lines
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.
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.
What I'm trying to do is make an input field and center it on the page. I have managed to do just that, but it looks like an input box on top of another one and it is not paying attention to the style rules I gave it. Here is what it looks like:
The black and grey box is supposed to be the input box, obviously.
Here is the HTML:
<style media="screen" type="text/css">
.styles{
height:30px;
width:286px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #5E5E5E;
padding:0 10px;
background-color: #000000;
color:#BFBFBF;
outline: none;
input-align: center;
}
.abs-centered {
margin: auto;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
}
</style>
<div class="styles abs-centered">
<body bgcolor="#25383C">
<input name="name" type="password" placeholder="Password" autocomplete="off"/>
</div>
I haven't put html and body and stuff in yet because I'm just trying to sort this problem.
Don't use a separate div for the look of the input box.
Use this:
input
{
//put the styling in here
}
You're applying the styles to a <div>, not the actual <input>. Think of the <div> as a container that has your body and input inside of it. (As an aside, the <body> should contain everything shown on the page, and not be contained in anything beyond the <html> tag).
Apply the styles to your <input> element, not the <div>, and you'll get the effect you're looking for.
You can fix that issue using CSS, like that:
input{
/*My CSS Code*/
}
However it's not recommended, since you have also input type="submit" which will have a problem because you'll have textbox design on button.
here is more popular and specifc way to edit input type="text"
input[type="text"]{
/*My Code*/
}
As you can tell, it can be used in type="password", type="submit" etc..
First of all, your html is a little messed up. the <html> and <head> tags are mandatory, your first <div> tag cannot be before the <body> tag and the body tag must be closed. It doesn't change a lot for your problem but when you are trying things in html/css you must be sure to have a code that doesn't have markup error otherwise the layout can end up not being rendered as expected.
As I understand you want your input box to be centered on the page. The css class .abs-centered you have there is telling the the layout engine to center a box relative to his parent.
In your code the div class is being centered relative to the page (<body>) box. If you want the input to be black and gray, and centered on the page, you can simple remove the div tag and add both .abs-centered and .styles classes to the input tag.
http://pastebin.com/psHz0psB
If you want to leave the <div> box and have the input centered relative to it, you can just add the .abs-centered class to the input. Then you'll have your input centered on the div centered on the page.
I think you should leave the <div> because input can be treated as inline elements instead of boxes and some browser may not treat the style as expected. If you just want the input element to be styled remove the .styles class from it so it will be transparent.
hope that helps !
You need this: DEMO
HTML:
<body bgcolor="#25383C">
<div class="styles abs-centered">
<input id="actual-input" name="name" type="password" placeholder="Password" autocomplete="off"/>
</div>
</body>
CSS:
.styles{
height:30px;
width:286px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #5E5E5E;
padding:0px 5px;
background-color: #000000;
color:#BFBFBF;
outline: none;
input-align: center;
}
.abs-centered {
margin: auto;
position: absolute;
bottom: 0;
left: 0;
top: 0;
right: 0;
}
#actual-input{
height:26px;
padding:0px;
width:100%;
color:#fff;
background-color:transparent;
border:0px;
outline-style:none;
}
Screen capture:
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!