I am having a severe bug with Safari. I have set up an unordered list to appear as a box with list items inside it. (It's the beginning of what will be a tag cloud) The CSS looks like this: #items{ width:988px; padding:0.5em 5px 0.5em 5px; border: #cccccc solid 1px; margin: 5px auto 5px auto; } #items li { display:inline; margin-right:5px; } The HTML looks like this: <ul id="items"> <li>text</li> <li>text</li> <li>text</li> </ul> So on my webpage it appears as a wide box with a thin border with text items inside it. It works fine in every browser except Safari where as soon as there are too many text items they overflow out of the box to a large degree before wrapping to the next line. The worst thing is how intermittent the bug is in Safari. Basically it happens 7 out of 10 times. How does a browser decide to make the css work sometimes? All other browsers (IE, Firefox, Opera) correctly wrap the inline list keeping the text items inside the box. I have tried a box made from a div ID and placing the unordered list inside that but the same problem is occuring. I have also tried various text alignment and floating the text various ways too. Please someone help me find out how to fix this bug.
Hi again all, Done some more testing in Safari. What Safari is doing is loading the CSS kinda badly but then once the stylesheet is cached the CSS for that box works fine. Is there a way to trick Safari into loading the stylesheet correctly?
I fixed it by placing the CSS for the tagcloud in the head of the document where it will be forced to load correctly in Safari. Safari has a problem with some caching stylesheet information correctly. This way the CSS loads fresh without caching. Tip for you all
Weird issue, but I'm glad we could help You may be interested in checking out SafariStand. It's a plugin that allows you to directly edit the cached source