[WSG] Safari and bg-images for list bullets
I have a couple of problems with Safari which can be seen on this page: http://www.tyssendesign.com.au/examples/test.html The first is the misalignment of the bg-images that I'm using for bullets. Every other browser including IE5 displays them how I want them except for Safari. I did a quick search but the only thing I came up with was that this was a bug that only affected earlier versions but it seems to be the same in Safari 2.0 too. So, is there a solution? Does it require using a Safari-only filter? Which brings me on to the next problem which is illustrated by the search box. Most browsers displayed it how I wanted, but I had to use a filter to give Opera 8.5 a different height (Opera 9 is OK). It seems like Safari has the same problem, so again, do I need to add a filter for Safari, or is there a better way to do this without resorting to any filters/hacks? Cheers John -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Safari and bg-images for list bullets
On 10/10/06, John Faulds [EMAIL PROTECTED] wrote: I have a couple of problems with Safari which can be seen on this page:http://www.tyssendesign.com.au/examples/test.htmlSo, is there a solution? Does it require using a Safari-only filter? I ran into the same problem not long ago, and solved by simply altering the image itself - to have more whitespace between the two states (hover and not-hover). Using a gif it won't make the image file any (noticeably) larger. It's not an ideal solution, but it's a means to an end. ~eys ***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
Re: [WSG] Safari and bg-images for list bullets
I've already done that though. The space between the two states is about 5 times the height of the actual bullet. In Safari you can actually seem the on state appearing above the off state even though it's about 40px below it in the image file and bg-repeat is set to no-repeat. On Tue, 10 Oct 2006 21:11:20 +1000, Eystein Alnaes [EMAIL PROTECTED] wrote: On 10/10/06, John Faulds [EMAIL PROTECTED] wrote: I have a couple of problems with Safari which can be seen on this page: http://www.tyssendesign.com.au/examples/test.html So, is there a solution? Does it require using a Safari-only filter? I ran into the same problem not long ago, and solved by simply altering the image itself - to have more whitespace between the two states (hover and not-hover). Using a gif it won't make the image file any (noticeably) larger. It's not an ideal solution, but it's a means to an end. ~eys *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Safari and bg-images for list bullets
On 10/10/06, John Faulds [EMAIL PROTECTED] wrote: I have a couple of problems with Safari which can be seen on this page: http://www.tyssendesign.com.au/examples/test.html So, is there a solution? Does it require using a Safari-only filter? I ran into the same problem not long ago, and solved by simply altering the image itself - to have more whitespace between the two states (hover and not-hover). Using a gif it won't make the image file any (noticeably) larger. It's not an ideal solution, but it's a means to an end. I've already done that though. The space between the two states is about 5times the height of the actual bullet. In Safari you can actually seem theon state appearing above the off state even though it's about 40px below it in the image file and bg-repeat is set to no-repeat.I should've remembered, I added whitespace at the top and bottom of the image, and adjusted the background-postition accordingly. In other words, it's still showing the bottom/top in the wrong place, but since you've changed it to the same backgroundcolor (or transparent) it won't show. If anyone knows why the bottom of the bg shows above the top on no-repeat please feel free to enlighten us! ~eys ***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
Re: [WSG] Safari and bg-images for list bullets
On Oct 10, 2006, at 6:59 PM, John Faulds wrote: http://www.tyssendesign.com.au/examples/test.html The first is the misalignment of the bg-images that I'm using for bullets. Every other browser including IE5 displays them how I want them except for Safari. I did a quick search but the only thing I came up with was that this was a bug that only affected earlier versions but it seems to be the same in Safari 2.0 too. So, is there a solution? Does it require using a Safari-only filter? It is a known bug with Safari: happens when the background image is too large for the container. part of that bug has been fixed in nightly builds, but the 'hover' problems still is buggy in the latest Webkit build I have. A bug report has been filed ages ago (2years at least in my case), but the engineers there are not overtly concerned, it seems. Workarounds include: let the image move horizontally instead of vertically or vice-versa, use an oversized image with loads of white space, use different image for the various states... Here is a page of mines that tested this (created in June 2004, according to my notes). http://dev.l-c-n.com/Safari/background-hover.php 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] ***
Re: [WSG] Safari and bg-images for list bullets
use an oversized image with loads of white space I ended up doing this as per the example in your link with the extra white space below (as well as in between) and now it's fine. Thanks. Any ideas on the height of the input problem? -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
