Padding with IE and Opera

There's a problem with check boxes on one of my sites which has been bugging me for months. In Firefox and Safari, the sight displays as expected (on the right), but in IE and Opera, it adds padding to the left of check and radio boxes (see the left). I've tried changing floats, margins and padding and nothing seems to work. The CSS is visible at http://izeit.nu/releases/current/index.php (this particular dialog is available by clicking 'Personalise' in the menu bar).



I'd really appreciate any help.

 

Okay, you are using divs. My guess is you need to clear your floats between one or more of the divs.

Just learning about this so I won't be a lot of help. Seach for brclear or maybe <brclear>.

 

Ah yes, I've had this too with input boxes : ) The next float goes in the length of the above label. After putting borders around to see what was going on, I saw that my line-height was part of the problem.
I made them smaller and set the width of the form container in such a way that forced them to the left. In one form I made, only Opera (and not IE or anyone else) did not set up right, and setting invisible borders somehow miraculously cured it.

However, what most normal people do:

Write the form html like this:

<form (get or post whatever>
<fieldset>
<legend>Fill In Our Form</legend>
<div>
<label for="name">Fill in your name</label>
<input type="text" id="name" blah blah extra stuff />
</div>

<div>
<label... /label>
<input... />
</div>

Code (markup):

CSS:

form {
form stuff
}
form div {
clear:left;
}
form label {
float: left;
}

Code (markup):

So, the labels and inputs are grouped with divs, which puts these two inline elements into a block element, and also contains the "clear the float above me" instruction.

If this works, it may still not work in Opera. If not, try making borders around the labels which are in your case white, so you don't see them.

I assume I'm doing some bad positioning if I need borders to straighten things, so maybe just giving everything an extra 1px padding might've done the job instead.

Let us know if this works.


Edit-- duh, now looked at your code. Dunno how it's valid, but you've got your inputs inside your labels...??? You do in some places have a lot of divs around around inputs and so you could add css clears to all those.

<div class="checks">
  <div>
  <input type="radio" name="todospan" onclick="makerequest('updatecal','month','1191222000','todospan','main');" value="1week" id="1week" /><label for="1week">1 Week</label>
  </div>
  <div>
  <input type="radio" name="todospan" onclick="makerequest('updatecal','month','1191222000','todospan','main');" value="1month" id="1month" /> <label for="1month">1 Month</label>
  </div>
   <div>
  <input type="radio" name="todospan" onclick="makerequest('updatecal','month','1191222000','todospan','main');" value="6months" id="6months" /><label for="6months">6 Months</label>
  </div>
  <div>
  <input type="radio" name="todospan" onclick="makerequest('updatecal','month','1191222000','todospan','main');" value="1year" id="1year" /><label for="1year">1 Year</label>
  </div>
  <div>
  <input type="radio" name="todospan" onclick="makerequest('updatecal','month','1191222000','todospan','main');" value="all" id="todospanall" checked="checked" /><label for="todospanall">All</label>
  </div>
  <div>
   <input type="checkbox" name="includecompleted" onclick="makerequest('updatecal','month','1191222000','todospan','main');" value="includecompleted" id="includecompleted" checked="checked" /><label for="includecompleted">Include completed tasks</label>
  </div>
  <input type="hidden" name="view" value="month" /><input type="hidden" name="day" value="14" /><input type="hidden" name="month" value="10" /><input type="hidden" name="year" value="2007" />
</div>

Code (markup):

I wouldn't have the Js in the html, but whatever. This is supposed to set your labels after your checks and radios like you want. It's also crazy on divs. : (

Here's a website with some info:
http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/
There's two other pages with this, intermediate and advance.

 

Invisible borders!

I never thought that would work but you were right, everything looks fine now. Thanks a lot for your help.

 

There's no need to. Just add clear: (direction); (where direction is either left, right, or both, depending on how the element above it is being floated) prior to the float property and you'll be fine.

selector {
    clear: left;
    float: left;
    width: 123px;
}

Code (markup):

What this will do is clear the previous float (which doesn't exist the first time around so it gets ignored) and then will float the element again, this time from its proper position.

 

I was floating my labels, and clearing with the divs (I might've seen that in a book somewhere, otherwise I'd never have so many little divvies). Is it then just better and easier to float the divs instead?

Also, why did the borders work for Opera? I tried the adding 2px padding thing in the borders' place and it didn't work, and I have no idea what Opera thinks of borders (part of padding? between padding and margin? part of margin?).

*Edit, now that I went back to look, I had added line-height: 150%; which apparently took care of the problem because the borders were gone (haven't worked on this site in like 2 weeks). The line-height of the labels made sure there was nothing sticking out for the following floats to bump up against. So the floats go all the way to the left like I wanted.