Hi I'm sure someone can get to the bottom of this but as the saying goes 'I can't see the wood for the trees' I want to add a radio button to a form but in IE7 it adds a huge gap on every button. Example here: http://www.triumphracing.co.uk/news_test.html Thanks in advance. CW
While I'm not seeing what you mean on the radio buttons, the absurdly undersized label text is an accessability issue, and on large fonts/120dpi in both Opera and IE your input boxes are blowing out of their containers.
try adding the following css: #formside p { padding:0; margin:0; float:left; } .radiobutton { padding:0; margin:0; } Code (markup): Then try putting a class on the radio buttons, eg: <input type="radio" class="radiobutton" name="whereheard" value="Google" /> Google<br /> HTML: does that work? hope it helps
First, validate it. Your form is kinda screwy, and certainly doesn't belong with your Doctype. You are missing tags etc. You never know when a browser is going to let something like that pass (as FireFox is doing) or not. I don't have IE7 right now, but I have fake IE6 4 Linux... Wow those sure are pushed out there. What, it's doubling the length of your sidebar? First, get a valid form. I wouldn't put <p>s around everything. Not needed. <form action="whatever" method="whatever"> <need a block element thing here, either a fieldset or a div or something--BEFORE the hidden inputs. Nothing inline like an input may be a direct child of Form> ...however it's not a bad idea to wrap the label-input pairs in something. You could keep using the <p> to do it but it's got a line-height of 130% in your CSS... <div> <lable for="blah">Blah:</label> <input.... blah.... /> </div> etc... When it gets to the radios, you could have them wrapped in their own div, which you would use to make sure the styles used for the part above don't affect the radio-label area (you usually want the default styling for those). <div class="checkradio"> <div> <input type="radio"... /><label for="blah">Blah</label> </div> <div> <input type="radio"... /><label for="blah">Blah</label> </div> etc... </div> It may look like a lot of extra divs but it lets you style these things in pairs which usually you want (and in this case, you want it also). I call the div checkradio because its stylings are also what I usually want for checkboxes too. But all this is afterwards, cause I'll bet some missing tag is making IE think there's something extra there that really isn't. Fixing the HTML might fix the form entirely, in which case, you don't have to mess with the CSS.