Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts

    floating in FF and floating in IE...

    Here's an image to describe it:


    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:
    Code:
    		<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%2Fad516503a11cd5ca435acc9bb6523536%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:

    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;
    }

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder Apothem's Avatar
    Join Date
    Mar 2008
    Posts
    380
    Thanks
    36
    Thanked 25 Times in 25 Posts
    Oh, I see. Thanks!

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •