{"id":29,"date":"2005-11-28T08:54:24","date_gmt":"2005-11-28T13:54:24","guid":{"rendered":"http:\/\/blog.elharo.com\/blog\/software-development\/web-development\/2005\/11\/28\/safari-breakage-a-shoutout-to-ie\/"},"modified":"2005-11-28T09:44:12","modified_gmt":"2005-11-28T14:44:12","slug":"safari-breakage-a-shoutout-to-ie","status":"publish","type":"post","link":"https:\/\/www.elharo.com\/blog\/software-development\/web-development\/2005\/11\/28\/safari-breakage-a-shoutout-to-ie\/","title":{"rendered":"Safari Breakage (+ a shoutout to IE)"},"content":{"rendered":"

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. <\/p>\n

OK. I see the problem. It’s this rule for the search form text field:<\/p>\n

#sidebar #searchform #s {\r\n\twidth: 55%;\r\n\tpadding: 2px;\r\n\t}<\/pre>\n
I can change that to<\/p>\n
#sidebar #searchform #s {\r\n\twidth: 15%;\r\n\tpadding: 2px;\r\n\t}<\/pre>\n
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:<\/p>\n
#sidebar #searchform #s {\r\n\twidth: 8em;\r\n\tpadding: 2px;\r\n\t}<\/pre>\n
That looks about right and seems to work well in both browsers.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[410],"class_list":["post-29","post","type-post","status-publish","format-standard","hentry","category-web-development","tag-flash"],"_links":{"self":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/comments?post=29"}],"version-history":[{"count":0,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/posts\/29\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/media?parent=29"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/categories?post=29"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elharo.com\/blog\/wp-json\/wp\/v2\/tags?post=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}