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

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
 

Attachments

  • Untitled-1.jpg
    Untitled-1.jpg
    19.4 KB · Views: 6
Levi said:
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

Same thing.
 
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 :)
 
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?
 
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 :)
 
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:

"The overflow declaration tells the browser what to do with content that doesn't fit in a box. This assumes the box has a height: if it doesn't, it becomes as high as necessary to contain its contents, and the overflow declaration is useless"

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!
 
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
 
Back
Top