After yesterday’s post I noticed a strange rendering feature of Safari. Here’s a chance for me to reuse my new .screenshot class:
Here is the page as I indended it to be viewed. Notice the uniform space between the bottom of one screenshot and the top of the next.
Here is the same page in Safari 1.2. It’s almost identical, but the <br style=”clear: both;”> has pushed the second image and paragraph below the sidebar. I assume this is because the sidebar is set to float to the left, and the clear is clearing everything, not just what is inside the current <div>.
I’ve mangled the screenshot a little to show the sidebar (red), the main content area (green), and the line that the second screenshot has been pushed below (blue).
According to the spec, Safari does it right. Section 9.5.2 reads:
- both
- The generated box is moved below all floating boxes of earlier elements in the source document.
So, Safari seems to follow it to the letter, but the end result is a little strange. Guess I’ll try to come up with another way that satisfies both browsers. Or maybe the floating sidebar is the part that should be changed. I hear it isn’t the most compatible design method.
Bro, i dont get it…what is this website serving a purpose or somthing fill me in, harhar
It’s a social thing: stuff I like, people I like, and so on. To me, it has no purpose beyond being a venue to say things I think others might want to hear.
Thanks for visiting, bro. =P
Opera 7.23 on winxp seems to render the same as safari.
Alas, so does Win/IE 6.
I’ve fixed the problem by making the sidebar and main content area divs use position: absolute. Initial tests in Mozilla and Win/IE 6 look good. I also changed my stylesheet tags to with @import, a la diveintomark.org. (This means we look the same in modern browsers, and we’re readable in Netscape 4. I won’t complain.)
Any Safari users in the crowd want to report?