[Solved] Safari font issue – adding space above

[twaddler]

Hi all,
Been working up my other half’s photography website and it all looks pukka in FF and IE 7 but Safari on both mac and pc is adding big space above any text and making it render rather daftly.
If anyone would be kind enough to take a look, the site in question is here:
http://www.soniahunt.co.uk/sonia_site_0 … phy_1.html

Can’t find anything on this anywhere else.

Thanks,

Yan

[gooflett]

the top nav div seems to have a top padding of 8px. When I removed it using web developer toolbar it popped into place. Are you on a mac or pc? If PC you may need to install the toolbar see this: http://weblogs.asp.net/davidbarkol/arch … ndows.aspx

Also for fine tuned precision I would recommend having a separate style sheet for browsers you are having trouble with. So you can hone in on the browser quirks.

lets say after you remove the 8px padding on the top your site looks good in firefox but needs to move up a tad in safari. Target safari and adjust styles to place it in the spot you’re liking.

[twaddler]

Appreciate the input gooflett but it’s much more than an 8px padding issue. The hover states are also screwy and the other text also has enormous space above i.e. the picture caption which should be fairly tight on the image.

If you compare it to what it looks like in FF (which is how it’s supposed to look and does in IE also) you can see that it’s, relatively speaking, a huge amount of spacing above and whilst I understand about targeting the rendering oddities of individual browsers with separate style sheets this seems to be something more than a slight Safari layout issue.

Thanks anyway.

So, anybody have any ideas?
My other half is threatening to rebuild the site using tables if I can’t sort it out.

Yan

[gooflett]

wow wow wow. Tell your wife not give up on CSS so soon. I found the issue. Each browser has its own default stylesheet it uses to show elements on the page. I would highly recommend inserting a browser reset into your main stylesheet. Right now your ul #navlist has a style of margin-left 0 but by default safari adds margin to the top and bottom of 1em. If you look at your page using safari web developer toolbar you will see the properties listed under user agent stylesheet.

So add this to the top of your stylesheet for global browser style control. http://meyerweb.com/eric/tools/css/reset/

Or if you want to target just the #navlist I would do {margin: 0;} KABOOM! Snaps in place doesn’t it? ;)

[twaddler]

Gooflett,
Thank you so much for that, it worked a treat.
Sorry, I’ve been meaning to reply for a while but various things got in the way.
My other half is delighted also.
Don’t know how you discovered the safari issue but I’m very glad you took the time to help out.
More power to your table-less elbow.

Muchly appreciated,
Yan

[Author]

Posts