...

View Full Version : floating in FF and floating in IE...



Apothem
07-19-2008, 08:19 AM
Here's an image to describe it:
http://img166.imageshack.us/img166/6074/20397220hj2.th.jpg (http://img166.imageshack.us/my.php?image=20397220hj2.jpg)

Basically, in IE the image is pushed up for some reason... it isn't floated to the left. In Firefox, the image was displayed correctly at it's respected spot.


In HTML, the code is:

<li id="comment-135" class="odd">
<span class="commenttitle">
<p class="avatar"><img alt='' src='http://www.gravatar.com/avatar/3889fc6021654298af57bb6b4233efd8?s=32&amp;d=http%3A%2F%2Fwww.gravatar.com%2Favatar%2Fad516503a11cd5ca435 acc9bb6523536%3Fs%3D32&amp;r=G' class='avatar avatar-32' height='32' width='32' /></p>
<a href="URL/">Syaoran</a> <a href="URL" title="Edit comment"><span>Edit</span></a>
</span>
<span class="cdate2"><a href="URL">July 12, 2008 | 12:52 PM</a></span>
<p>TEXT</p>
</li>


With CSS code:



#comment {
width: 100%;
}

#commentlist, #trackbacks {
list-style: none;
}

#commentlist li {
margin: 0;
padding: 15px 10px 0 10px;
border-bottom: 1px solid #73A533;
background-color: #FFF;
}

#commentlist li a span {
color: #AAA;
}

#commentlist li a:hover span {
color: #7E7E7E;
}

#commentlist li.odd {
background-color: #F3F3F3;
}

#commentlist li.author {
background-color: #EAF3FA;
}

.cdate {
float: right;
}

.cdate2 {
display: block;
text-align: left;
}

.avatar img {
float: right;
}

#trackbacks li {
padding: 5px 10px 5px 10px;
}

.post .commenttitle {
font-size: 16px;
color: #0092C8;
margin: 0 0 2px 0;
font-weight: normal;
}

.post #commentlist .commenttitle a:link, .post #commentlist .commenttitle a:visited {
color: #0092C8;
}

.post #commentlist .commenttitle a:hover {
color: #73A533;
text-decoration: none;
}

abduraooft
07-19-2008, 09:31 AM
The above code is not enough to comment on the layout. We need to see the complete html and it's CSS. Or a link would be more useful.

BTW,
<span class="commenttitle">
<p class="avatar"></p>
<a href="URL/">Syaoran</a> <a href="URL" title="Edit comment"><span>Edit</span></a>
</span>
nesting of <p>(block level element) inside <span> (inline element) is against the rules. So, validate your your code and fix all such errors first.

Apothem
07-19-2008, 05:22 PM
Oh, I see. Thanks!

Is there a guide on the order of elements, then? Since w3 is always confusing to me.

abduraooft
07-19-2008, 05:28 PM
See http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.3 to see the rule and http://webdesignfromscratch.com/css-block-and-inline.cfm for a list of common elements.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum