I’ve been tinkering with the layout some, trying to get that tall skinny graphic on the right side to line up flush with the top box; unfortunately, I’m bedeviled by the fact that all these browsers interpret the CSS box model differently. Basically, the top black area has some padding so that the left menu and middle body text don’t butt flush up against it, so I’ve tried to remedy that by giving the right box a negative top margin. Unfortunately, what this seems to mean so far is that in Safari, OmniWeb, and Konqueror-based browsers, a minus 12 pixel top margin gets the picture flush, and gets it with just a one-pixel line in Mozilla-type browsers. Unfortunately, it winds up looking like crap in Opera (which is really weird: is the rest of the browser industry wrong, or is the W3C’s Håkon Wium Lie wrong?), and even worse crap in Macintosh MSIE (which isn’t weird at all).
According to my site statistics, most of the pageviews I’m getting come from Mozilla-type browsers. So I’d like to ask you for feedback: how does the layout look now, in your browser, especially with how that right-side graphic lines up with the black top box? Much obliged, dear reader.
In my browser (Firefox), Mike, it’s nearly flush with the black header box. Looks like a solid white border 1px thick separates them. In the CSS editor, when I switch the sidebox1 id (topmargin) to -14, it’s perfectly matched up. At -13, there’s a white sliver. Let me know if a screenshot would be any help and I’ll email it.
Looks great from here (Safari on Mac OSX.2.8)… everything lines up perfectly!
Ditto Derek’s comments, down to the white sliver (using Ffox on a linux box).
Derek, Kendra, MRBS — thanks! I think I’ll leave it as is for now; the 1-pixel sliver is OK, and better than having the graphic overlap the masthead in Konqueror browsers.
I just looked at the page in both firefox and safari on a Mac. It’s interesting because the graphic on the right lines up with the box on the top in both browsers, but in Safari, I get a green background behind it all and in Firefox, I don’t.
I’ve had to learn a lot more about CSS this semester because of a class I’m teaching, and as far as I can tell, positioning is pretty freakin’ tricky and a varriable on the browser for sure.
Anyway, it looks good as is.