Results 1 to 2 of 2

Thread: Overlapping text and images

  1. #1
    Join Date
    Mar 2015
    Location
    Hervey Bay, Queensland, Australia
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Overlapping text and images

    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
    Last edited by Beverleyh; 03-13-2015 at 09:22 AM. Reason: formatting

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Drop down/ Overlapping Content (using 2 images off and onclick)
    By newyorker2 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-17-2008, 03:51 PM
  2. images overlapping
    By jahaik in forum JavaScript
    Replies: 3
    Last Post: 12-17-2007, 07:52 AM
  3. Code for overlapping images
    By fungusmonkey in forum HTML
    Replies: 6
    Last Post: 09-05-2007, 07:40 PM
  4. Images overlapping divs
    By AdRock in forum CSS
    Replies: 1
    Last Post: 03-20-2007, 10:57 AM
  5. Images overlapping DIVs - please help
    By lyndalouise in forum CSS
    Replies: 3
    Last Post: 06-16-2005, 08:13 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •