Packing input fields on one line, and IE8

Hi,
I use the following code to pack several short input fields on a line:

<?php $classnames = array ('B','G','R','Y','1G','1H','2H','2M','3G', '3M','4B','4C','5B','5S','6A','6S'); ?>
...
<?php foreach ($classnames as $label) { ?>
<div  class="form_item">
   <div class="form_element cf_textbox">
      <label style="display: block; width: 40px;" class="cf_label"><?php echo $label; ?></label>
      <input class="cf_inputbox validate-number" maxlength="5" size="5" id=<?php echo $label; ?> name=<?php echo $label; ?> title='' type="text"> 
   </div>   
</div>
<?php } ?>
<div class="cfclear"> </div>

It works with Firefox, IE7, etc but IE8 shows 1 field per line, exactly as if there was a cfclear div after each field.
I tried moving the form_item div outside of the php loop so that all input fields are within a single div with no noticeable effect.

Any suggestions?
Thanks,

jb

Hi Jbudd,

IE seems to take line-breaks between tags literally, try running your tags together (if you need breaks to make the code legible put them between attributes instead of tags

<?php $classnames = array ('B','G','R','Y','1G','1H','2H','2M','3G', '3M','4B','4C','5B','5S','6A','6S'); ?>
...
<?php foreach ($classnames as $label) { ?>
<div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label"><?php echo $label; ?></label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=<?php echo $label; ?> name=<?php echo $label; ?> title='' type="text"></div></div>
<?php } ?>
<div class="cfclear"> </div>

Bob

Hi Bob,
I tried that, it made no difference. 😟


[attachment=1]ff.jpg[/attachment][attachment=0]ie8.jpg[/attachment]

In fact forcing everything into one line like this makes no difference either

<?php foreach ($classnames as $label) { 
printf ("%s", '<div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">' . $label . '</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=' . $label . ' name=' . $label . ' title="" type="text"></div></div>'); 
} ?>

<div class="cfclear"> </div>
<div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">B</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=B name=B title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">G</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=G name=G title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">R</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=R name=R title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">Y</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=Y name=Y title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">1G</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=1G name=1G title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">1H</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=1H name=1H title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">2H</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=2H name=2H title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">2M</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=2M name=2M title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">3G</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=3G name=3G title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">3M</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=3M name=3M title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">4B</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=4B name=4B title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">4C</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=4C name=4C title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">5B</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=5B name=5B title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">5S</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=5S name=5S title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">6A</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=6A name=6A title="" type="text"></div></div><div  class="form_item"><div class="form_element cf_textbox"><label style="display: block; width: 40px;" class="cf_label">6S</label> <input class="cf_inputbox validate-number" maxlength="5" size="5" id=6S name=6S title="" type="text"></div></div><div class="cfclear"> </div>

EDIT - I think this must be something in the css - could it be to do with display:block?

Hi jbudd,

Yes it could, I missed that, 'block' makes the <label> equivalent to a <div> or <p>

Bob