SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Grantspad69's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    W3C Accessibility standards

    Hi,

    I've just been given the task of translating an existing web page design into code that is accessible according to the W3C Accessibility standards.

    For this reason I have decided to eliminate the use of tables and use divs with CSS positioning - somthing I am trying for te first time.

    I've managed to get the site to be XHTML Transitional validated, and got it to look ok on 800*600 and above screen resolution on IE, but get a couple of errors on Firefox and Netscape Navigator.

    The footer bar is out of place and goes across the top just beneath the header. And there is a bit of text next to the News image/subsection that appears benaeth the image rather than next to it.

    Does anybody have any ideas on how I could fix these problems?

    Any help will be appreciated.

    The html: http://www.hewitson.me.uk/bishopauck...accessible.asp

    The CSS(messy at the moment):
    http://www.hewitson.me.uk/bishopauckland3/CSS/main3.css

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,287
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You need to add a clear:both to the footer so that it clears the content etc.

    The text is below the image because you have floated it without a width so the browsers may defaoult to 100% or may default to content width. Floats must have a width (unless they are replaced items e.g. images).

    You could just take the float out altogether and set a margin instead as follows.
    Code:
    #footer {
    clear:both;
    padding : 0; 
    margin : 0; 
    width : 100%; 
    height : 20px; 
    text-align : center; 
    } 
    .contentnavtext {
    margin : -2px 0 0 55px; 
    padding : 0; 
    }
    Hope that helps.

    paul

  3. #3
    SitePoint Zealot Grantspad69's Avatar
    Join Date
    Jun 2003
    Location
    UK
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    You need to add a clear:both to the footer so that it clears the content etc.

    The text is below the image because you have floated it without a width so the browsers may defaoult to 100% or may default to content width. Floats must have a width (unless they are replaced items e.g. images).

    You could just take the float out altogether and set a margin instead as follows.
    Code:
    #footer {
    clear:both;
    padding : 0; 
    margin : 0; 
    width : 100%; 
    height : 20px; 
    text-align : center; 
    } 
    .contentnavtext {
    margin : -2px 0 0 55px; 
    padding : 0; 
    }
    Hope that helps.

    paul

    Cheers dude


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
  •