Hatrack River Forum: CSS question

This is topic CSS question in forum Books, Films, Food and Culture at Hatrack River Forum.

To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=044981

Posted by Strider (Member # 1807) on :

I'm working on a navigation menu for a website. I'm trying to do the whole site in CSS, and I'm still pretty new to all this. I'd like the text for the navigation links to have a drop shadow effect.

I know there is text-shadow property, but apparently it's not supported by most browsers.

Is there another method of doing this without having to make the text into images?

Posted by BaoQingTian (Member # 8775) on :

CSS are pretty cool. To answer your question, I don't know of any cross-browser text shadow effect that can be done without images.

My experience with webdesign:

1) You can make a sharp, professional looking site that will look the same on most browsers, but won't have a lot of fancy features.
2) You can invest a lot more time in doing browser specific sites (e.g. writing code that only executes if a particular browser is viewing it) and integrate quite a bit more options.
3) You can make a really good site that has fantastic features, but only for one browser. Anything else will be buggy.

IMO until all the browsers actually become fully w3c compliant, the situation won't change much. I'd end up going with #1 unless you're doing a corporate site where people are required to use a certain browser.

Posted by HollowEarth (Member # 2586) on :

Does this work? His examples seem to work okay on Firefox at least.

Posted by MightyCow (Member # 9253) on :

I would ask yourself how much drop shadows are really going to add to the site, compared to how much effort it will be to make them look good and work consistently.

I'm not a CSS expert, although I have professionally designed websites for 10 years. I would suggest that if you really want good looking drop shadow, and you want to make sure it works, make some JPGs and use those as buttons.

Posted by Strider (Member # 1807) on :

I'll check out that link HollowEarth and see if it helps. I looked briefly and it does seem a bit too complicated to be worth it, and it still won't look great in every browser. But i'll take a closer look.

MightyCow, the drop shadows may or may not be that important, i'm mostly just trying out a lot of different things to learn as much as possible. The reason i'm trying to do this all in CSS is that normally if i need to make any minor changes to the navigation bar/buttons it's all a huge hassle, because i have to change each image individually, plus i'm using rollovers. So just minor size changes are a real pain.

now sure, if i get rid of the drop shadow that's all made easier because i can use css and make changes across the board with one simple property change.

I know it's just a minor effect, but I do like the way it looks right now.

Posted by Chris Bridges (Member # 1138) on :

I've tried different methods to apply drop shadows with CSS and haven't found any that were both easy and cross-browser compliant (you can have one or the other).

Instead, I would suggest you make a graphic of a button with a drop shadow and then use that as a background-graphic element for the navigation button. You'll still be able to change it easily and site-wide.

Posted by Mike (Member # 55) on :

If you go with images (which I'd recommend in this particular case), you might want to think about using ImageMagick or something similar to generate the images for you. That way if you need to change the text or colors you can just rerun your script. (This does require a bit of knowledge to get going, though.)

Posted by fugu13 (Member # 2859) on :

To do it in the most CSS way, create a structure as follows:

code:

<a><span>Text on Button</span></a>

Make the span invisible in your CSS. Make the a tag a block tag and arrange the dimensions to be the size of your image, then make the image its background image. Have an a:hover style that switches out the background image for the image to show the link is being hovered over.

The structure should be in a list, since we're talking about a menu.

This way browsers without CSS support just see the nice list of links with plain text. That's important for two reasons: search engine ranking (spiders are just little browsers, and they like links with text far better than image links) and accessibility (screen readers will have no problem at all since the text is in there).

Posted by Strider (Member # 1807) on :

okay, so just to make sure i'm on the right page here, your suggestion won't help with my drop shadow situation, but is specifically for SEO right?

Posted by citadel (Member # 8367) on :

How about we all just use FireFox? [Smile]

Posted by fugu13 (Member # 2859) on :

It helps with the drop shadow situation by making it possible to use images to get the drop shadow effect without losing most of the benefits of CSS or text menus.