OL positioned bottom-right in IE (should be top left) 1

[followtheboat]

I'm sure this may have been discussed before but I couldn't find a solution on the searches. In IE my numbers for my ordered list are appearing at the bottom-right of the li instead of the top left. See here:

http://followtheboat.com/index.php?page_id=91

My CSS is thus:

.comments {float:left; width:600px; padding-top:10px}
.comment-header{align:left;}
.comment-avatar {float:left;width:80px;}
.comment-author {font-family: "Times New Roman", Times, serif;	font-size: 16px;	text-decoration: underline;	font-weight: bold;}
.comment-date {font-family: "Times New Roman", Times, serif;	font-size: 12px;	font-style: italic;}
.comment-top  {background-image: url(images/commenttop.jpg);	background-repeat: no-repeat;	background-position: left top;	width:500px;	height:32px;}
.comment-bottom {background-image: url(images/commentbottom.gif);	background-repeat: no-repeat;	background-position: left bottom;	width:500px;	height:17px;}
.comment-container {width:500px;}
.comment-text {font-size:12px;	background-color: #dfdfdf;	padding:15px;	width:472px;}
comment li  {left: 0px;	top: 0px;clear: right;}
comment ol  {width:600px;left: 0px;top: 0px;}
#comment-formcontainer {BACKGROUND-COLOR: cccccc;	width:600px;	text-align:left;}
.comment-formborder  {width:580px;	padding: 3px;}
#author, #email, #url, #answer, #comment {	background-color: #c19c3c;}
.odd .speech1container {width:570px; float:left;}
.odd .speech1 {float:left;width:63px;height:43px;background-image: url(images/speech1_r1_c1.gif);background-repeat: no-repeat;background-position: left top;}
.odd .speech1topwrap {width:507px;height:43px;float:left;}
.odd .clear {clear: both;}
.odd .speech2a {width:507px;float:left; height:37px;}
.odd .speech2b {width:507px;float:left; height:6px;background-image: url(images/speech1_r2_c2.gif);background-repeat: no-repeat;background-position: left top;}
.odd .speech3 {float:left;width:570px;background-image: url(images/speech1_r3_c1.gif);background-repeat: repeat-y;}
.odd .speech3pad {width:550px;padding-top: 5px;padding-left: 10px;padding-right: 10px;}
.odd .speech4 {float:left;width:570px;height:8px;margin-bottom:30px;background-image: url(images/speech1_r5_c1.gif);background-repeat: no-repeat;background-position: left top;}

And the html is thus:

<div class="comments">
  <ol id="comments">
    <?php foreach ($comments as $comment) : ?> 
    <?php if (get_comment_type()=="comment") : ?> 
 		   
       <li id="comment-<?php comment_ID(); ?>" class="<?php  
         
        /* Highlighting class for author or regular striping class for others */ 
         
        /* Get current author name/e-mail */ 
        $this_name = $comment->comment_author; 
        $this_email = $comment->comment_author_email; 
         
        /* Compare to $author array values */ 
        if (strcasecmp($this_name, $author["name"])==0 && strcasecmp($this_email, $author["email"])==0) 
            _e($author["highlight"]);  
        else  
            _e($thiscomment);  
         
        ?>"> 
		

           
            <?php comment_author() ?>, <?php print $comment->extra_location; ?>
            <br><div class="comment-date"><?php comment_date() ?></div>

<div class="speech1container">

    <div class="speech1"></div>
    <div class="speech1topwrap">
      <div class="speech2a"></div>
      <div class="speech2b"><img src="<?php bloginfo('template_directory'); ?>/images/speech1_r2_c2_spacer.gif" width="507" height="6" /></div>
      <br class="clear" />
    </div>

    <div class="speech3">
      <div class="speech3pad"><?php comment_text(); ?> </div>
    </div>
    
	<div class="speech4"><img src="<?php bloginfo('template_directory'); ?>/images/speech1_r5_c1_spacer.gif" width="570" height="8" /></div>
    
</div>

       
    <?php if('odd'==$thiscomment) { $thiscomment = 'even'; } else { $thiscomment = 'odd'; } ?> 

 </li> <br /><br />  <br /><br />    
    <?php endif; endforeach; ?> 

</ol>
</div>

Anyone any clues? I tried the clear:right solution found on another website but it didn't make any difference.

Thanks in advance.

 

[followtheboat]

Well I found a work-around BUT I don't think it is acceptable. I added a whole load more breaks after the <li > element, so the line now reads:

  </li> <br /><br />  <br /><br />    <br /><br />  <br /><br />

I mean it seems to work in IE 7 but it's messy and it's not the ideal solution, so I'd be very grateful if anyone could tell me the proper fix.

Thanks.

 

[ChrisHunt]

I don't know why your numbers are appearing in the wrong place - it's working alright for me in IE6.

What you can do is simplify the way you markup the comments, removing all the floating and spacer gifs and whatever else. Here's something I came up with to get you on the right track:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head profile="[URL unfurl="true"]http://gmpg.org/xfn/11">[/URL]
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<base href="[URL unfurl="true"]http://www.followtheboat.com/wp-content/themes/followtheboat/"[/URL] />

<style type="text/css">
   div.c1 {
      width: 300px;
      background: url(images/speech1_r1_c1.gif) top left no-repeat;
      padding-top: 43px;
      margin-bottom: 3em;
   }

   div.c2 {
      border: 1px solid black;
      border-width: 0 1px 1px;
      padding: 10px;
      background: #ff6;
   }

   .even div.c1 {
      background-image: url(images/speech2_r1_c1.gif);
   }

   .even div.c2 {
      background-color: #FFC;
      border-color: #F90;
   }

</style>


</head>

<body>
<div class="comments">
  <ol id="comments">
       <li id="comment-22" class="odd"> 
            Tim, Saffron Walden            <br><div class="comment-date">July 26, 2003</div>
	<div class="c1"><div class="c2">
		<p>Hello mate, I hope all is going well and you like the site. If you don&#8217;t then tough tits, coz there&#8217;s nothing you can do about it now!</p>
	</div></div>
    
</li>
     
     
 		   
<li id="comment-23" class="even"> 
            MKD, London            <br><div class="comment-date">July 26, 2003</div>
	<div class="c1"><div class="c2">
		<p>Demon, forget the pirates, look out for the bandits, when it gets lonely! I hope you find yourself on your trip, and when you do, can you tell yourself that you owe me a pot noodle. Cheers.</p>
	</div></div>
</li>
     
 </ol>
</div> 
</body> 
</html>

The colours don't quite match as I did it by eye, and the images you've got now (and which I re-used) don't quite fit the bill either - but hopefully you can see where I'm going with this.

You need an image that's the width of the speech-bubble bit, and contains the triangular bit and the top border only. This gets rendered as div.c1's background image, and contained within its top padding. Nested inside this is a second div - div.c2 - which has a css border and background colour to match the image.

Note how I only overwrite the colour-related bits in my .even rules - the others can be left the same.

Maybe, without all those floating bits, your number position problem will be solved as well?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[johnwm]

There may not be a lot of point trying for cross-browser compatibility while you (currently) have 807 validation errors. See

http://validator.w3.org/check?verbose=1&uri=http://followtheboat.com/index.php?page_id=91

Come back when you've fixed those if there any remaining issues that we can help with

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[followtheboat]

Thanks Chris for your help. Apologies for not getting back to you sooner. I'll get on the case with that tomorrow.

 

[followtheboat]

John,

whilst I appreciate your sentiments and understand I have some tidying up of my code to do I don't believe an uncompliant site (that is not yet live and still under development) is a reason for not giving advice on this forum. With your help, however, I've managed to reduce those errors by replacing three items. It had calculated so many errors as it was a comments page where the offending code was repeated for each comment (all 110 of them). I'll continue to validate from now on but because this is a Wordpress website some of the errors are outside my control.

For the record Google has 62 errors on its home page, and Microsoft 191. My home page currently has 193, so I'm not doing so badly!

 

[ChrisHunt]

The point about validating before asking questions here is this:

It's true that most validation failures will not affect the way your site is rendered. However, some of them will, and they're a lot more difficult to spot if they're hidden amongst a whole heap of trivial errors.

Quite often, people post problems here that turn out to be due to a misspelled, unclosed or badly nested element - all things that a validator will pick up if you give it a chance.

So my advice is to validate early and often. Try to keep it valid as you're writing it, and check it when stuff doesn't render as you expect. You may just have made a trivial mistake (as we all do sometimes).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[johnwm]

Thank you for the clarification Chris. I have found that quite a lot of invalid HTML will render differently in different browsers, particularly in the older and less compliant browsers like IE6. IE6 will drop into Quirks Mode for many different types of non-compliant (as well as some compliant) code sections, which will almost invariably cause rendering difficulties. It therefore seems reasonable to suggest that OP should try and rectify these before asking the rest of us to plod through 800+ coding errors to see which, if any, of them are causing the problem.

The fact that you use choose to use someone else's code doesn't absolve you from responsibility for the errors!

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller

 

[followtheboat]

Hehe, point taken. I'll admit it, I've been guilty of not validating.

I have to say, however, that some of the errors that are highlighted just don't make sense. It highlights '<' as missing when it isn't, but I'll look into this further before posting any more questions.

Thanks for your assistance, both of you.

Regards,

jamie

 

[followtheboat]

Chris,

I've just implemented your suggestion and it works a treat. I'm amazed that I came up with such a complicated template, having seen your simple solution. Brilliant!

Thank you.

 

[ChrisHunt]

I liked this "speech bubble" way of showing comments that I decided to, ahem, borrow it for one of my blog sites. In the end I decided to do it slightly differently. The comment body is still marked up like this:

<div class="c1"><div class="c2">
   Text of the comment goes in here
</div></div>

I've produced a single gif image that I use for all colours of bubble. It's 36 pixels high and 1000 pixels wide (intentionally wider than I need, it could be wider still) and white with a one pixel #cccccc grey line along the bottom. A little way in from the left side is a transparent triangle reaching to the top of the image to the bottom, edged with a 1 pixel line of the same grey. you can see it here. Despite its size, it only weighs in at 490 bytes.

Now I can style my comment divs like this:

.c1 {
   background: url(images/callout.gif) top left no-repeat;
   padding-top: 36px;
}

.c2 {
   border: 1px solid #ccc;
   border-width: 0 1px 1px;
   padding: 10px;
}

The clever bit is that I can now give the whole speech bubble whatever background colour I choose, simply by changing the background of div.c1:

li.odd .c1 {
   background-color: #ffc;
}

li.author .c1 {
   background-color: #cfc;
}

You can see it in action at

http://www.yhagroup.org.uk/archives/no-handbook#comments

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd