At least at the moment, having such cross browser issues,
are almost always caused by having bad/invalid/incorrect HTML, even though having correct HTML you can still have layout issues (lose lose, right?).
this script will generate the code that way only for a preview,
But you did try to click one of the checkboxes?? Are people viewing the preview just need a visual representation or is it also supposed to Do Stuff? if it’s the latter you’ll still want to have it created correctly simply because, in the end, it will (I swear) be less work for you regarding CSS and JS.
The reason there are spans ps and anchors is because they have ways to move the fields up and down the form, remove them or group them inside a field set; so I can´t remove them just to make it syntactically correct.
You can do this with regular form elements, and if you need to group more things (like, if you need to group the checkbox/span pair) you are allowed to use p’s or divs around those (I agree with Crusty that p’s aren’t the best element to use but what’s a developer to do when the W3C specs themselves show p’s as wrappers in forms?).
At least at the moment, having such cross browser issues, trying to make things appear the way you want them and make things do what you want them to do is a pain and have to find a way around them, I might not be right but I just don´t have a way to follow all standards, don´t know of it or have not figure it out, I might need more experience
Let’s do this.
First, we’d like to know what this “preview” is supposed to look like, and then what it’s supposed to do.
Then, we can help you write valid code that will create the same DOM in all browsers. Once everyone is rendering the same DOM the CSS styling will be working for everyone (likely something thuper thpecial will have to be done for our thuper thpecial friend, IE).
<input type="checkbox" checked="checked" value="option_1" name="cbgroup">
<span>This is label 1</span>
<input type="checkbox" checked="checked" value="option_2" name="cbgroup">
<span>This is label 2</span>
<input type="checkbox" checked="checked" value="option_3" name="cbgroup">
<span>This is label 3</span>
<input type="checkbox" checked="checked" value="etc" name="cbgroup">
<span>This is etc label</span>
<a class="button_remove buttons" onclick="remove_field(this);return false;" href="#">
<a class="button_up buttons" onclick="move_field(this, 'previous');return false;" href="#">
<a class="button_down buttons" onclick="move_field(this, 'next');return false;" href="#">
<span class="checkbox checkbox_u" onmousedown="checked_(this);"></span>
What do each of those buttons do? (or, what are they exactly supposed to do?) Is someone supposed to check all applicable checkboxes and then choose one of the buttons? If they click Move down or up, does the whole label you have get moved somewhere else? Or just some of the checkboxes??
If we know what’s supposed to happen then we can show you the kind of markup your JS is supposed to create, but yeah you will need to rewrite your JS and CSS, for the reasons I listed above (that you’ll need 5 times the code to get multiple DOMs to look like they are the same).