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.
Related
I have the following code:
<html>
<head>
<style>
input {
/* line-height: 1.6em; */ /* doesn't seem to make any difference */
height: 1.6em;
}
</style>
</head>
<body>
<form action="foo" method="POST" enctype="multipart/form-data">
<label>First Name:</label> <input type="text" value=""/>
</form>
</body>
</html>
When I place the code in a file in my filesystem or in a JBoss server and I navigate to it, Firefox 57.0.3 does not rendered the text input field tall enough resulting in the descenders of all letters being clipped:
Chrome renders it just fine.
Curiously, the jsfiddle is rendered properly from both Chrome and Firefox.
What am I doing wrong and why can't I reproduce this in the jsfiddle?
I would assume that height of even 1em should be sufficient, let alone 1.6em.
This is probably due to a combination of the font, and a smaller-than-default height value. On my system, the default font size is 13.3333px and the default (computed) height is 23px. This is a ratio of ~1.725, which is slightly higher than your 1.6em.
1em height isn't enough, because there is a border and padding involved to draw the input field. See the box model below:
You're not able to reproduce it in jsfiddle due to the CSS normalisation that is active by default.
The input tag renders properly in every browser except
ie11. In ie, it occupies vertical space which I am unable to override with,
for example,
<input type='range' style='height: 20px' />
None of the canned css cross browser generators are successful in getting
rid of the default vertical space that the input tag takes up in ie11. My
project requires many stacked sliders, and I would like a solution that is
cross browser independent. Can you help?
In ie11, the input type=range tag is displayed with default
padding. Remove the padding when the tag is styled, for example,
<input type="range" style="padding: 0px 0px 0px 0px; height: 20px" />
Be sure that the track and thumb 'fit' in the desired height.
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>
The below is in style sheet
select,input ,td a {border:1px solid green; width:25%;height:25px;font-size:20px;margin- left:.1em;}
input.myradio {border:none;width:0%;height:0%;font-size:0%;}
The below is in html
<td><input class="myradio" type="radio" name="poolstatus" value="Add">Add</input><td>
It's perfect in firefox but chrome and IE are not showing radio buttons? Why so?
It's because you have told the radio button to be 0% tall - which is 0px - which is not there.
You can override this by telling the height and width to be 'auto' which will reset them (unless there's a rule which is more specific somewhere else in the stylesheet)
input.myradio {
border:none;
width:auto;
height:auto;
}
My guess is the "width:0%;height:0%" in your input.myradio class. you need a width and height.
Try this:
input.myradio {border:none;width:1em;height:1em;}
Why do you have a height and width specified of 0% for them? I'm guessing that is why IE and Chrome are not showing the radio button,s because they have a size of 0 pixels.
You need to put your radio button within <form> tag and they will appear in Chrome and IE:
<form><input type="radio" /></form>
The following Html works great for me in FireFox or IE7/8 (with or without the Style Tag)
<!-- Deliberately no DocType to induce Quirks Mode -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
Input.quirks
{
margin: 1px 0px 1px 0px;
border: solid black 1px;
}
</style>
</head>
<body>
Should work in Quirks Mode <br />
<input class="quirks" type="text" style="width: 300px;" /><br />
<input class="quirks" type="text" style="width: 147px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" maxlength="25" style="width: 150px;" /><br />
<input class="quirks" type="text" style="width: 94px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" style="width: 100px;" /><img src="./Graphics/SpacerPixel.gif" border="0" /><input class="quirks" type="text" value="DA8 1DE" style="width: 100px;" />
</body>
</html>
However I am told that the absence of a DocType at the top of said HTML is causing both both browsers to work in "Quirks" mode.
I am told this is bad.
I have tried several DocTypes but have not found a DocType/HTML combination which yields a correct rendering in both browsers.
Anything other than "Quirks" mode causes the browsers to react differently to the attempt to set the width of a textbox. This seems to lead to a position where I can correct my instructions for either FF or IE and suddenly the other will fail.
Some detail...
1.> The objective here is that the 3 rows should appear to be the same width exactly when rendered in each browser. It is not nessecary that the rendered widths are the same across browsers, merely that they appear correctly justified/alighned inside each browser.
2.> The image referenced is a spacer image 3 pixels wide and 1 high (an alternative to this would also be good)
3.> I do not want to introduce tables if at all possible.
It seems as though the Quirks mode is the only mode which is consistent across the browsers. I am worried however that the final version of IE8 or indeed in some future browser, the quirks mode will not be the default.
What should I do ? How do specify a DocType (and maybe alter my html) which will create a consistent look across browsers?
The main difference between "Quirks" and "Standards Compliance" mode is a different "box model" which results in different ways of calculating sizes based on width/height, padding, margin and border settings. In Standard Compliance mode, the effective width and height of a box is calculated by adding all these parameters (please search the web for more details).
So, since you specify a 1px-border, your first input fields will be 302px wide (300px + 2*1px for the border left and right). The inconsistency between FF and IE you mentioned may be caused by different "default values" for the "padding" setting. I just tested your code with a DOCTYPE and no padding for the input fields -- both browsers rendered it the same way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now, for the spacer images: Don't use them. You don't need them. Just use a right-margin of "3px" for the input fields for the gap.
input.quirks {
margin: 1px 3px 1px 0px; /* 3px right margin */
border: solid black 1px;
padding: 0px; /* so that IE and FF use the same padding */
}
Then do the math to determine the correct "width" settings so that the sum of all widths (includung padding, border and margin!) in each row are equal, for example:
300px + 5px = 305px
145px + 150px + 2*5px = 305px
90px + 100px + 100px + 3*5px = 305px
Notice that "5px" consists of the 3px-right-margin and 2 times the border (1px).
There you go. If you want to use a different padding for a nicer look-and-feel, just include it in your calculations!
Since your problem was mostly caused by different default values in IE and Firefox, you may be interested in a Reset CSS stylesheet, which includes values for things like padding, effectively clearing the defaults for every browser so that they all render similarly.