Mac problems with CSS (i think)

Site breaks completely in IE5 for OS9, & quirks in OS X in Safari & IE5.2

[bragan]

I am building a site for a photojournalist friend. It works fine on the PC in IE 5, 5.5, 6 for PC (I am ignoring netscape).

But, I'm having three problems on the Mac:

1) the site gets utterly whacked in IE 5.0 (and possibly other versions) for OS9.

2) In OS X, Safari does not properly render captions (#ss_text) and slide numbers (#ss_counter) and previous/next button navigation.

3) Also in OS X, IE 5.2 has one little problem--busting out a bar from the right edge of the page, thereby extending the horizontal scroll way out.

I'm no expert and my patchwork code may not be entirely elegant, but I'd really like to make this site work for a friend of mine, and would immensely grateful for any help...

Not sure if I can post the url but i'll try (it's not promotional i swear!). An example page with captions would be: <Sorry, no personal URLs. See TOS [webmasterworld.com]>

In case that doesn't work, i'll include some relevant css here? should i post the html too? seems like a lot for this posting...

thank you!

==CSS ======================
/*html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;
}
*/

body {
font-family: verdana, sans-serif;
background:#f3f4f4;
margin:0;
}

#contents {
position: absolute;
top: 0;
left: 0;
width:100%;
}

#logobar {
position: absolute;
background-color:#000000;
left:0px;
width:960px;
height:80px;
z-index: 1;

}

#logobar .clients {

background-color:#000000;
vertical-align:bottom;
position:absolute;
top:44px;
right:196px;
}

#logobar .biography {

background-color:#000000;
vertical-align:bottom;
top:44px;
position:absolute;
right:86px;
}

#logobar .contact {

background-color:#000000;
vertical-align:bottom;
right:0px;
top:44px;
position:absolute;
}

#logobarr {
position: absolute;
background-color:#000000;
left:960px;
width:40px;
height:80px;
z-index: 1;
}

#spacerl {
height:40px;
width:190px;
background-color:#f2f2f2;
margin-top:80px;
position:absolute;
left:0px;
z-index: 2;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-left-style:none;
border-top-style:none;
border-right-style:none;
}

#spacerll {
height:40px;
width:315px;
background-color:#f2f2f2;
margin-top:80px;
position:absolute;
left:190px;
z-index: 2;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-top-style:none;
border-right-style:none;

}

#spacerr {
height:40px;
width:475px;
background-color:#f2f2f2;
margin-top:80px;
position:absolute;
left:505px;
z-index: 2;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-top-style:none;

}

#spacerrr {
height:40px;
width:22px;
background-color:#f2f2f2;
margin-top:80px;
position:absolute;
left:980px;
z-index: 2;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-right-style:none;
border-top-style:none;
border-left-style:none;
}

#leftnav_area {
color:green;
position: absolute;
left:0px;
width:190px;
height:415px;
position:absolute;
background-color:#f3f3f3;
margin-top:120px;
z-index: 3;
}

#thumbnail_area {
background-color:#e2e3e4;
margin-left: 190px;
width: 315px;
position:absolute;
margin-top:120px;
height: 415px;
z-index: 4;
border-left-width:1px;
border-left-style:solid;
border-left-color:#cccccc;
border-bottom-width:0px;
border-bottom-style:solid;
border-bottom-color:#cccccc;
}

#divUp {
position:absolute;
left:473px;
top:173px;
}

#divDown {
position:absolute;
left:473px;
top:451px;
}

#divScrollTextCont {
position:absolute;
left:20px;
top:20px;
width:270px;
height:330px;
clip:rect(0px,300px,330px,0px);
overflow:auto;
padding-right:18px;
overflow-bottom:hidden;
}

#divScrollTextCont {
padding-right:0px;
}

#closelink {
position:absolute;
bottom:30px;
font-family:Myriad Roman, Myriad, Helvetica, Verdana, Arial, sans-serif;
font-size:11px;
font-weight:bold;
right:42px;
color:#4a4a4a;
visibility:visible;
z-index:1;
}

#divText {
position:absolute;
left:0px;
top:0px;
visibility:visible;
float:none;
}

#descrip {
background-color:#d2d3d4;
margin-left:505px;
width:475px;
height:415px;
position: absolute;
margin-top:120px;
padding-top:20px;
font-family:Myriad Roman, Myriad, Helvetica, Verdana, Arial, sans-serif;
font-size:13px;
color:#4a4a4a;
overflow:auto;
z-index:12;
margin-bottom:20px;
line-height:17px;
border-left-width:1px;
border-left-style:solid;
border-left-color:#cccccc;
visibility: visible;
}

#photo_area {
background-color:#d2d3d4;
margin-left:505px;
width:475px;
height:415px;
position: absolute;
margin-top:120px;
z-index: 6;
border-left-width:1px;
border-left-style:solid;
border-left-color:#cccccc;
border-right-width:1px;
border-right-style:solid;
border-right-color:#cccccc;
visibility: visible;
}

#photo_area .ss_img_div {
background-color:#d2d3d4;
margin-left:25px;
width:425px;
position: relative;
margin-top:20px;
visibility:visible;
text-align:center;
}

#enlarge {
font-family:Myriad Roman, Myriad, Helvetica, Verdana, Arial, sans-serif;
font-size:11px;
color:#4a4a4a;
background-color:#d2d3d4;
margin-left:862px;
position: absolute;
margin-top:444px;
width:90px;
visibility:visible;
z-index: 9;
bottom-border:none;
}

#photo_title {
font-family:Myriad Roman, Myriad, Helvetica, Verdana, Arial, sans-serif;
font-size:13px;
font-weight:bold;
color:#4a4a4a;
background-color:#d2d3d4;
margin-left:530px;
position: absolute;
margin-top:450px;
visibility:visible;
z-index: 8;
}

#ss_text {
font-family:Myriad Roman, Myriad, Helvetica, Verdana, Arial, sans-serif;
font-size:11px;
color:#4a4a4a;
margin-left:530px;
position: absolute;
margin-top:472px;
visibility:visible;
z-index: 10;
width:300px;
}

#previous {
background-color:#d2d3d4;
margin-left:869px;
position: absolute;
margin-top:470px;
visibility:visible;
z-index: 9;
}

#next {
background-color:#d2d3d4;
margin-left:932px;
position: absolute;
margin-top:470px;
visibility:visible;
z-index: 11;
}

#ss_counter {
font-size:11px;
font-family:Myriad Roman, Myriad, Helvetica, Verdana, Arial, sans-serif;
font-weight:bold;
color:#4A4A4A;
align:left;
background-color:#d2d3d4;
margin-left:890px;
position: absolute;
margin-top:474px;
visibility:visible;
z-index: 10;
}

#spacerbl {
margin-top:535px;
width:190px;
height:50px;
margin-bottom:0px;
background-color:#f2f2f2;
position:absolute;
left:0px;
z-index: 2;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-left-style:none;
border-right-style:none;
border-bottom-style:none;
}

#spacerbll {
margin-top:535px;
width:315px;
height:50px;
margin-bottom:0px;
background-color:#f2f2f2;
position:absolute;
left:190px;
z-index: 2;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-bottom-style:none;
border-right-style:none;
}

#spacerbr {
margin-top:535px;
margin-bottom:0px;
height:50px;
width:475px;
background-color:#f2f2f2;
position:absolute;
left:505px;
z-index: 11;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-bottom-style:none;
}

#spacerbrr {
margin-top:535px;
margin-bottom:0px;
height:50px;
width:22px;
background-color:#f2f2f2;
position:absolute;
left:980px;
z-index: 11;
border-style:solid;
border-color:#cccccc;
border-width:1px;
border-right-style:none;
border-bottom-style:none;
border-left-style:none;
}

[edited by: tedster at 5:47 am (utc) on April 13, 2004]

[SuzyUK]

Hi bragan - Welcome to WebmasterWorld

firstly..yes that really is too much code.. and as you've discovered URL's are not allowed, promotional or not it just a rule also test links tend to land up broken so it's best to post the code for the source of a problem so folks reading the thread later know what we were talking about :)

MAC/IE has numerous CSS bugs of it's own.. and there some useful resources out there which may help, this one for example [macedition.com] - if I may, I would suggest stripping your code to the basic source of each individual problem and reposting if you still need help

:)
Suzy

[HelenDev]

I notice there are lots of positional elements in your css. I personally found postitional css to have many problems when trying to be cross-platform/browser compatible. I know it's very politically incorrect of me, but I use css for everything except positioning, and use tables where accurate positioning is needed.

[isitreal]

Also, since you are making this for graphic type artists, you should think about testing your code primarily on Mozilla/Netscape and Opera, not IE 5-6 windows.

From what I've seen, Opera 6-7 is closest to Safari/Mac IE 5x in functionality and bugs, though of course not identical.

If your pages work perfectly on Opera 6 it is more likely that they will work on all Mac browsers. If you can't find Opera 6, use 7, but that has a lot less bugs.

For Safari screenshots, go here: [danvine.com...]

unfortunately that site doesn't offer Mac IE 5x screenshots yet.

[HelenDev]

isitreal, what a cool site!

I have been looking for something like that for ages.

...even if it did call me an insensitive clod for having flash...