SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: floats

  1. #1
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floats

    I am trying to learn CSS and have run across a problem. I am trying to float a testimonial blurb to one side of a div, with text wrapping around it. I have it working perfect in Firebird 0.7, but IE does not render it correctly at all.

    I have been beating my head against the wall for too long now and am asking for some help.

    Here is the URL: http://www.the-robeys.net/RCSWebDesign/index.html
    CSS: http://www.the-robeys.net/RCSWebDesign/css/screen.css

    As you can see one is floating left and one is floating right. I validated the css and it was clean, so what am I missing?

    Thank you!

    Jason
    Jason

  2. #2
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another thing - on Firebird 0.7 if your viewport is wide (I'm using 1600*1200) the testimonials escape from their <div>s.

    And
    Code:
    "One of the most professional web developers we have worked with."
    should be (and similar code also)
    Code:
    &quot;One of the most professional web developers we have worked with.&quot;
    And you haven't declared a !DOCTYPE - I think you may have meant to declare something that should be XHTML. A validator gives these results - http://www.htmlhelp.com/cgi-bin/vali...l&warnings=yes Without a !DOCTYPE IE goes into quirks mode - so removing the uncertainty will give the browser something to work on.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

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

    Do what john says and add a doctype and that will help.

    However the problem with the blurb is that IE doesn't like floating elements in elements that haven't been given a specific width. You have defined the width by using margins which confuses IE.

    However I have devised a hack that combats this and I shall share it with you

    Give the element a height and then IE will allow the element to float correctly. You will need to hide this code from other browers though.

    I realise you don't want a height so the secret is to use a height of 1%, remembering that ie treats height like minimum height and will expand as required.

    The remarkable code to achieve all of these functions is as follows:
    Code:
    * html .box {height:1%}
    Just put that at the end of your style sheet.

    (I haven't looked at the other problem john mentioned yet.)

    Paul

  4. #4
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thank you.

    Thank you both for your help. I have put the Doctype in and added the hack to my Style Sheet that Paul so kindly shared with me and it did work. Thank you very much. I am going to look at the the hight rez problem John mentioned.

    I think I am getting the hang of this CSS thing. I just wish someday I will be able to contribute the way that you both do.

    Thank you,

    Jason
    Jason

  5. #5
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    High rez prob

    I have added

    Code:
    html>body .box {min-height: 150px;}
    That seems to fix the problem of the Blurb spilling out in High rez. John would you comfirm this?

    Thank you again,

    Jason
    Jason

  6. #6
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JasonRCS
    John would you comfirm this?
    Confirmed OK, Jason.

    One other thing - you've used a fixed pixel font size. If people scale the page for accessibility then this won't scale correctly especially in IE. And on my resolution the font size gets a little small in IE especially. Have you thought of making the font-size declaration as a percentage or expressing it in ems? These are generally considered better - there are numerous threads round sitepoint with the reasons why this is a good thing.
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  7. #7
    Ensure you finish what you sta bronze trophy John Colby's Avatar
    Join Date
    Aug 2003
    Location
    University of Central England, U.K.
    Posts
    487
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    John
    No electrons were harmed during the creation, transmission
    or reading of this posting. However, many were excited and
    some may have enjoyed the experience.

  8. #8
    SitePoint Enthusiast JasonRCS's Avatar
    Join Date
    Oct 2003
    Location
    Ohio
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by John Colby
    Thank you again for your help. I have decided to try ems on everything but the nav bar. It looks like it should work out. Again thank you for your help!

    Jason
    Jason


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
  •