Text covering floated image

Hi,

I’m having the same problem as John, something that is happening recently and ONLY in chrome.

The text covers one floated image in pages like this one:
http://www.webfoodculture.com/speciali/mangiare-sulla-iss-cibo-nello-spazio/

First of all I’m NOT AT ALL an html or css expert, my code is probably a disaster (validator.w3.org found hundreds of errors).

FACT IS, the problem has started a few weeks ago, much later my pages were created.

What happened?

Many thanks in advance.

A.

Without looking at your web page, if the validator is reporting hundreds of errors, you should work on fixing them. It is probably one of those validation errors that is causing your problem.

3 Likes

Welcome to the forums, @antoniomariaguerra.

As @Gandalf says, you really need to start by fixing the errors; you can’t expect things to work correctly if they are not written correctly. There are 312 errors on that one page, 17 of them in line 471, where the problem image is. You also have a high number of CSS errors.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.webfoodculture.com%2Fspeciali%2Fmangiare-sulla-iss-cibo-nello-spazio%2F

http://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=http%3A%2F%2Fwww.webfoodculture.com%2Fspeciali%2Fmangiare-sulla-iss-cibo-nello-spazio%2F

(BTW, what I’m seeing in Chromium is the image covering the text, not the other way around.)

1 Like

Thanks a lot Gandalf and Techno,

yes, of course, I=m not a coder and my knowledge of html and CSS is VERY basic.

Can you suggest me a VERY EASY tool (editor / plugin etc.) to highlight html and css errors, so that I can easily fix them?

Many many thanks in advance.

A.

The two validators I linked to above do exactly that:

https://validator.w3.org (for HTML)

http://jigsaw.w3.org (for CSS)

If you have difficulty understanding a particular message, then post it here and ask.

The good news is that fixing errors often has a “knock-on” effect; you fix one and several more are resolved as a result. So re-validate the page from time to time as you work through the errors; you might find it’s not as bad as it looks at first.

5 Likes

Hey, Ant.

In the HTML, the 317 errors begin on line 327 with an obsolete tag, <hgroup>. You can probably replace it with a generic <div>, if it’s needed at all.

Jumping down to line 380, there seems to be a closing </p> tag without an opening <p> tag. That’s actually deceptive because all of those hyphens in a row negate what is probably supposed to be “close comment” marks and thus the </p> tag is being commented out… and so it goes. One MUST only use TWO hyphens in the open and close comment marks. Strings of hyphens are a nono.

Line 384, The validator reports that there is no space between attributes… Silly validator… it fails to mention that there are no semicolons between attributes, either. Oh, well… sometimes it expects one to know everything.

If you can clean up those three recurring types of errors throughout your page, you will probably clear most of the 317 errors reported by the HTML validator.

Why don’t you give that a try and let us know how that works for you.

3 Likes

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