SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problem in Firefox but not IE

    Hi all

    My text floats around the image and continues to write text underneath the image (I am floating the image right). I do not wish for it to do that. I want the text to flow down to the next line as soon as it reaches the end of the image. So the texts will never appear underneath the image.

    This used to happen in both the IE and Firefox. However once specified the height (I have highlighted that in bold below in my code) to the text that wraps around the image, it stopped flowing underneath the image. But not in Firefox. Does anyone have a solution, also explain why it stopped doing that in IE as soon as I specified the height?

    Here is the code :

    <div id="container1">
    <div class="boxanalysis">
    <div align="center" class="big">Latest Analysis
    </div>
    <hr><br>
    <?php do { ?>
    <div class="image_float">
    <img src="<?php echo $row_RsHeadlines['picture']; ?>"
    height="120" width="120"/>
    </div>
    <div class="title">
    <a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>">
    <?php echo $row_RsHeadlines['title']; ?> </a>
    </div>
    <br>
    <p style="height:110px">
    <?php echo $row_RsHeadlines['description']; ?>
    <a href="article.php?recordID=<?php echo $row_RsHeadlines['articleid']; ?>">
    More... </a>
    </p>
    <div class="spacer"> </div> <br>
    <?php $maxRows_RSHeadlines=$maxRows_RSHeadlines-1;
    $row_RsHeadlines = mysql_fetch_assoc($RsHeadlines); ?>

    <?php } while ($maxRows_RSHeadlines>0); ?>

    <p align="center"> <a href="analysis.php" class="archive"> Archive >> </a> </p>
    </div> <!--end of boxanalysis -->
    </div> <!-- end of first container -->

    Regards

    Explorer

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    My text floats around the image and continues to write text underneath the image (I am floating the image right). I do not wish for it to do that. I want the text to flow down to the next line as soon as it reaches the end of the image. So the texts will never appear underneath the image.
    You need to give the text a margin equal to the width of the image so that it looks like the text is in one column, the image is in the other.

    Your code is unreadable - ( you should always print the generated html when asking for help ) - And you have missed your CSS.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI

    Thanks for your response. I dont understand what you mean by giving the text an equal margin to the image. The image has width of 120 PIX and the text is about 400px. If I gave a further 120px margin for the text there would be a huge gap between the text and the image.

    I mean the code works in IE but not under Firefox. Why? Also it only started workign under IE after I had specified the height.

    I appreciate your adivce on submitting the code, I am new here and new to CSS.

    regards

    Explorer

  4. #4
    SitePoint Guru james_littler's Avatar
    Join Date
    May 2007
    Location
    Portsmouth, UK
    Posts
    775
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try applying padding to the relevant side of the image so that the image width + the padding = width of the text

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    This is what I understood you were wanting - If not please show your code.
    The text does not go underneath the float because it has a margin equal to the width of the image + 10px space.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    img { float: left }
    p { margin-left: 130px }
    </style>
    </head>
    
    <body>
    <img src="" height="120" width="120" />
    <p> ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
     ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
      ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
       ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f</p>
       <p> ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
     ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
      ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
       ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f</p>
       <p> ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
     ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
      ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f
       ashdfj akjsd fkajsdkjasd hfkjasd hfkajsd hfkjas hdfkjs hfkjasd hfkjas hdkfja sdkjfa skjd fakjsd fakjsd fkjasd fajksd f</p>
    </body>
    </html>

  6. #6
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE has problems with floats, not Firefox. Look to what you and IE are doing wrong that it's not working rather than trying to fix Firefox.

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI all

    Yes, that seems to have fixed it. All I needed to do is to fix the size of the width so that it does not flow underneath the image.

    Before I go, can anyone reccomend a good book here on CSS, I see the one advertised here by sitepoint. But personal reccomendations always help.

    Thanks all

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got a few sitepoint books and they're all a good read. One of the most useful I found initially was:

    http://www.sitepoint.com/books/css2/...c7f714cb3f8b5f

  9. #9
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,115
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)


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
  •