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

  • Rado



    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:

    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.
    // 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; } td { border-bottom: 1px dashed #<?php echo $shout_opt['fade_from']; ?>; padding: 2px; } td, 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Pierre_02


    Hi Jonny,

    this “space” is due to the hidden fields ;)…
    This is where i investigate if i was you.

    PS. I don’t know the statistic of numbers of IE6/7 users but they shouldn’t be too numerous, so…





    Hi Pierre, not so sure about that, even if i remove all the code containing the hidden fields (just as a test) i still get the spacers in IE, i can’t figure it out…

    As for users, yeah i have a website which i was gonna use this shoutbox on and believe it or not but atleast 15% of the users are using IE6-7 if not more.

    God i hate explorer, it really sucks balls. I wish there was a code to implement to replace the shoutbox with a text saying “install a better browser” , maybe there is? 😛



    Found a solution to get it to semi work, in css.php

    #chatInput { }

    change to

    #chatInput { overflow: hidden; height:30px; }

    Not a good fix, Send button is still 1 pixel smaller on IE8,CROME,OPERA compared to Firefox which is really annoying, if i increase it 1pixel it becomes 1 pixel to large in firefox, gah..

    Is there a way to force these 2 fields to always be the same height?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: Pierre's Wordspew] CSS Problem. Weird gaps below message box & submit in IE6/7 and’ is closed to new replies.