Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Can anyone help me with this (link to thread where everyone gave up)

Discussion in 'Website Design Forum:' started by bamme, Sep 3, 2010.

  1. bamme

    bamme Senior Member

  2. Harry

    Harry Senior Member

    I'm not fully sure what your problem is. Screenshots?
  3. Levi

    Levi Moderator Staff Member

  4. Harry

    Harry Senior Member

  5. Levi

    Levi Moderator Staff Member

    I thought it was extending the blue outlined grey area to the red line in my image below (assuming you can see it after it got reduced in size :() as that seems to fit in with the rest of the site styling

    Attached Files:

  6. Harry

    Harry Senior Member

  7. Harry

    Harry Senior Member

    Same thing.
  8. bamme

    bamme Senior Member

    Wow sorry everyone i didnt realise I had replies.

    Okay there are screenshots there on that page to look at (the webdesign forums thread) but I see its not too clear sorry..

    Basically if you go here: Sanya China Travel China Holidays - China Tour Hotels - Sifang Guesthouse Hotel

    You'll see it. Click the Hotel Details (kinda weird goldy colour at top of main content) and look at the images under the heading Rooms,

    You'll see a light grey box that wraps around "rooms", and the text underneath it. You'll see the images, bordered with darker grey, 'hanging out' of the boxes that should wrap/hold them as well as the text -- this is the problem that the webdesign forum thread is about,

    The other problem is that when the images are too close top and bottom, they misalign: Tailor Made Vietnam Tours and Holidays to the Far East (Click hotel details, then see the images under Facilities heading)

    Here is a link to what the page is meant to look like: Tailor Made Vietnam Tours and Holidays to the Far East

    (this is just luck that it looks all ok on this page, because theres enough text there -- if there is less text, the light grey box does not reach far enough down to look as though it's wrapping the image too, and there is a few lines of text spacing out each row of images so they dont misalign because theyre too close together.)

    I'm not sure how to stop this happening - the attempts in the webdesign forums thread havent worked for me

    Thanks sorry iw as unclear :)
  9. Harry

    Harry Senior Member

    Hey, on my iPad at the moment so I can't debug anything but it sounds like you're describing what I've fixed…?

    Images poking out of the bottom of the dark grey backgrounds of paragraphs when there's not enough text in the paragraph?
  10. bamme

    bamme Senior Member

    Sorry Harry I don't quite follow you fixed this?
  11. Levi

    Levi Moderator Staff Member

    Emma, click his image link and you will see him showing that he's added overflow:hidden into the intinery p/ul/h4 part of the css :)
  12. Jazajay

    Jazajay Active Member

    Don't mention it, well jealous. :cry:
  13. bamme

    bamme Senior Member

    Ahh thanks so much - sorry I was looking at this from my phone it's hard to spot everything on such a tiny screen (not jealous of ipad at all.)

    Thankyou Harry! I would not have thought to use overflow:hidden; here. I do use it but I've never been 100% sure on what its function is described as so obviously I am missing good ways to use it.

    I just looked it up and found:

    Can I ask from that description how it actually worked -- My p, ul, and h4 tags aren't styled with heights, nor are they hiding anything overflowing with the overflow:hidden; rule.. bit confusing!
  14. Harry

    Harry Senior Member

    Well my best guess estimate is that by explicitly setting an overflow (esp. hidden), the User Agent has to be completely aware of where an elements edges lie.

    Because the UA knows exactly where to layout every edge of the element it will then render it more accurately than just placing it somewhere, not bothering with defining where the edges lie.

    That's totally speculative. The overflow property does exactly as it says on the tine, but why it works here is just a guess I'm afraid.

    See also Float Clearing

Share This Page