Here is the code: jsFiddle
It looks properly in Chrome (radiobuttons are OK although 3 of 6 radiobuttons are left to the left border of browser), but looks completely different in Firefox (the radiobuttons in Firefox are messed).
How to fix the problem with css styles? The styles are taken from twitter bootstrap so they could be overrided only.
Also, html can’t be touched if possible, only css.
Is that a crossbrowser bug? What’s the reason it looks completely different?
The full code is here:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
label
{
display : block;
margin-bottom : 5px
}
.radio input[type="radio"], .checkbox input[type="checkbox"]
{
float : left;
margin-left : -18px
}
</style>
</head>
<body>
<div style="border:1px solid red; ">
<label class="radio">
<input name="count" value="A" type="radio">
A </label>
<label class="radio">
<input name="count" value="B" type="radio">
B </label>
<label class="radio" style="border:1px solid blue;">
<input name="count" value="C" type="radio">
C </label>
</div>
<div style="margin-left: 300px; margin-top: -70px;">
<label class="radio">
<input name="count2" value="D" type="radio">
D </label>
<label class="radio">
<input name="count2" value="E" type="radio">
E </label>
<label class="radio">
<input name="count2" value="F" type="radio">
F </label>
</div>
</body>
</html>
The problem is your float.
Remove the float left from