SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE Issue with floats

    Hi all!

    I'm 99% done with a new site however I just noticed a new bug that's only occuring in IE6... I have no idea why it's doing it. If you look at this site here, in IE you'll see that the lower left handside picture is randomly being spaced downwards? What's the issue with this? Thanks all once again!

    Theros

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Line 229. You have an extra unordered list with no list items in it. Remove that, and your page will validate.

    That should solve your problem.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Line 229. You have an extra unordered list with no list items in it. Remove that, and your page will validate.

    That should solve your problem.
    Thing is that UL is needed later on when you log into wordpress... only then does it render the code that is to go into it....

    *EDIT*and also even when I did remove it, the problem persisted. Any ideas?

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might want to remove a green looking background which appears while the nav loadS? just a suggestion..

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not quite sure how to fix that issue... however it's not the biggest problem either

  6. #6
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There seems to be something about the Einserver image which is nudging the following content down (even though all the images appear to be the same size). Specifying the dimensions of the images in the HTML may help (and it is something that you should do anyway so that browsers don't have to guess at what size it is before it is fully loaded) but also setting a height on .post may solve the problem too.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    The float is snagging on the float before it. You need to wrap each pair of floats in anothe div that is set to clear:both otherwise IE will snag if one float is fractionally higher than the other.

    Code:
    								<div style="clear:both">
    <div class="post" id="post-15">
    					<h3 class="storytitle"><a href="http://smallblogsnetwork.com/2006/10/15/students-and-tablets/" rel="bookmark">Students and Tablets</a></h3>
    					<div class="meta"> </div>
    					<div class="storycontent">
    						<p><a target="_blank" title="Students and Tablets" href="http://www.studentsandtablets.wordpress.com"><img alt="Students and Tablets" title="Students and Tablets" src="http://www.smallblogsnetwork.com/wp-content/themes/smallblogsnetwork/images/blogs/studentsandtablets.jpg" /></a> </p>
    					</div>
    					<div class="feedback"> <a href="http://smallblogsnetwork.com/2006/10/15/students-and-tablets/#respond" title="Comment on Students and Tablets">Comments (0)</a> </div>
    				</div>
    				<div class="post" id="post-14">
    					<h3 class="storytitle"><a href="http://smallblogsnetwork.com/2006/10/15/mtsix/" rel="bookmark">MtSix</a></h3>
    					<div class="meta"> </div>
    					<div class="storycontent">
    						<p><a target="_blank" title="MtSix" href="http://mtsix.com"><img alt="MtSix" title="MtSix" src="http://www.smallblogsnetwork.com/wp-content/themes/smallblogsnetwork/images/blogs/mtsix.jpg" /></a> </p>
    					</div>
    					<div class="feedback"> <a href="http://smallblogsnetwork.com/2006/10/15/mtsix/#respond" title="Comment on MtSix">Comments (0)</a> </div>
    				</div>
    			    </div>
    (inline styles for example only)

    Semantically speaking you could wrap each pair in a list to make it a bit neater.


    Or alternatively (if your design allows) make sure each float is exactly the same total height and then they shouldn't snag either.
    Code:
    .post{ /*Whole Wordpress Post general*/
    padding:10px;
    width:235px;
    float: left;
    height:220px;
    }

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Setting the height in ems will give you a bit more flexibility if text is resized in most browsers.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by tyssen
    Setting the height in ems will give you a bit more flexibility if text is resized in most browsers.
    True

  10. #10
    SitePoint Addict
    Join Date
    Aug 2006
    Location
    Washington DC
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    The float is snagging on the float before it. You need to wrap each pair of floats in anothe div that is set to clear:both otherwise IE will snag if one float is fractionally higher than the other.

    Code:
    								<div style="clear:both">
    <div class="post" id="post-15">
    					<h3 class="storytitle"><a href="http://smallblogsnetwork.com/2006/10/15/students-and-tablets/" rel="bookmark">Students and Tablets</a></h3>
    					<div class="meta"> </div>
    					<div class="storycontent">
    						<p><a target="_blank" title="Students and Tablets" href="http://www.studentsandtablets.wordpress.com"><img alt="Students and Tablets" title="Students and Tablets" src="http://www.smallblogsnetwork.com/wp-content/themes/smallblogsnetwork/images/blogs/studentsandtablets.jpg" /></a> </p>
    					</div>
    					<div class="feedback"> <a href="http://smallblogsnetwork.com/2006/10/15/students-and-tablets/#respond" title="Comment on Students and Tablets">Comments (0)</a> </div>
    				</div>
    				<div class="post" id="post-14">
    					<h3 class="storytitle"><a href="http://smallblogsnetwork.com/2006/10/15/mtsix/" rel="bookmark">MtSix</a></h3>
    					<div class="meta"> </div>
    					<div class="storycontent">
    						<p><a target="_blank" title="MtSix" href="http://mtsix.com"><img alt="MtSix" title="MtSix" src="http://www.smallblogsnetwork.com/wp-content/themes/smallblogsnetwork/images/blogs/mtsix.jpg" /></a> </p>
    					</div>
    					<div class="feedback"> <a href="http://smallblogsnetwork.com/2006/10/15/mtsix/#respond" title="Comment on MtSix">Comments (0)</a> </div>
    				</div>
    			    </div>
    (inline styles for example only)

    Semantically speaking you could wrap each pair in a list to make it a bit neater.


    Or alternatively (if your design allows) make sure each float is exactly the same total height and then they shouldn't snag either.
    Code:
    .post{ /*Whole Wordpress Post general*/
    padding:10px;
    width:235px;
    float: left;
    height:220px;
    }
    Okay, thanks guys! You guys save me a lot of time...


Bookmarks

Posting Permissions

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