[Plugin: Pierre's Wordspew] CSS Problem. Weird gaps below message box & submit in IE6/7 and

Hi,

I am hoping for some CSS guru to be able to help me here, i am going insane, no matter what i try i can’t get these forms to look perfect in all browsers (crome, ff, opera, ie6,7,8) each change makes different changes to all the browsers.

Here is a screenshot of how i want it to look, this is how it looks in firefox. Firefox Screenshot

This looks real neat, but then we check in Crome and Opera, and IE8 there’s a slight change to the send button, see screenshot: IE8 / Crome / Opera Screenshot

(If you can’t see the different the send box boarder is 1 pixel smaller then on firefox.)

This is not a big deal, 1 pixel here and there. But now we check IE6/7:
IE 6 and 7 Screenshot

You can see a huge gap between the shoutbox and the other menu that comes below the message box and send button, where the hell does these come from?

I gotta say, this css business is really frustrating attempting to get something right only to have my hopes crushed when i view it in explorer makes me mad!

Here is the CSS code:

<?php
/*
This file is php so that admins can control its look without editing the code.
The headers below tell the browser to cache the file and also tell the browser it is css.
*/
require('../../../wp-config.php');
// expire every 30 days
$offset = 60*60*24*30;
$ExpStr = gmdate("D, d M Y H:i:s",time() + $offset)." GMT";
$last_modified_time = gmdate("D, d M Y H:i:s",filemtime($_SERVER['SCRIPT_FILENAME']))." GMT";

header("Last-Modified: ".$last_modified_time);
header("Cache-Control: max-age=".$offset.", must-revalidate");
header("Pragma: private");
header("Expires: ".$ExpStr);
header('Content-Type: text/css');

$shout_opt = get_option('shoutbox_options');
?>
/* This file controls the look of the Live shoutbox... */

#chatoutput {
height: 300px;
/* width: 172px; */

/* Horizontal Scrollbar Killer */
padding: 6px 8px; 

/* Borders */
border: 1px solid #363430;
border-width: 1px 1px;
-moz-border-radius : 0px 0px 0px 0px;

font: 11px helvetica, arial, sans-serif;
color: #<?php echo $shout_opt['text_color']; ?>;
background: #<?php echo $shout_opt['fade_to']; ?>;
overflow: auto;
margin-top: 10px;
}

#chatoutput span { font-size: 9pt; color: #<?php echo $shout_opt['name_color']; ?>; }
#chatForm label, #shoutboxAdmin { display: block; margin: 4px 0; }
#chatoutput li a { font-style: normal; font-weight: bold; color: #<?php echo $shout_opt['name_color']; ?> }

/* User names with links */
#chatoutput li span a { font-weight: normal; display: inline !important; border-bottom: 1px dotted #<?php echo $shout_opt['name_color']; ?> }

#chatForm input[type="hidden"] { border: 0; padding: 0; margin: 0; }
#chatForm input, #chatForm textarea, #chatForm #shoutboxOp, #shout_theme { width: 145px; margin: 0px auto; }
#chatForm textarea { width: 145Px; }
#chatForm input#submitchat { width: 40px; margin: 0px auto; padding: 4px; }
#chatoutput ul#outputList { padding: 0; position: static; margin: 0; }
#chatoutput ul#outputList li { padding: 4px; margin: 0; color: #<?php echo $shout_opt['text_color']; ?>; background: none; font-size: 1em; list-style: none; min-height: <?php echo $shout_opt['avatar_size']; ?>px; }

/* No bullets from Kubrick et al. */
#chatoutput ul#outputList li:before { content: ''; }

ul#outputList li:first-line { line-height: 16px; }
#lastMessage { padding-bottom: 2px; text-align: center; border-bottom: 2px dotted #<?php echo $shout_opt['fade_from']; ?>; }
div#responseTime { display: inline; }
#chatoutput .wp-smiley { vertical-align: middle; }

#JalSound { margin: 0 -16px 0 0; cursor: pointer; float: left; width: 16px; height: 16px; }
#usersOnline { color: #<?php echo $shout_opt['name_color']; ?>; font-size: 9px; text-align: center; }
#chatInput { }
#SmileyList a img { margin-top: 4px; }
#Show_Spam { text-align: center; color: red; }

#wordspew .delShout { cursor: pointer; color:red; font-weight: bold; margin-left: 4px; }
.shoutbox_archive { margin: 20px; text-align: left; }
.shoutbox_archive .header { background: #000; color: #fff; height: 30px;}
table#wordspew { -moz-border-radius: 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: #fff; padding: 6px; color: #000; }
.msg { width: 70%; }
.name { white-space: nowrap; }
.date, .IP { text-align: center; }
.alternate { background-color: #f8f8f8; }
.goback { float: right; margin: 5px; }
#chatoutput li span.jal_user, #chatoutput li span.jal_user a, td span.jal_user { font-weight: bold;  }
.ps_left { float: left; margin-right: 2px; }
.ps_right { float: right; margin-left: 2px; }

tr.bg td { border-bottom: 1px dashed #<?php echo $shout_opt['fade_from']; ?>; padding: 2px; }
tr.bg:hover td, tr.bg:hover td a { background: #<?php echo $shout_opt['name_color']; ?>; color: #<?php echo $shout_opt['fade_to']; ?>; }
#chatoutput .InfoUser, .InfoUser { color: red; font-size: xx-small; }

And here is the layout in php (which i think might be related?):

<?php if ($Captcha==1) { ?>
    <div id="shoutbox_captcha">
    <label><?php _e('Captcha',wordspew); ?>:</label> <select name="shoutboxOp" id="shoutboxOp"
    onchange="MasqueSelect()" onclick="MasqueSelect()">
    <option value="-3"><?php echo $rand1."+".$rand2."="; ?></option>
    <?php for ($i = 0; $i < 21; $i++) {
    echo '<option value="'.$i.'">'.$i.'</option>';
    }
    echo '</select></div>';
    }
    else { ?>
        <input type="hidden" name="shoutboxOp" id="shoutboxOp" value="<?php echo $total; ?>"/>
    <?php } ?>
    <label for="shoutboxname"><?php _e('',wordspew); ?></label>
    <input type="text" name="shoutboxname" style="display: none" id="shoutboxname" value="<?php echo $display_name; ?>" onfocus="Old_Sname=this.value;this.value='';"/>
    <label for="shoutboxU"<?php if (!$use_url) echo ' style="display: none"'; ?>><?php _e('URL/Email',wordspew); ?>:</label>
    <input type="text" name="shoutboxU" id="shoutboxU" value="<?php if ($use_url) echo $_COOKIE['jalUrl']; ?>"<?php
    if (!$use_url) echo ' style="display: none"'; ?>/>
    <?php  } echo "\n"; ?>
    <label for="chatbarText"><?php _e('',wordspew) ?></label>
    <?php if ($use_textarea) { ?>
    <textarea rows="4" cols="16" name="chatbarText" id="chatbarText" onkeypress="return pressedEnter(this,event);"></textarea>
    <?php } else { ?>
    <input type="text" name="chatbarText" id="chatbarText" onkeypress="return pressedEnter(this,event);"/>
            <input type="submit" id="submitchat" name="submit" value="<?php _e('Send',wordspew);?>"/>

    <?php } ?>
    <input type="hidden" id="jal_lastID" value="<?php echo $lastID + 1; ?>" name="jal_lastID"/>

    <?php echo $combo; ?>
    <input type="hidden" name="shout_no_js" value="true"/>
    <input type="hidden" name="tb" value="<?php echo $shout_tb; ?>"/></form>
<?php }

If you have any ideas, it’s highly appreciated.