Problems using checkbox within a table.

  • Thread starter Thread starter Daz
  • Start date Start date
D

Daz

Hello everyone. I am not sure where best to post this, but as I believe
it's an issue with IE, I posted here.

I have a table full of rows, and each row contains some text and a
checkbox. For some reason, When I add the checkbox, the hight of the
row doubles in size. It could even triple in height, I am not sure, but
it looks rediculous. When I remove it, it's fine. Also, my table looks
fine in Firefox.

Could anyone suggest a solution as to how to get around the problem? If
I have to use text instead of a checkbox, then so be it, but I'd rather
not.

Many thanks.

Daz.
 
Hi Daz,

Try setting the height of each of your table rows or place   before
your checkboxes in the table rows.

Regards.
 
Rob said:
Hi Daz,

Try setting the height of each of your table rows or place   before
your checkboxes in the table rows.

Regards.
Click to expand...

Rob, thanks for the reply. Unfortunately this doesn't seem to be
working. I can make the row higher, but when I try to make it shorter,
it just doesn't seem to do anything. I have even tried removing the
checkbox padding, and margin. Still to no avail...
 
Hi Daz,

Did you try the   (non-blank space) at the start of the table cell

ie.
<td>&nbsp;<input type=checkbox... etc

What about the cell wrapping attributes of the cells?

Regards.
 
Rob said:
Hi Daz,

Did you try the &nbsp; (non-blank space) at the start of the table cell
Click to expand...
Sorry, from your past post, I didn't quite understand what you meant I
thought you'd missed a word out. I have tried as you suggested, and it
seems to vertically center the checkbox better, but the row hieght is
still hideously big, and bigger than it was before.
ie.
<td>&nbsp;<input type=checkbox... etc

What about the cell wrapping attributes of the cells?
Click to expand...
Please could you give an example? Do you mean, with regards to
cellpadding, margin, spacing etc...?
If so, then yes, I believe I have tried just about every possibility.

Here is a snippet of the HTML code generated from my PHP script. I have
stripped out most of the crap such as CSS. Hopefully, you will
immediately spot what is wrong. It's probably something I am not
understanding. I just don't understand why Microsoft insist on doing
things differently from everyone else...
 
Daz said:
Hello everyone. I am not sure where best to post this, but as I believe
it's an issue with IE, I posted here.
Click to expand...

Good news!

The problem isn't with the checkbox as such, it's more to do with the
checkbox being inside a form. IE adds the padding to the actual form
itself. We can fix this with CSS (Cascading Style Sheets). Below is a
little information which I hope might be useful to anyone else who's
experienced the same problem.

You can simply add:

<style>
form {
margin:0px;
padding:0px;
}
</style>

to between the <head></head> elements on your html source. Please note
that this will be applied to ALL forms on the page. You will need to
use a CSS class like this:

<style>
form.fixme {
margin:0px;
padding:0px;
}
</style>
and again, place it in between the <head></head> elements in your HTML
source, and then call upon that css class from with you form like so:

<form class='fixme' method='post' action='somepage.php'>
<input type='checkbox' />
</form>

Note that the class in this instance is called 'fixme', which can be
changed to suit your own tastes. If you don't put it into your form,
then the form will not use it.

or you can use a CSS style within your form like this:

<form style='margin:0px;padding:0px;' method='post'
action='somepage.php'>
<input type='checkbox' />
</form>

Yes, it's an ugly hack, but it works!
 
Rob said:
Hi Daz,

Did you try the &nbsp; (non-blank space) at the start of the table cell

ie.
<td>&nbsp;<input type=checkbox... etc

What about the cell wrapping attributes of the cells?

Regards.
Click to expand...

Thank you very much for your help Rob, I really appreciate it.

Please see my solution below if you are interested in how to fix the
problem

I think another alternative (and probably my favorite fix), would be to
just ban IE. Hehe.
 
Good news!

The problem isn't with the checkbox as such, it's more to do with the
checkbox being inside a form. IE adds the padding to the actual form
itself. We can fix this with CSS (Cascading Style Sheets). Below is a
little information which I hope might be useful to anyone else who's
experienced the same problem.

You can simply add:

<style>
form {
margin:0px;
padding:0px;
}
</style>

to between the <head></head> elements on your html source. Please note
that this will be applied to ALL forms on the page. You will need to
use a CSS class like this:

<style>
form.fixme {
margin:0px;
padding:0px;
}
</style>
and again, place it in between the <head></head> elements in your HTML
source, and then call upon that css class from with you form like so:

<form class='fixme' method='post' action='somepage.php'>
<input type='checkbox' />
</form>

Note that the class in this instance is called 'fixme', which can be
changed to suit your own tastes. If you don't put it into your form,
then the form will not use it.

or you can use a CSS style within your form like this:

<form style='margin:0px;padding:0px;' method='post'
action='somepage.php'>
<input type='checkbox' />
</form>

Yes, it's an ugly hack, but it works!
 
Back
Top