6
I’m trying to track down a particular CSS problem in Safari. In Firefox, a div with width set to auto will expand to fill available space, and a float: right image will go to the right edge of the window; in Safari, the width appears to set to the widest text element, and the floated image crams in uncomfortably.
What I discovered was that Safari (at least up to the 2.x version I’m using) has a nice “Debug” menu which is disabled by default. To enable it, quit Safari, then go to the Terminal and give this command:
defaults write com.apple.Safari IncludeDebugMenu 1
Then restart Safari. Unfortunately, this doesn’t include a CSS debugger anywhere near as helpful as the Firebug extension available for Firefox. Firebug not only shows the CSS rules applied to each HTML element on the page, it allows you to tinker with them and preview your changes.
I’m still not sure why my auto-width div won’t expand, but I added a min-width rule which seems to be an acceptable stopgap for now.
filed under: Web development | permalink