Site Reference Forums

AccidentalMommy · 2008-05-08 14:09:03

When I view the comments on a post in Firefox, everthing is just as I want it. When I view them in IE the first comment (and just the first) does not appear to have padding at the top but no amount of trial and error has been able to fix it.

Is there any one who knows what's causing this and how to fix it?

here's a post, you can scroll down and see the issue: http://accidentalmommies.com/2008/05/03 … y-contest/

here is my comments template:

Code: php

post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH

 != $post->post_password) : ?>

<p><?php _e('Enter your password to view comments.'); ?></p>

<?php return; endif; ?>





<?php if ( comments_open() ) : ?>

<dl id="comments-block">

<dd style="margin: 0px; padding: 0px;">

<p style="margin: 0px; margin-bottom: 1em; padding: 0px;"><b><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?> so far</b>

<?php else : // If there are no comments yet ?>

<?php endif; ?>

<?php if ( comments_open() ) : ?><br /> 

<a href="#postcomment" title="<?php _e("Leave a comment"); ?>">Leave a comment</a></p>

</dd>

</dl>

<?php endif; ?>

<a name="comments"></a>

<?php if ( $comments ) : ?>



<?php $myvar=0; ?>

<?php foreach ($comments as $comment) : ?>

<?php $myvar++; ?>

<?php if ($myvar == 1) {$swap = "background-color: #f1f1f1; padding: 5px;";} ?>

<a name="comment-<?php comment_ID() ?>"></a> 

<?php if (function_exists('gravatar')) { ?><a href="http://www.gravatar.com/" title="What is this?"><img src="<?php gravatar("X", 50, ""); ?>" class="gravatar" alt="Gravatar Icon" Align="left" hspace="5"and vspace="5"/></a><?php } ?>

<div class="commentBox" style="<?php echo $swap; ?>">



<?php comment_text() ?>



<p class="post-footer" style="margin-bottom: 0px; padding-bottom: 0px;"><em>By <?php comment_author_link() ?> on <?php comment_date('m.d.y') ?> <?php comment_time() ?> <?php edit_comment_link(__("e"), ''); ?> | <a href="#comment-<?php comment_ID() ?>">Permalink</a></em></p>

</div>

<p></p>

<?php if ($myvar == 1) {$myvar = -1; $swap = "background-color: #E5E5E5; padding: 5px;";} ?>

<?php endforeach; ?>







<div class="right"><?php comments_rss_link(__('<abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.')); ?></div> 

<?php else : // If there are no comments yet ?>

<?php endif; ?>





<?php if ( pings_open() ) : ?>

        <a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Uniform Resource Identifier">URI</abbr>'); ?></a>

<?php endif; ?>



<br /><br />



<a name="postcomment"></a>

<?php if ( comments_open() ) : ?>

<b><?php _e('Leave a comment'); ?></b><br />

<?php _e("Line and paragraph breaks automatic, EMAIL ADDRESS IS NOT DISPLAYED, <acronym title=\"Hypertext Markup Language\">HTML</acronym> allowed:"); ?> <code><?php echo allowed_tags(); ?></code>



<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">



        <p>

          <input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="15" tabindex="1" />

           <label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?>

        <input type="hidden" name="comment_post_ID" value="<?php echo $post->ID; ?>" />

        <input type="hidden" name="redirect_to" value="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>" />

        </p>



        <p>

          <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="15" tabindex="2" />

           <label for="email"><?php _e('E-mail'); ?></label> <?php if ($req) _e('(required)'); ?>

        </p>



        <p>

          <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="15" tabindex="3" />

           <label for="url"><?php _e('<acronym title="Uniform Resource Identifier">URI</acronym>'); ?></label>

        </p>



        <p>

          <label for="comment"><?php _e('Your Comment'); ?></label>

        <br />

          <textarea name="comment" style="border: 1px solid #000;" id="comment" cols="30" rows="9" tabindex="4"></textarea>

        </p>







        <p>

          <input name="submit" id="submit" type="submit" tabindex="5" value="<?php _e('Say It!'); ?>" />

        </p>

        <?php do_action('comment_form', $post->ID); ?>

</form>



<?php else : // Comments are closed ?>



<?php endif; ?>



]

Here is my stylesheet:

Code: css

/*<body>



Theme Name: AM3

Author: Teresa Jones modified by Kim

Theme URI: http://scribblescratch.com/themes

Description: 3 column theme using shades of blue and green.

Version: 1.0



-----------------------------------------------

Illustrations for this theme were created by

and are copyrighted to Teresa Jones of

http://scribblescratch.com and are not

permitted to be used elsewhere.  If you

wish to use them in a location outside of the

purpose they are intended, feel free to contact

me, Teresa Jones.

----------------------------------------------- */

#wrapper {

width: 1010px;

margin: 0 auto;

background: url(/wp-content/themes/AM3/bodybg.png) top center;

}



#masthead {

width: 1010px;

height: 222px;

margin:0 auto;

background-image: url(/wp-content/themes/AM3/header.png);

background-repeat: no-repeat;

color: #656D79; 

}



#menu {

margin:0 auto;

padding-top: 12px;

padding-bottom: 15px;

padding-right: 15px;

padding-left: 25px;

text-align: left;

font-family: Arial, Comic Sans MS, 'Times New Roman', serif; 

font-size: .89em; /* top menu font percentage */

vertical-align: bottom;

}



#menu a:link {

color:#ffffff;

text-decoration:none;

font-weight:bold;

}



#menu a:visited {

color:#ffffff;

text-decoration:none;

font-weight:bold;

}



#menu a:hover {

color:#3284A6;

text-decoration:none;

border-bottom: 2px solid #fff;

font-weight:bold;

}



.odd {

background-color: #fcf9fc; }



.even {

background-color: #616161; }



.right {

float: right;

padding-top: 0px;

padding-right: 10px;

}



.left {

float: left;

padding-top: 0px;

padding-left:10px;

}



.commentBox {

}



.commentBox p {

padding-top: 0px;

margin-top: 0px;

}



.search-form input {

  background: #b7cfd2;

  color: #3d2e1f;

}



ul.linklog {

margin-bottom: 0px;

margin-left: 0px;

padding-left: 20px;

}



ul.linklog li {

list-style: none;

}



body {

background: #0B1C3E url(/wp-content/themes/AM3/bg.png) top center;

margin-top: 0;

margin-bottom: 0;

margin: 0;

margin-left: 0px;

padding:0px 20px;

font-family: Arial, Comic Sans MS, 'Times New Roman', serif; 

font-size: 13px; /* basic font starting size */

letter-spacing: 0px; 

line-height: 1.2em;

text-align:center;

color:#808080;

}



a:link {

color:#D21453;

text-decoration:none;

}



a:visited {

color:#D21453;

text-decoration:none;

}



a:hover {

color:#D21453;

text-decoration:none;

}



a img {

border-width:0;

border:0px;

}



/* Header

----------------------------------------------- */



#header {

margin-top:0;

width:1010px;

margin-top:0px;

margin:0 auto 10px;

border:1px solid #ccc;

}



/* Content

----------------------------------------------- */





#content {

color:#3D2E1F; /* blog post text color */

width:1010px;

margin:0 auto;

margin-top: 0px;

padding:0;

text-align:justify;

}



#amazon {

padding-left: 0px;

padding-right: 15px;

padding-left: 0px;

width:780px;

float:left;

}



#main {

padding-left: 4px;

padding-right: 15px;

padding-left: 20px;

width:520px;

float:left;

}



#main2 {

padding-left: 4px;

margin: 0 auto;

width:520px;

float:left;

}



#rightbar {

margin-top: .5em;

width:190px;

float:right;

text-align: justify;

}



#leftmenu {

margin-top: .5em;

width:190px;

float:left;

text-align: justify;

padding-left: 10px;

}



.sideText, input {

font-family: tahoma, serif; font-size: 8pt;

}



select {

font-family: tahoma, serif; font-size: 8pt;

}



/* Headings

----------------------------------------------- */

h2 {

margin:1.25em 0 .3em;

margin-top:15px;

padding-top: 1px;

padding-bottom: 1px;

font:1.3em "Comic Sans MS", Trebuchet MS,Trebuchet, Arial,Comic Sans MS,Sans-serif;

font-weight: bold;

text-transform:uppercase;

letter-spacing:.06em;

color:#1B486B;

border-bottom: 2px dotted #6B5339;

text-decoration: none;

}



h3 {

margin:1.25em 0 .3em;

margin-top:15px;

padding-top: 1px;

padding-bottom: 1px;

font:1.4em "Comic Sans MS", Trebuchet MS,Trebuchet, Arial,Comic Sans MS,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

color:#1B486B;

border-bottom: 2px solid #F5F5F5;

text-decoration: none;

}



h4 {

margin:1.25em 0 .3em;

margin-top:15px;

padding-top: 1px;

padding-bottom: 1px;

font:1.25em "Comic Sans MS", Trebuchet MS,Trebuchet, Arial,Comic Sans MS,Sans-serif;

font-weight: bold;

text-transform:uppercase;

letter-spacing:.1em;

color:#808080;

border-bottom: 1px dotted #808080;

text-decoration: none;

}





/* Posts

----------------------------------------------- */

.date-header {

margin:1.5em 0 .5em;

}



.post {

margin:0em 0 .45em;

border-bottom:2px dotted #F5F5F5;

padding-bottom:0em;

}



.post-entryinfo {

font: .9em Comic Sans MS,Trebuchet MS,Arial,Comic Sans MS,Sans-serif;

color:#1B486B; /* post date and filed in */

padding-bottom:.7em;

}



.post-entryinfo2 {

font: .85em Comic Sans MS,Trebuchet MS,Arial,Comic Sans MS,Sans-serif;

color:#1B486B; /* post date and filed in */

border-bottom: 2px dotted #F5F5F5;

padding-bottom:.7em;

}



.post-title {

margin:2.5em 0 .75em;

padding: 2px;

font:1.5em Comic Sans MS, Trebuchet MS,Trebuchet, Arial,Comic Sans MS,Sans-serif;

text-transform:none;

letter-spacing:.0em;

color:#1B486B;

border-bottom: 2px solid #F5F5F5;

text-decoration: none;

}



.post-excerpt {

font-family: Comic Sans MS, serif;

font-size: 22px; 

line-height: 30px;

color: #595959;

background: #FFF url(quote.gif) no-repeat;

}



.post-title a, .post-title a:visited, .post-title strong {

display:block;

color: #1B486B;

text-decoration:none;

}



.post-title strong, .post-title a:hover {

color:#184263;

}



.post div {

margin:0 0 0em;

line-height:1.4em;

}



p.post-footer {

margin:-.25em 0 0;

color:#000000;

padding-bottom: 7px;

padding-top: 3px;

}



.post-footer em, .comment-link {

font:1em Comic Sans MS,Trebuchet,Arial,Comic Sans MS,Sans-serif;

}



.post-footer em {

font-style:normal;

font-family: Comic Sans MS, serif;

color:#808080;

margin-right:.6em;

}



.post-footer a, .post-footer a:visited, .post-footer strong {

color: #D21453;

text-decoration:none;

font-style: none;

}



.post-footer strong, .post-footer a:hover {

border-bottom:2px solid #90AB11;

text-decoration:none;

font-style: italic;

}



.comment-link {

margin-left:.6em;

}



.post img {

padding-right: 8px;

border:0px #ffffff;

}



.post blockquote {

background-color: #f3f3f3;

margin: 0 0px;

padding: 0 10px;

border-top: 2px solid #d9d9d9;

}



.post blockquote p {

margin:.75em 0;

}





/* Comments

----------------------------------------------- */

#comments h4 {

margin:1em 0;

font:bold 78%/1.6em "Trebuchet MS",Trebuchet,Arial,Comic Sans MS,Sans-serif;

text-transform:uppercase;

text-align:justify;

letter-spacing:.2em;

color:#999;

}



#comments h4 strong {

font-size:130%;

}



#comments-block {

margin:1em 0 1.5em;

line-height:1.6em;

}



#comments-block dt {

margin:0em 0;

}



#comments-block dd {

margin:.25em 0 0;

}



#comments-block dd.comment-timestamp {

margin:-.25em 0 2em;

font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Comic Sans MS,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}



#comments-block dd p {

margin:0 0 .75em;

}



.deleted-comment {

font-style:italic;

color:gray;

}





/* Left Menu BEGINS */





#left-menu {



float: left;

padding-right: 10px;

color: #808080;

margin-right: 20px;

margin-left: 20px;

font-size: 11.5px; 

width: 190px;

}





#left-menu a {

color: #90AB11;

text-decoration:none;

font-weight: normal;

}







#left-menu a:hover {

color: #143054;

border-bottom: 0px solid #6B5339;

}



#left-menu ul {

padding:0;

margin:0px;

}







#left-menu li {

padding:0 0 .5px 0;

margin-left:1px;

color: #808080;

list-style-type: none;

border-bottom: 1px dashed #C0C0C0;

}







/* Left Menu ENDS */







/* Right Menu BEGINS */







#rightbar {

float: left;

padding: 0;

color: #808080;

margin-top: 0px;

margin-right: 5px;

margin-left: 5px;

font-size: 11.5px; 

width: 190px;

}







#rightbar a {

color: #ffffff;

text-decoration:none;

font-weight: normal;

}







#rightbar a:hover {

color: #143054;

border-bottom:1px solid #90AB11;

text-decoration:none;

font-weight: normal;

}







#rightbar ul {

padding:0px;

margin:0px;

}





#rightbar li {

padding-left:1px;

margin:0px;

list-style-type:square;

list-style-position: inside;

}



#rightbar img{

padding-right: 8px;

}











/* Right Menu ENDS */







/* Footer

----------------------------------------------- */

#footer {

width: 1010px;

margin:0 auto;

background: url(/wp-content/themes/AM3/footer2.png);

clear:both;

height: 360px;

padding-bottom:0px;

color: #ffffff;

font-family: Arial, Comic Sans MS, 'Times New Roman', serif; 

text-align:center;

}



#footer a:link {

color:#90AB11;

text-decoration:none;

}



#footer a:visited {

color:#90AB11;

text-decoration:none;

}



#footer a:hover {

color:#ffffff;

text-decoration:none;

border-bottom: 2px solid #90AB11;

}



#footer hr {

display:none;

}



#footer p {

margin:0;

padding-top:15px;

font:78%/1.6em "Trebuchet MS",Trebuchet,Comic Sans MS,Sans-serif;

text-transform:uppercase;

letter-spacing:.1em;

}



#footerleft {

        float: left;

        width: 312px;

        height: 250px;

        margin: 0px;

        padding: 0px 10px 40px 15px;

        border-right: 1px dotted #808080;

        text-align:left;

}

        

#footermiddle1 {

        float: left;

        width: 314px;

        height: 250px;

        margin: 0px;

        padding: 0px 10px 40px 10px;

        text-align:left;

        }

        

#footermiddle2 {

        float: left;

        width: 314px;

        height: 250px;

        margin: 0px;

        padding: 0px 10px 40px 10px;

        font-size: 1em;

        text-align:left;

        }

        

#footerright {

        float: right;

        width: 312px;

        height: 250px;

        margin: 0px;

        padding: 0px 15px 40px 10px;

        border-left: 1px dotted #808080;

        text-align:left;

        }

        

#footercredit {

width: 1010px;

margin:0 auto;

background: url(/wp-content/themes/am3/footerbg.png);

clear:both;

height: 70px;

padding-bottom:0px;

color: #ffffff;

font-family: Arial, Comic Sans MS, 'Times New Roman', serif; 

font-size: .75em;

text-align:center;

}



.twitter-timestamp  {

font-size: 10px;

}       





#flickr_badge_recent { text-align: center;}

#flickr_badge_recent img {width: 52px; height: 52px; padding: 4px; margin: 2px;  border: 1px solid; border-color: #ececec; background-color: #fff;

}

Thanks!

Steven_A_S · 2008-05-08 16:48:58

I can't see any reason it shouldn't work (except that it's Internet Explorer). Taking a look at how the comment boxes are set up, it seems to be a funny way of doing them. I would pull the image and its anchor out of the paragraph and get rid of the span altogether. I might try something like this (note this is the final html, not the php source)

Code: html

<a name="comment-30"></a> 

<div class="commentBox1">

<a rel='external nofollow' href='http://thinking-outloud.com' class='eg-image'>

<img alt='' src='http://www.gravatar.com/avatar/7b844c3d747177a192f461237f4607ce?s=50&amp;d=http%3A%2F%2Faccidentalmommies.com%2Fimages%2Fgenericgravatar.png&amp;r=G' class='avatar avatar-50' />

</a>

<p>Even though I’m not eligible for the coupon (Canadian here), I just wanted to say hi and thanks for stopping by the site.</p>

<p class="post-footer"><em>By <a href='http://thinking-outloud.com' rel='external nofollow'>Kim</a> on 05.03.08 1:36 pm  | <a href="#comment-30">Permalink</a></em></p>

</div>

Code: css

.commentBox1 { background-color: #f1f1f1; padding: 5px; }

.commentBox2 { background-color: #E5E5E5; padding: 5px; }

.eg-image {float:left; margin-right:10px; display:block; width:50px; }

.avatar

.avatar-50 { height:50px; width:50px; }

.post-footer { margin-bottom:0px; padding-bottom: 0px; }

* html .commentBox1 { height:1px; }

Note: I separated the style info so it could be moved into your css file. Also, the strange looking style on the bottom (* html ...) is a bit of css that only works in IE 5.5 and 6; that is meant to put it in "layout" mode. Despite how it looks it's not going to make the comment box 1 pixel high, and amazingly fixes a few of the problems with those versions. Try with and without this tag.

ninak · 2008-05-08 22:38:09

This might sound stupid, but I just spent a whole day trying to figure out a similar problem. The site appeared in FF but the only thing that appeared in IE was the background. The problem was spacing of brackets. <whatever><whatever> should be <whatever> <whatever>. The funny thing is that it worked fine till yesterday. (thank goodness for search and replace)

Sponsored Results

Site Reference Forums

#1 2008-05-08 14:09:03

Another IE display issue

Code: php

post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH

Code: css

#2 2008-05-08 16:48:58

Re: Another IE display issue

Code: html

Code: css

#3 2008-05-08 22:38:09

Re: Another IE display issue

Active Discussions

Review Requests and Introductions

Board footer

Site Reference Forums

#1 2008-05-08 14:09:03

Another IE display issue

Code: php post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH

Code: css

#2 2008-05-08 16:48:58

Re: Another IE display issue

Code: html

Code: css

#3 2008-05-08 22:38:09

Re: Another IE display issue

Active Discussions

Review Requests and Introductions

Board footer

Code: php

post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH