1 reply [Last post]
stoatoffear
stoatoffear's picture
Offline
newbie
London, England
Last seen: 2 years 24 weeks ago
London, England
Joined: 2011-10-27
Posts: 1
Points: 2

Hi,

www.gravitydesign.co.uk

The nav bar uses a background image - which is fine, but I wanted the "contact" link at the end to have a different background image, which displays okay in Firefox on Mac, it's clipped off in Safari, and it looks totally wrong in Opera on Mac.

There's probably a better way of doing this effect - does anybody know what it is?

Thanks for any help!

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 2 years 25 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hi

I'm on a machine right now without many browsers, and the two I looked in, it seems fine.

But, I can guess the issue might be with what you did: you've got a row of li's and they're holding the background images, and inside, display: blocked anchors.

What I tend to do is make the li's irrelevant: I usually display: inline them (explicitly in my code, mostly for IE's benefit) and then either floating the anchors, or maybe doing a display: table setup, or display: inline-block, or whatever... and a crapload of padding on those anchors.

So the anchors are some kind of block-context thingies and they're holding the background images. Usually this is a more stable way of doing it. The entire "padding-box" of the anchor is everywhere the bg image/colours get painted by the browser.

As a side note: I really liked the clean minimalism of the design, and checked out the code. It's really a shame that Drupal has such crappy divitis... ah yes, the famous class="block block-block clear-block block-block-block" : )

You're listing the content-type meta tag twice; keep the first one since it's the first tag you want after the opening head tag... remove the one after the title.

Also: Internet Explorer has a limit on how many separate CSS stylesheets it will download. I realise you're still in development here, but when you're done I do hope you combine all those imported CSS files, and do the same for the Javascript. No server could possibly love you for all those separate HTTP requests.

I'm no expert, but I fake one on teh Internets