css safari table placement

Discussion in 'Web Design and Development' started by locoLindy, Feb 21, 2007.

  1. locoLindy macrumors newbie

    Joined:
    Feb 21, 2007
    #1
    OK, I confess I done my site creation on a PC, but my problem is the way Safari renders table placement.

    In the beginning, I used a defined a class using position:absolute; bottom 30px; Every browser other than Safari understood this instruction set and placethe table where it belong...except Safari.

    Since the Safari audience is important to the web site I tried another appraoch. I removed the absolute positioning from the class; placed the table in a <div> and positioned the <div> using position:absolute; bottom:30px; Same result.

    In desperation I decided Safari was having difficulty finding "bottom" and changed the positioning to: position:absolute; top:530px; figuring surely it can find "top" and position the <div> correctly. Wrong again.

    Has anyone out ther had a similar experience? If so what's the work-around?

    The sproblem can be seen at http://www.galleryinthesun.com/Sharon-Stillwater/artPages/atTheWinterMarket.aspx

    Thanks for help!
     
  2. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #2
    I'm assuming that the problem you're seeing is that the footer is being cut off. I need to look at your HTML further but I will say that "position:absolute; bottom:30px;" works fine in Safari, as the following bit of HTML demonstrates:
    Code:
    <html>
    <body>
    <div style="width:400px; height:50px; position:absolute; bottom:30px; background-color:cornsilk;">FOOTER</div>
    </body>
    </html>
    EDIT:

    P.S. I could find no "bottom:" directive in this file or the associated CSS.

    P.S.S. If you are coding XHTML, you may want to make sure it validates properly. That always help.
     
  3. locoLindy thread starter macrumors newbie

    Joined:
    Feb 21, 2007
    #3
    Thanks for taking the timeto reply.

    I'm working on information provided by my step-son who is a Mac user and several disgruntled clients so I'm working a little in the blind. I have only seen the problem myself on one occasion; the rest is dependent on verbal discriptions.

    The table: Title, Medium, Size, Price and Artist's Comments are contained in a <div> using position:absolute; top:520px; left:70px;.

    The footer is in its own <div> using position:absolute; left:2px; bottom:0; Both <div>s are define in the GalleryStyles.css file.

    One of the things that is so perplexing is I hand-code everything and the software I use enforeces strict XHTML 1.1 standards. I also have Firebug on my machine and it gives me clean bill of health. As I indicated this site runs perfectly on Netscape, IE6 and Firefox.

    The other mystry is that the balance of the site runs clean in Safari.

    Again, many thanks for your time. Any other observations will be appreciated.
     
  4. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #4
    Oops, I missed the link to GalleryStyles.css! Okay, I think I may have found the problem: #footer has a height directive of 30px. I think Firefox, etc. are automatically increasing this because the content within it needs more space. But Safari isn't. And when rendered in Safari, the footer needs more than 30px to display correctly. I would suggest setting the height to 40px, which from my testing seems about right. And doesn't seem to make things worse in Firefox. Hope that helps!

    I'm sorry but your software is letting you down. I ran this page through the W3C HTML Validator and it didn't validate. In fact, this page is tagged as being XMTL 1.0 Transitional not 1.1. Follow this link to see why it's not valid.
     
  5. locoLindy thread starter macrumors newbie

    Joined:
    Feb 21, 2007
    #5
    I've changed the stylesheet to reflect your suggestion. Would you be so kind as to see if it looks ok now? Thanks.

    I about had heart failure when I looked at the W3 validation! Then I started checking them out one-by-one and a light came on. All but two of the errors were caused by the fact it validated the raw page as opposed to the published page; this is a .net 2 site and the things W3 didn't like were in controls that never make to the web, they "just" cause things to happen on the server side.

    The other thing they didn't like was "&#147;" and "&#148;" saying they were not SGML complient, but they are HTML 4.0 and XHTML 1.0 complient.

    As I indicated, my software doesn't let me get away with much and I take a lot of pride in my mark-up.

    Again, thanks for all your efforts. I really do appreciate it.
     
  6. dejo Moderator

    dejo

    Staff Member

    Joined:
    Sep 2, 2004
    Location:
    The Centennial State
    #6
    Fixed! Looks fine.

    Actually, it really is complaining about the <embed> tag used for your logo. <embed> was never part of standard HTML. More here. The " are just the start of the attribute values that it doesn't like, as in name="...". name is not a valid attribute name in this case.

    You're welcome.
     

Share This Page