Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

css safari table placement

L

locoLindy

macrumors newbie
Original poster
Feb 21, 2007
3
0
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!
 
locoLindy said:
The sproblem can be seen at http://www.galleryinthesun.com/Sharon-Stillwater/artPages/atTheWinterMarket.aspx
Click to expand...
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.
 
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.
 
locoLindy said:
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.
Click to expand...
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!

locoLindy said:
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.
Click to expand...
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.
 
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.
 
locoLindy said:
I've changed the stylesheet to reflect your suggestion. Would you be so kind as to see if it looks ok now? Thanks.
Click to expand...
Fixed! Looks fine.

locoLindy said:
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 "“" and "”" saying they were not SGML complient, but they are HTML 4.0 and XHTML 1.0 complient.
Click to expand...

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.

locoLindy said:
Again, thanks for all your efforts. I really do appreciate it.
Click to expand...
You're welcome.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back