Mystery: image covering text

HTML & CSS
1

Hi

In one of my pages I discovered te bottom of an image covering text. There are many images in this page and others using exactly the same code. I also have a parallel page with identical text/image content and the some surrounding code. No problems with those.

I’ve looked for the culprit in every single dot , to no avail.

of course, I can solve the problem with <br><br><br> as nothing else works like clear:both.

The page in question is http://pintotours.net/Americas/DomRepublic/PopsightsPunta.html#att4 which is a popup from the main page and the big sister is http://pintotours.net/Americas/DomRepublic/sightsPunta.html

The image is the second in the section on Cap Cana

I hope you have better luck than I did!

…and think you for your help.

2

Well for one, your ".img-container img{} on the broken page is using position:absolute, whereas your non-broken big sister page isn’t.

That seems to be the smoking gun, more or less.

3

Hi Ryan

Well that answer is supersonic!

I have to pop out to get my daughter, Will look at that in 20mins.

But why it only happens to this img when I have dozens with excatly the same code?

thanks

4

That one image is broken because …ok well let me explain.

On your .img-container for the broken page, it has a padding-top:66.6%. This refers to 66.6% of the width of the element. Now we need to take 66.6% of that and that will be the height of the img-container will be (and when the text will start appearing). So 820*0.66 (820 is the width of .ad) is roughly 546px. So this means, if the height of the image is taller than 546px, then text will overlap with the image.

Now look at the height of the broken image. How tall is that :wink: .

So the broken image, if you will note, is very tall; taller than the rest actually.

You were playing with fire, with this method. Tall images will suffer. Notice that smaller images have more space between the text and the image than images which are slightly taller. Clicking now?

5

Right! I’m back and going for the scissors! It’s either that or the <br>s

Many thanks

6

Not entirely sure what that means but I hope it means you’ll be removing position:absolute from the image :wink: .

You’re welcome.

7

Hi Ryan

You’re an amzing coder; but maths…

Can you explain your numbers, please?

You say that if the img is taller than 546:trouble. But the image is only 407px. And where did you get the 800px for the ad. The image is 400px wide. Here, I guess it is not the width of the image that matters.

Niw, you got me confused!

8

Ok. Let me explain the numbers

820 is in reference to the .ad element
0.66 refers to the 66% top padding. We are multiplying it times 820 because, as I said, padding-top percent values base off of the WIDTH. .
It doesn’t matter what the image width is; you are setting the top padding on the parent container. So the image has NOTHING to do with the issue right now (aside from it being tall :stuck_out_tongue: )

So, the height of .img-container will only be as tall as 66.6% of the parents width. The parent is .ad. So 0.66*820 (that’s the width of the .ad element) is 546. After 546px, text will overlap (or rather, underlap)

Wait I’m looking at #att3, the taller image. #att4 has no overlap. Did you mean to talk about #att3?

978×768 450 KB

9

Hi Ryan

yes it’s the one in the picture you included above.

meanwhile I’ve been messing arounwith the css and it’s utter chaos! I changed from position absolute to static as in the other stylesheet, without really undersrtanding the difference… I manage to sort out the text, but the images (all of them) went walk-abouts to the left.

margins right and left auto did not solve the problem!

SOS!!!

10

Order me some JimmyJohns, you’re stopping me from eating lunch :stuck_out_tongue_winking_eye: .

Your code isn’t matching. Not sure why your CSS files are different when it’s obvious you need to reuse the code :stuck_out_tongue: .

On .img-container, up the width to 100%, not 73%. Remove that huge top padding (the 66.6%)

On .img-container img{} you need to change that width to max-width to match the big sister page.

Headed to lunch. Gotta give me a few minutes break to get some food :slight_smile: .

11

Enjoy your JimmyJohns. What’s that? The latest craze across the big pond?

I changed the code to

.img-container {
	width:100%;
	
	position:relative;	
}

.img-container img {
	position:absolute;
	top:5%;
	left:18%;
	max-width:100%;
	height:auto;
	border:4px solid green;
    border-radius:8px;
	
}

and I ended up with smaller pics right on top of the text!

Nice effect, though…

As this is published online I’m going to put everything back with a few <br>s and create a test page to be waiting for you after you digest your JJs.

12

The img{} should be position:static. I thought the page had that already? Did you add that in?

Upon removing that, the top/left can be removed too.

13

That was aquick lunch!

I put the pages in

http://pintotours.net/Pinto/JimmyJohns/PopsightsPunta.html

MARVELLOUS: all fell into place. Good old JJ:

Many thanks

14

“Working” through lunch just for you :wink: . You’re welcome.

15

I knew they don’t give you holidays like the 6 weeks we get here in Europe, but no lunches either…?

16

We get 30 minutes for lunch. Any more and we have to stay a smidge extra (or use paid time off.)

You said this was a live site so I thought I’d just get it fixed. Besides, who needs 30 minutes to eat a sandwich and a bag of chips? Normally I will listen to a podcast or read articles during lunch anyway.

17

What about the canapés, the bottle of Bordeaux, the crème brulée, the Camamberts and the Stiltons, not to forget the Port afterwards? You need more than 30 minutes!

You’re making me feel guilty, so I guess I will have to send you one of our standard lunches as above as a means of saying thank you. Mind you, you may ahve to take your annual 5 days leave to munch through it!

many thanks Ryan!

18

[quote=“qim, post:17, topic:112772”]
annual 5 days leave to munch through it!
[/quote] 12! Accrued over the course of hte year. Gotta love it.

If I’m having all that, I’m in my underwear watching Netflix at home.

19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.