[WSG] safari display issue : help please!
Hi all, hope you can help. I have a problem with a page in safari. I won't bore you with the backstory, but this is from a large and complex template deployment over a range of websites that I have little control over. To solve a problem that kept cropping up due to Block Formatting Context, I used a well documented fix: set the containing div to display:table; All seemed well, didn't seem to break anything, tested, rolled it out... zap! problem! Here is a completely stripped out version of the page, displaying the issue. http://www.woowoowoo.com/safari-bug/formbug.html In all browsers there is (should be) a form. In Safari, there is not. It just vanishes! I can fix it two ways: - wrap the form in a div - remove the display:table; rule on the enclosing div neither of which are very palatable in the context of the site. I would prefer to find some way with CSS to make Safari display the form as it should. Thus far, I have had no luck - any takers? Worth noting that safari 3 displays the page correctly, but that's not much help in the here and now. cheers. -- Andrew Harris [EMAIL PROTECTED] http://www.woowoowoo.com ~~~ * ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Out of office was( [WSG] safari display issue : help please! )
I am away from the office, returning 27th August. If your email is urgent please call 02 8507 9900, email Joanna Vallas, or Chris Collins. Thank you, Sarah *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---BeginMessage--- Hi all, hope you can help. I have a problem with a page in safari. I won't bore you with the backstory, but this is from a large and complex template deployment over a range of websites that I have little control over. To solve a problem that kept cropping up due to Block Formatting Context, I used a well documented fix: set the containing div to display:table; All seemed well, didn't seem to break anything, tested, rolled it out... zap! problem! Here is a completely stripped out version of the page, displaying the issue. http://www.woowoowoo.com/safari-bug/formbug.html In all browsers there is (should be) a form. In Safari, there is not. It just vanishes! I can fix it two ways: - wrap the form in a div - remove the display:table; rule on the enclosing div neither of which are very palatable in the context of the site. I would prefer to find some way with CSS to make Safari display the form as it should. Thus far, I have had no luck - any takers? Worth noting that safari 3 displays the page correctly, but that's not much help in the here and now. cheers. -- Andrew Harris [EMAIL PROTECTED] http://www.woowoowoo.com ~~~ * ~~~ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** ---End Message---
Re: [WSG] safari display issue : help please!
On 23/08/2007, at 5.04 PM, Andrew Harris wrote: Hi all, hope you can help. I have a problem with a page in safari. ... Here is a completely stripped out version of the page, displaying the issue. http://www.woowoowoo.com/safari-bug/formbug.html In all browsers there is (should be) a form. In Safari, there is not. It just vanishes! I can fix it two ways: - wrap the form in a div - remove the display:table; rule on the enclosing div neither of which are very palatable in the context of the site. Hi Andrew, The issue is that you can't technically use the display: table property that way. Safari demands that for every display: table you need a display: table-row and display: table-cell. Your example is something akin to the following old-school HTML: table div.../div form.../form /table Which is obviously unusual. Beware, also; the display: table property doesn't work at all in any version of IE. Check out http:// www.quirksmode.org/css/display.html#table for more info. Cheers, Kit Grose iQmultimedia *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] safari display issue : help please!
On Aug 24, 2007, at 9:44 AM, Kit Grose wrote: I can fix it two ways: - wrap the form in a div - remove the display:table; rule on the enclosing div neither of which are very palatable in the context of the site. Hi Andrew, The issue is that you can't technically use the display: table property that way. Yes, you can. Per http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes an UA will/should insert a table-row and table-cell element. But Safari 2.0.x is buggy in this (and Gecko -Firefox- is buggy the other way around, sometimes inserting too many table-rows). The best solution is 1. use another technique to generate a new block formatting context on the div where you currently use display:table. Using 'overflow:hidden' is a better solution in many cases. 2. or: wrap your form in an extra div. I'd go for the first solution, as it will avoid potential issues with Gecko browsers. Philippe --- Philippe Wittenbergh http://emps.l-c-n.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
