This question already has answers here:
How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?
(5 answers)
Closed 6 years ago.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Result in Chrome:
removed dead ImageShack link
Result in FF:
removed dead ImageShack link
Try display:block on the textarea:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {display:block;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
The issue is that the textarea is inline and it is using the text height to add a bit of extra padding. You can also specify:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#f09;line-height:0px;font-size:1px;">
<textarea></textarea>
</div>
</body>
</html>
Another option which is helpful if you want to keep the textarea inline and don't want to mess with the parent block's font properties (I suggest this over the previous method with line-height):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
textarea {vertical-align:middle;}
</style>
</head>
<body>
<div style="background-color:#f09;">
<textarea></textarea>
</div>
</body>
</html>
Finally, if you're really worried about consistency between browsers keep in mind margins and other things like that can be defined with different defaults in different browsers. Utilizing something like YUI-Reset can help bring all new browsers to a consistent standard from which you can build.
Setting the display mode to block did the trick for me. Just to clarify, here is the declaration that you need to add to your stylesheet. I would recommend adding it to your reset or normalize stylesheet, in the first place.
textarea {
display:block
}
I usually have a "first line" in every global.css file I make.
saying:
<style>
html,body,p,h1,h2,h3,h4,h5,h6,img,table,td,th
{
margin:0;padding:0;border:none;
font-familiy:"my sites default font";font-size:10px;
}
</style>
After this, I feel that I have full control of the browsers behaviour, when testing on 5 different platforms: Chrome, Firefox, Safari, Opera and ... doh... Microsoft Internet Extracrap..
Then you can easily do something similar for < input > and < textarea > too.
if the first line does too much, then just make a second line for the "special cases" alone.
<style>
textarea {margin:0; padding:0; border:none; display:block;}
</style>
Remember that CSS inherits, so you can have multiple declarations of different classes.
Does this remove your problem?
Related
I am currently working on a node app using express, and rendering html page using ejs.
When I used bootstrap in my .ejsfile, the .col-xs-*, .col-sm-* breakpoints worked well, but the breakpoints for the larger width cannot work as expected.
While I used bootstrap in the .html file and opened it in the browser, all breakpoints worked fine. And I've tried include bootstrap from both CDN and local, it resulted in the same situation. Can't figure what went wrong.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel='stylesheet' type='text/css' href='/bootstrap.min.css'>
<title>
TEST
</title>
<style>
.eight{
background-color: red;
}
.four{
background-color: blue;
}
</style>
</head>
<body class='container-fluid'>
<article class='row'>
<div class='col-sm-8 eight'>
8
</div>
<div class='col-sm-4 four'>
4
</div>
</article>
</body>
</html>
I want the red div to occupy three-fourths of the row, the blue one occupy the rest.
Suggestions and solutions to the problem are appreciated.(Not a native English speaker, sorry for the unclear expression if any.)
How to restrict the webbrowser control bouncy behaviour (white space is seen while scrolling up and down). Please refer the screenshot below.
There doesn't appear to be a way to disable the 'bounce in the WP7 or WP8 WebBrowser control.
But the issue you're seeing can be fixed with a small bit of CSS. Simply apply a background-color to the BODY of the document..
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {background: black}
#content {background: black}
p {color:white}
</style>
</head>
<body>
<div id="content">
<p>Item 1</p>
<p>Item 2</p>
<p>Item 3</p>
</div>
</body>
</html>
I want to display basic portlet on mozilla browser in dojo 1.7, but the following is displaying data as simple text without actually creating any portlet using dojo API. Could anyone please tell me what wrong I'm doing?
<!Doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../lib/dijit/themes/claro/claro.css"/>
<style type = "text/css">
#import "../lib/dojox/widget/Portlet/Portlet.css"</style>
<script src = "../lib/dojo/dojo.js" data-dojo-config = "async: true, parseOnLoad:true" >
dojo.require("..lib/dojox/widget/Portlet");
dojo.require("..lib/dijit/dijit");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Portlet" title="A Simple Portlet">
<div data-dojo-type="dojox.widget.PortletSettings">
This is a simple setting widget.
Put Whatever you like in here
</div>
<div style="height: 100px;">
The contents of the portlet go in here.
</div>
</div>
</body>
</html>
Take a look at dojox.widget.Portlet source code. It's not rewritten to AMD format and therefore you are not able to resolve dependencies. Even the test dojox/widget/tests/test_Portlet.html does not work.
To workaround this switch the loader into sync mode defining async: false or completely omit the definition as in Dojo 1.7 the synchronous mode is default.
There is also another unresolved dependency, which I resolved by explicitly requiring AMD module dijit._Container before requiring dojox.widget.Portlet:
dojo.require("dijit._Container");
dojo.require("dojox.widget.Portlet");
See the working example at jsFiddle: http://jsfiddle.net/phusick/MWnYZ/
I'm trying to use Google's Closure library for the HTML editor. I created a goog.editor.SeamlessField but if I enter a word that is too long for the width, it puts a scrollbar in and covers the text. How do I fix this?
This appears to be happening only in Firefox. Here is some HTML that demos the problem:
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='/closure-library/closure/goog/base.js'></script>
<script>
goog.require('goog.dom');
goog.require('goog.editor.SeamlessField');
</script>
<script>
function init() {
var d = goog.dom.getElement('div1');
var f = new goog.editor.SeamlessField(d);
f.makeEditable();
}
</script>
</head>
<body>
<div style='width:150px;'>
<div id='div1'>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>
<button onclick='init();'>Create editor</button>
</body>
</html>
DOM fragments generated by this SeamlessField component differ for Chromium and Firefox. The former gets an classic div element, the later issues an iFrame. The scheme has something to do with how Firefox handles content-editable elements. By styling the iFrame, you should be able to avoid the scrollbar.
I am using Blue print CSS and it works fine in Firefox...but when I look at it in IE, even with the for IE lt IE8, it still doesn't seem to be working right in terms of spacing and alignment.
Any suggestions on what I can do to make it look proper?
Make sure that you use a doctype. If you do not it will render in quirks mode. I had the same problem and correcting the doctype worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
That should go at the top of the document
Are you including the ie.css file? Below the regular blueprint css files, include the ie.css file, using the notation that only IE will parse:
<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Make sure that all the URLs to the CSS files are correct and are working on your site also.
I know this is a bit late, but hopefully it'll help someone who googles it.
A big gotcha when using blueprint here is to ensure that your container div has a class of container, not id:
<div class="container"> ... </div>
Not
<div id="container"> ... </div>
It's caught me out a few times before.