This past weekend I noticed something very strange with a number of pages on my website. Text was appearing on top of images in numerous pages. The issue only seems to occur with Chrome, and it’s intermittent.
If you open this page in Chrome, everything will likely look okay. But if you hit refresh once or twice, you’ll notice that the text in the main body of the page will float on top of the images.
This page (and many others) work fine in IE, and they worked fine in Chrome up until recently.
I have no idea what could be causing it as I’m using a simple ‘Align’ command to place the image to the right or left of the page.
I don’t see any of the issues you describe in either Chrome or Firefox.
But looking at the code, the way the html is structured and the page is laid out, leaves a lot to be desired.
Without wishing to sound rude, but being honest, it uses very “old-school” methods that don’t belong in this millennium.
I can only recommend a complete re-write using valid, semantic html and css to handle the layout.
Sorry to be so harsh, but that’s my honest opinion.
Yes I see the text all over the images in Chrome. I’m guessing its because the img doesn’t have height and width attributes and not enough space gets allocated although that’s just a guess. The images are much to heavy a file size and there is a long delay before they load.
That may be a quick fix for it. But the clashing text and pictures is probably due to the text not being properly structured within <p> tags to keep it as separate block elements.
Damn you, fast fibre internet, making me miss that! (())
Of course you need both opening and closing p tags to be correct:-
<p>This paragraph of text.</p>
It may be a good idea to use Paul’s suggestion of adding width and height attributes to the images.
I would also float the images to one side rather than using the old align attribute.
There are a million other things I would change, but that’s a good start.
Just to be clear about the usage of br and p tags:-
Yep - I’m aware of the need for a <p> and a closing </P>, which will make it a little more difficult to do a mass search and replace across all of my pages (hundreds of them).
I’m curious, however. How would you float an image to the right side of the page without using the align attribute?
It’s just a basic css property. I usually wrap the image in a suitable block container, a in html5 or <div> if you stick with older versions. Give it a class and assign `float to that.
Ideally I would go with both. Containing the text in p tags and floating the images.
But if you are going for a “quick fix” for now and only have time for one, I would probably go for the Ps. I don’t like to see text hanging around uncontained.
But if you are prepared for “A lot of work” your time would be best spent with a full-on coding overhaul in the long term, and make the quick fixes just for now.
That would involve re-learning and re-thinking how you code to create a page and learning html5, css3, and responsive design. But that’s a lot to learn, beyond the scope of a single thread, so for another time if you are prepared to take the leap.
Yes, that could work in this case.
But I usually wrap my images because it gives more control over making them responsive, plus using figure and accompanying figcaption tags adds semantic value, rather than just meaningless divs to hang classes from.
i dont see anything like that but as a friendly advice skip edit image which is see people very easly …skip it replace it thanks link is http://prntscr.com/cq7rm1 and change the comment option like fb comment make it default like other site , thanks i hope you dont mind best of luck
))