Safari Breakage (+ a shoutout to IE)

Hmm, seems some recent CSS change broke the sidebars in Safari 2 on Tiger. Safari’s CSS support is quite good; so it’s more than likely my bug (though Firefox does render this site as I expect). I’ll try and figure out what’s going on and fix it. In the meantime, if anyone is using Internet Explorer to view this site, please let me know how it looks. Thanks.

OK. I see the problem. It’s this rule for the search form text field:

#sidebar #searchform #s {
	width: 55%;
	padding: 2px;
	}

I can change that to

#sidebar #searchform #s {
	width: 15%;
	padding: 2px;
	}

Then Safari works. However, the search box gets too small in Firefox. I suspect the two browsers are measuring that 15/55% against different elements. One’s probably measuring against the page and one against the parent, or some such. So let’s try font-relative units instead. 8 em should work nicely:

#sidebar #searchform #s {
	width: 8em;
	padding: 2px;
	}

That looks about right and seems to work well in both browsers.

2 Responses to “Safari Breakage (+ a shoutout to IE)”

  1. marco Says:

    You asked “if anyone is using Internet Explorer to view this site, please let me know how it looks” just to make me laugh out loud, didn’t you?!

    OTOH I read the posting on my 5-year-old Dell notebook — which this past weekend lost it’s W2K o/s, receiving Ubuntu 5.10 in its place…. it’s so different in this world…. I think I can hear the birds singing….. :-D

  2. manfred Says:

    Internet Explorer? Well, you made me curious.
    The result is: you sidebar is visible at the end of the page on the left side. :-O
    Oh no, wait. If I resize the window to a width of 1600px, it’s just where it should be. Ok, let’s try different font sizes… Yeah, right, if the font is small enough, everything looks as it should. If not, well, you get the sidebar at the end, right below the “Submit Comment” button.

Leave a Reply