Web Site
Developers
Browser Compatibility - Safari 2.0
Previous Reports
Almost from the beginning of this series I have been mentioning / reporting where I have encountered unexpected browser compatibility issues. More recently and more extensively I have pointed out in Structuring Web Pages with DIV Tags III, several other problems with the Safari 2.0 browser on the Mac OS X. Indeed, on that page I tested a temporary solution which I will detail further below. Furthermore, I have experimented with another issue where the results, so far, have not been quite as positive.
First Issue, Absent Left Hand Spacing
Under the section Browser Problems in the above link I discussed this issue, however, I misinterpreted the cause. As noted, under the updates, I told of filing a bug report specifically citing the lack of any space from the left edge. My presumption was that the percentage values were ignored completely, however, that was a mininterpretation. Instead one of the resulting comments set me upon the correct course: it was a precision error. In the comment mentioned my 0.5% padding value evaluated to 0%. Indeed my experience was Safari 2.0 does not even recognize that in a fraction even greater than 0.5%. Here are the values I have used in our standard code:
#left-central-col {
padding-left: 0.7%;
padding-right: 0.3%;
position: relative;
float: left;
width: 74%;
height: auto;
...
}
Note the 0.7% padding value also failed to push the text away from the left edge on the Safari 2.0 browser. Instead, we again saw what appears to be 0% padding. As a result, I use a full percent for the left padding attribute value, which worked:
/* New to test Safari left border problem - works */
#left-central-test-col {
padding-left: 1.0%;
padding-right: 0.3%;
position: relative;
float: left;
width: 74%;
height: auto;
...
}
Here are two images, the first showing the absence of left edge padding and the second now having significant space between the left edge and the start of the article's text, both on the Mac using Safari 2.0.4. The first operated under the top code and the second uses the lower set that will now become the new default code in our standard cascading style sheet:
To date, this has worked on all the browsers, operating systems combinations I have been able to test.
Second Issue, Text in Bands Too Close to Edge
Look at the results of the current code showing Firefox as compared to Safari on the Mac, the former is definitely the better rendered. Here is the html file code that is not altered:
#central-col {
position: relative;
float: left;
width: 55%;
background-color: #FDFFFF;
color: #000000;
border-left-style: solid;
border-left-color: #b22222;
border-left-width: 8px;
...
min-height: 450px;
height: auto;
border-fit: auto;
}
And here is the standard css file code these forms are supposed to operate under:
.bands {
position: relative;
text-align: justify;
font-size: 13pt;
width: 99%;
height: auto;
min-height: 50px;
background-color: #ADD8E6;
color: #000000;
padding-left: .5%;
padding-right: .5%;
...
margin-bottom: 20px;
}
On the Mac the text is hard on the left edge of the band, however, that problem pales with at least a percent of the band is simply absent on the right. The white band just to the left of the vertical red border. The loss of the padding values about matches the one percent that was supposed to have been the sides' padding.
Second Issue, Continued with Test Code
In an effort to compensate for the Safari need to see a full percent to be effective, a partial change has been affected in a test version of the css file:
.bands {
position: relative;
text-align: justify;
font-size: 13pt;
width: 99.0%;
height: auto;
min-height: 50px;
background-color: #ADD8E6;
color: #000000;
/* padding-left: .5%;
padding-right: .5%; */
padding-left: 1.0%;
padding-right: 0.0%;
...
}
The padding is asymmetric partly due to the revisions did not go as smoothly as I hoped. Moreover, I now suspect some of my choices elsewhere were not as I remembered them and I need a basic changes in my approach in critical, related areas.
This time the Safari appears fine while the Firefox rendering is only passable, if that. However, most of our site traffic is from users of versions of IE and Firefox. Therefore, I do not find it tenable to apply this code to the site. Only a few pages will be associated with a test version of the css file, until I find a better solution (see comments below).
What Might Follow
There is at least one major problem we are having that is symptomatic of Safari 2.0 misinterpreting percentage values, however, due to the extent of the changes and the testing necessary I cannot yet be certain my ideas will work. Moreover, I am hoping to to find a better solution to the second issue discussed above. If I am successful another article will follow.
Corrections, suggested extension or comments write: How-To-Guy. If the mailto does not work, use this: hcohen[-At-]bst-softwaredevs.com.
© Herschel Cohen, All Rights Reserved
Return Home or Problems Page