Printable View
Hi
First post to the Forum so I hope I am posting in the correct area.
Could anyone please tell me why the text and images overlap in some browsers and not others.
I am looking at http://www.frayedknotarts.com/bellsales.html and in Firefox it overlaps, In IE there is some overlap but in Chrome it all appears good.
Other pages on the same site have similar problems.
I beleive the owner is using a WYSIWIG SiteBuilder software.
All comments appreciated.
Thanks
Brianne
It is due a combination of absolute positioning, line breaks and different browser font rendering.
The person who has built this page (or rather the web builder that they are using) has used absolute positioning, which means that each block of text or image is fixed to a specific top/left coordinate. This method of building web layouts used to be popular because it gave visual control to the designer, and it stems from an era of print design when folks designed for a fixed medium.
The difference in text is down to browsers that render fonts slightly differently - lettering is wider or taller in some browsers, which causes words to break at different places in a sentence (why some words have dropped on to the line below in IE). This is just something that we have to accept and try to work with.
Manual breaks <br/> have also been used to force carriage returns - the reason for single words occupying a line in IE.
Lessons to learn from this scenario (corrections may or may not be possible with the software used);
- Try not to use absolute positioning for individual blocks of text. Use relative positioning so that the 'flow' of content is maintained. If you have to use absolute positioning for text blocks, make them big enough to allow for browser rendering differences.
- Accept that text (and other things) renders differently across browsers and try to work with it.
- Don't force breaks in text <br/> if you can help it. Allow text to flow to fill space naturally.
- Check/test your work in multiple browsers, regularly.