Sample form:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 50px;}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Form</legend>
<p>
<label for="name">Name </label><input id="name" type="text">
</p>
<p>
<label for="email">Email </label><input id="email" type="text">
</p>
</fieldset>
</form>
</body>
</html>
It works in all major browsers, but there's no padding top in IE8. Any cross-browser solution?
This seems to a bug in older versions of IE, possibly caused by some confusion around the legend element (which is nested inside fieldset but rendered in a special way), so that the padding gets misplaced above the form. I can more or less reproduce the issue on IE 9 in Quirks Mode and in IE 8 and IE 7 emulation mode.
As a workaround, do not set top padding on the fieldset element. Instead, set a top margin on the first normal element inside it (not counting the legend element).
Related
I have a form in HTML as follows:
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
And I have applied simple CSS to the textarea from an external file as follows:
textarea.input-width {
width:800px;
height:200px;
}
I have included the style sheet in the html as:
<link rel="stylesheet" type="text/css" href="styles.css"/>
still the width and height are not being applied to the HTML. I am not a front-end developer, so I am pretty dumb when it comes to HTML and CSS, so please any help is appreciated.
It seems to have an effect when I do that example in local files.
With CSS:
Without CSS:
So I think perhaps your code is fine, and it's just that your website is still cached by your browser. Try reloading with CtrlShiftR or if it works in a different browser.
(This answer should be comment, but I needed a code snippet)
Your CSS and HTML seem correct, if you run the code snippet below you'll see that the styling is actually being applied.
This lets me believe that your stylesheet is not being loaded properly. Can you verify in your devtools that the <link /> tag exists and the styles load properly? You can do this by right clicking on the textarea element and clicking inspect element. You should now see several columns or rows depending on your devtools window orientation which show the HTML and CSS for the selected element. Your CSS code should be visible over there.
textarea.input-width {
width:800px;
height:200px;
}
<form action="CreateArticle.php" method="POST">
<label for="text-input">Title</label>
<br>
<div>
<input class="input" id="text-input" type="text" style="width:800px;"/>
<br>
<label for="textarea">Abstract</label>
<br>
<textarea class="input-width" id="textarea"></textarea>
</div>
</form>
I have to set equal widths to a textbox and a select element.
When I remove the !DOCTYPE both the input fields are set to equal lengths,that is 185px each accordingly.
With DOCTYPE the width of the textbox is slightly more than the select element. If I check its width by javascript with offsetWidth property it is found to be 189px instead of 185px that I have set in my CSS.
The screenshot of the output:-
The code snippet:-
<!DOCTYPE html>
<html>
<style>
.usrInput{width:185px}
</style>
<body>
<div id="content">
<form>
<input type="text" name="fname" id="fname" class="usrInput"/><br/>
<select name="state" id="state" class="usrInput">
<option value="">Select State
</select><br/>
</form>
</div>
</body>
</html>
I think it is the user agent stylesheet that is somehow overriding my own CSS. I don't know actually why is it happening and what should I do to overcome this problem?
If you use
.usrInput {
box-sizing: border-box;
}
the dropdown and the input size will match up.
Edit: Usually you can use a css reset such as normalize.css to automatically take care of little quirks like this.
I just spent some trying to figure out why some form content vanished entirely in IE8 & IE9. After some investigation, it looks like it's the fault of having fieldset set to display:table-column. If I set fieldset to display:table or display:block then everything shows up fine, again.
When testing this html on my IE8 & IE9 virtual machines, I can see only the heading "Not inside a fieldset". If I remove the fieldset styling, I can see both.
Does anyone know why this happens?
<html>
<head>
<style type="text/css">
fieldset
{
display: table-column;
vertical-align: top
}
</style>
</head>
<body>
<form>
<fieldset>
<div class="row">
<h6>Inside a fieldset</h6>
</div>
</fieldset>
<form>
<h6>Not inside a fieldset</h6>
</body>
</html>
The display: table-column means it acts like the <col> tag in HTML. The <col> tag is an invisible element which is used to specify properties of the column like styles etc. It is not the same as <td> (which is display: table-cell).
You should use table-cell instead.
W3C Spec
Source - Random832's answer in this SO Thread
EDIT: table-column still gets displayed in IE 7, FireFox 24, Chrome and Opera 15. It doesn't work in IE 8, 9 and 10.
All elements are default positioned to vertically top. You need not to write any extra code. I believe below code should suffice:
<html>
<head>
<style type="text/css">
fieldset
{
height: 50px; /*************** Not Required, Just to show what I mean by my sentence mentioned above :) ****************/
}
h6,div {
margin: 0; padding:0;
}
</style>
</head>
<body>
<form>
<fieldset>
<div class="row">
<h6>Inside a fieldset</h6>
</div>
</fieldset>
<form>
<h6>Not inside a fieldset</h6>
</body>
</html>
I'm trying to make radio buttons look the same in both IE and Firefox.
I have the following example:
<head>
<style media="screen" type="text/css">
html, body, div, form {
margin: 0;
padding: 0;
}
input{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<span style="font-family:Arial; color:#000000; font-size:8pt;">
<input type="radio" name="blah" value="7">MyWord<br>
</span>
</body>
In IE the radio button has an extra white space where the margin should be 0. So the text, which should be really close to the radio, is not.
I know I that if I use the DOCTYPE statement it works, but due to other problems, I can't use it.
Is there any other way to fix this problem?
Set the width of the radio button element to a sufficiently small value:
<input type="radio" name="blah" value="7" style="width: 13px">
The spacing you see is neither padding nor margin but part of the rendering of the radio button (as you can see if you press F12 in IE, then find the element under “HTML” and look at the layout description—the element).
It seems that browsers generally implement radio buttons and checkboxes as 13 × 13 pixels (in total dimensions), except IE in Quirks Mode, which uses 20 × 20, unless the dimensions are set otherwise in CSS.
I'm trying to write a contact form however my label widths aren't being forced in Firefox or Chrome - IE seems to be working okay though (for once). Here's my HTML
<form name="" id="" action="" method="post">
<div id="my_form">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<form>
and here's my CSS
#my_form div label{width:200px;display:inline-block;}
any ideas how I can force the label width, they seem to collapse
Try this:
#my_form div label{width:200px; display:block; float:left;}
See this running (http://jsfiddle.net/jrpab/), it works fine in Chrome.
try:
#my_form label{width:200px;display:block; clear:left; float:left; }
#my_form input{display:block; float:left; width:auto;}
After some head-scratching and research, I've found it's because
labels are inline elements, which according to CSS documentation
should ignore width styling. So, as usual, IE is doing it wrong and
Chrome and Firefox are doing it right.
...
set its display property to something other than inline. I've found display: inline-block is the best for achieving what you're going for.
http://doctype.com/firefox-chrome-ignore-widths-my-labels