[PATCH] Debug Toolbar Renders Incorrectly in Safari

Screenshot of the Safari rendering

3 Solutions that I found:

1.) In [php data directory]/symfony/web/sf/sf_web_debug/css/main.css, modify identifier "#sfWebDebugBar .menu li" so the padding looks like this:

padding: 0px;

Cons: formatting isn't as intended once change is made

2.) In [php directory]/symfony/debug/sfWebDebug.class.php, change line 330 from:

<li><a href="#" onclick="sfWebDebugShowDetailsFor(\'sfWebDebugConfig\'); return false;">'.image_tag(sfConfig::get('sf_web_debug_web_dir').'/images/config.png').' vars &amp; config</a></li>

to:

<li>'.image_tag(sfConfig::get('sf_web_debug_web_dir').'/images/config.png').' vars &amp; config</li>

Cons: this will remove the a href link of Vars & Config, which means it's not really a solution. Just interesting that doing this fixes the problem.

3.) Fix this image: [php data directory]/symfony/web/sf/sf_web_debug/images/config.png

Removing it or making is smaller also fixes the problem. Not sure why.

Unfortunately, none of these solutions can be implemented. I spent more than 1 hour trying to fix it with no luck.

So, if someone find a solution...

The alone solution I've found is

#sfWebDebugBar .menu li
{
  display: inline-block;
  ...
}

and at the end of the file

#sfWebDebugBar .menu li { display: inline;# }

This will hide this rule from Safari. But this will cause Safari to break up there. So put it at the end of file.

Tested on this browser: Internet Explorer (6+7), Firefox, Safari, Flock, Opera, Camino Test failed: Shiira. I think, this is a livable casualty.

I'm sorry. I've done a fault, testing this patch. I think the hack goes only for Safari 2 (i have safari 3 here, the uninstall process is too bad, to test with Safari2).

But I think, I've found a better solution.

Tested against: Safari 3 (Please test Safari 2 for me), Firefox, IE (6+7), Flock, Camino, Opera, Shiira

simply after #sfWebDebugBar .menu li rule

Thanks - that fixed it!

I just tested in IE 7, and it did not look right at all. Did I mess something up?

It seems that Safari 2 and IE7 have minor pixel errors. but they are better than the word wrap. Anyone another idea?

Milestone will be set by core developers.

Well, you could change these styles:

#sfWebDebugBar img {

vertical-align: middle;

}

#sfWebDebugBar .menu {

padding: 5px; display: inline;

}

#sfWebDebugBar .menu li {

display: inline; list-style: none; margin: 0; padding: 0 5px; border-right: 1px solid #aaa;

}

To this instead:

#sfWebDebugBar img {

float: left;

}

#sfWebDebugBar .menu {

padding: 5px; float: left;

}

#sfWebDebugBar .menu li {

float: left; list-style: none; margin: 0; padding: 0 5px; border-right: 1px solid #aaa;

}

And then just add some more styling to get rid of the padding around the unordered list. However, I'm not sure how to do this, since I don't know really know CSS.

Can some provide a patch and verify against ie/firefox/safari/opera?

(In [8444]) fixed web debug toolbar in safari (closes #3328, #1673)

(In [8445]) fixed web debug toolbar in safari (closes #3328, #1673 - patch from amadeus)