Thu, 2011-10-27 11:05
Hi,
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!
Thu, 2011-10-27 18:04
#1
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.