Web Site
Developers
Browser Compatibility - Safari - II
What Was Right in Part I
The absence of space on the left edge of the browser was solved for Safari without doing harm to other browsers by simply raising the percentage value of the padding-left attribute to a full one percent. While I am not absolutely certain, it appears that Safari 2.0 series rounds off fractional percentage values to the lower, full percent value. Perhaps of equal importance to the accomplishment was my beginning to think more about some of the choices I had made in the css file code when trying to complete the front page. I noticed my thinking I had used percentage values everywhere was in error. The large exception was in using fixed pixel sized borders. In addition, I was giving some thought as to why I had experienced mis-matched borders with both Firefox (and IE) as well as Safari.
The latter, above was the problem I mentioned that I was not going to address in the first part. I have since learned part of my problems were self inflicted, which is the core of what is discussed here. However, the changes discussed here and shown in images are not going to be implemented immediately on the production server for this site. So do not be too jarred by what you may seeing on the pages not matching the changes shown in some of the examples.
Border Problems
To save you some grief, do not insert percentage values for border width attributes, they are not supported. To gain the flexible border widths I sought, I substituted the value "thick". Nonetheless, thick is still thin compared to the 8 pixel widths I had been using. This change and the guess that the text area within the band structure now took about 98% allowed most browsers to have acceptable appearance.
Border Changes: Details
On the first page, the borders are in the central-col area of the cascading style sheet. Here is where I began my code modifications; we will look at only the border widths, this time:
#central-col {
...
border-right-style: solid;
border-right-color: #b22222;
border-right-width: thick; /* 8px; inconsistent */
...
}
The settings for the left border duplicate the right shown above. This is the first step. Now we address the band class changes:
.bands {
...
width: 98.0%;
...
padding-left: 1.0%;
padding-right: 1.0%;
...
}
The thin borders at the top and bottom were left unaltered at 3 pixels.
Lets look at what is only for the moment, the production site appearance. It differs from the others in having an 8 pixel border width in the central-col area, a band width of 99% and side paddings of a half percent:
Here is an image of the same code run on Safari 2.0 Mac version:
Despite the appearance, when this image is full size the borders are nearly identical in size to the one above it. Nonetheless, I think you can still make out the space between the band's right edge and the red vertical border. A similar space is seen on Safari 3.0 running on Windows XP [shown well below]. At this juncture I do not have a fix, hence, for now I am willing to live with this varying imperfection. I have other bigger problems that need attention involving both Firefox and IE that take precedence. In any case, it is time to move onto what was once the bigger issue.
Mis-Matched Borders in the Footer
The failure of the borders in the central footer area on the main page to align in Firefox bothered me. At the time I did a quick adjustment just to get it working, however, I was troubled that a simple replication of much of the css code from the three columns above did not match exactly in the footer. I had decided to look at this issue more closely. The non-matching borders in the footer for Safari 2.0 was trivial: fractional percentage values that I used to make Firefox and IE work assured the failure of the former. Here is an image of how it looks under Safari:
Though only one side is shown here, due to restricted space, the mis-match is symmetric with the right side showing the same defect.
Mis-Matched Borders: Details
The percentages of the div column areas on the front page were full percentage values, the only immediate difference discovered was that the #col-left code showed a padding-right value of 3 pixels. I doubt such a small value could have been cause of the mis-match. I duplicated the footer div css code to the columns above in every respect but height and color now using the thick value setting for the borders. The borders were still unaligned. The key problem, however, may be seen in the top image in this article. Shown at the bottom right if the footer base having a rather thick (in pixels) border that is not part of the three column structure in the central front page. Once removed the matches are quite good. We begin looking at the Safari 3.0 beta version running on XP:
We are not quite home free, since there is a gap at the right edge of the central article summary band and a larger gap at the right footer edge to the browser. At the moment I lack a solution for either. Nonetheless, Safari 2.0 on the Mac 10.4 OS X is nearly identical in appearance:
Finally here is a shot of Firefox operating under the same code:
Pretty reasonable, however, I still think I can make out a very slight space between the central blue band edge and the red vertical border. Moreover, I know one exist at the right bottom footer right edge and the browser edge.
Conclusions
Despite seeming to have nearly solved two more issues with the Safari browser, it is obvious others problems remain. The best course is not to forget they are there and be attuned to potential solutions. Moreover, you need not be thinking of it consciously. Just acknowledge the flaws exist and be prepared to accept solutions, whatever the source.
To avoid confusing you I had cut the bottom edge off the images selected otherwise you might have noted the borders in the central footer float did not reach as far down as the adjacent footer floats. The solution is trivial, I just lack the content to fill this area at the moment, once done they will reach the bottom.
Another in the Series
How To: Coding html and css files by hand. I hope the content has been of some use. Moreover, do not forget the problems you that you papered over. Return to them later and clean up the code. One of the great advantages of having the style reside in the cascading style sheet(s), is the corrections can be made at a central location without the necessity to search each and every page file to have the change apply to the entire site. The lesson remains: separate your page structure from its style and reuse the code by reference not rote copying.
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