focus on firefox and shadows CSS

[charlee]

Hi guys, here i have two questions, the first one is that i want to avoid those gray dots firefox puts around every single focused element on my page, but this doesnt happen with IE, i want to eliminate those dots somehow, i have been trying to find something about it googling but nothing yet, hope some help here.

The other question is regarding shadows in CSS, i want to put a drop shadow to my main container and so far the best i could do was just repeating an image along the container but isnt there a best way to do it. I know there is a shadow support somwhere but i tried it and its not working, not sure if its something like the opacity or alpha property of an element that have to be redifined with a different property for every browser, it would be really useful to find a good style for shadows without using images.

thanks in advance :)

[swa66]

AFAIK it's an outline (sort of like a border but outside).

Firefox users expect it to be there, be careful with removing it.

Outlines take up no space and hence are useful for adding to elements without causing the page to redraw.

[w3.org...]

[Handlebar]

One of my biggest pet peeves is the outline property in Firefox. It's lame, it outlines your image as a rectangle when it's not supposed to be (such as a rounded button), and it altogether disrupts design.

The solution, put this at the top of the css:

a {outline:none;}

Drop shadow is only really possible when used as an image. One trick I did for fun one time is made two div containers the same size then offset the position (using absolute) top and left by a few pixels. If the colors you use are of just slightly a different shade, it creates a drop shadow effect. I still have this little site up and in use.

[charlee]

i didnt mean to eliminate the outline from the whole site but from certain elements, because sometimes this is really an attempt against the design, i have some tabbed panels and images which doesnt make any sense to be oulined so i will just remove it from the specific divission. Thanks for that, and about the drop shadow, so sad lol, i thought there was a way to style it but well, it works good with an image so far but the problem is that with a complex bg and with a fixed size container is never gonna be a prob but not sure about a relative container in a complex bg because the background resides in the body of the page with shadow and everything so if the user augment the size of the font it might of look misplace i think. :(

[penders]

i want to avoid those gray dots firefox puts around every single focused element on my page

But this is an accessibility feature and very useful for keyboard users. I would certainly think twice about removing it completely - certainly for links! It can be styled. Changing default browser behaviour should always be exercised with caution.

<edit>

i didnt mean to eliminate the outline from the whole site...

I hadn't seen your 2nd post ;)

[Handlebar]

To remove from specific div container:

#container_name a {outline:none;}

If your tabbed panels are in a specific div, that is how you would do it.

As far as the background drop shadow and font resizing, I fight really, really hard, to make sure everything will fit when the font size is up +1 from the user. You're most likely safe if you design for +1 all the time. Basically, when I have the layout, I hit CTR + to see if it fits, if it works, then almost all users will see it that way (although it doesn't look as nice usually).

There are many methods you could employ to make the drop shadow thing work. Another one is to to have slice the tops and bottoms of your image and cap the top and bottom of a div with those slices. Then use the remainder of the image as the background of the div in the middle and let the image repeat, which would allow content overflow of height. This is tricky, but it is possible with a little craftiness. In fact, I know of a few sites that do this.

[charlee]

Thanks again guys, about the font problem, well i just realized is better to design a relative website than a fixed one, with ems and % your site is gonna mantain a good apparience regarding of the font size in ur browser, but still i have problems with the controls in the form to be resized like the check boxes wich are actually images so i dont know exactly how to handle them...... now that i think about it i will try to give a relative width and height to the checkbox but not sure if this is gonna work as expected o_O

[Robin_reala]

As penders said, this can be an accessibility issue if you don't replace it with some other effect. For example, say you want to get rid of it in your navigation (which I'll assume is inside a <div id="nav">), you could do something like:

#nav a:focus {
outline: none;
background: red;
}

Well, that or something more fitting to the design. The point is to style the :focus pseudoclass with some differences to the normal state to indicate when the keyboard user has tabbed to that link.

[edited by: Robin_reala at 12:18 pm (utc) on April 15, 2008]

[Xapti]

I dislike it when outline is removed from anything, especially images. Who the hell is so picky that they care about outlines around image links? it's an accessibility thing and it's unobtrusive, what's so bad about it?
For my own curosity, it's easy for me to find out the dimensions of a image link by just "mousedown"ing on it. Not only is it useful for curosity, but to see where i should not click accidently. It is also useful to see the last link I visited.

What's interesting, is I noticed that firefox 3 seems to use the text color attribute for the color of outlines now, instead of it's previous black color (either black, or whatever the OS default is, I'm not sure which)

I dislike having it replaced it as well, since I'm not used to it, and not sure what the replacement effect is representing. Over at some CSS/webdesign webpage, the person replaced the outline effect with "text-decoration:blink". It was really annoying, and confusing at first too.

[Robin_reala]

I believe the default colour for outlines on Firefox has always been 'invert'. Checking into a bit more it looks like Cairo (the new graphics layer used in Gecko) doesn't yet support invert so they removed in in favour of inheriting text colour as you've discovered. Annoying!

[charlee]

Well, what i actually did was changing the color of the outline to #fff, because thats my bg color so they are invisible but they are there. I just think for some reason theres an outline: none. I think you will know how to use it, in my website i didnt need it because my bg was a solid color, but if it were more complex then i would have had to remove it.

"Who the hell is so picky that they care about outlines around image links?"

lol, well, I have this co-worker at my side and she was complaining beacuse of the outline, she was like "oh my god, this website is so weird look at this dots everywhere i click, DID YOU MAKE THIS?"....I know how stupid sounds, but thats the main point, she doesnt know anything about websites, she is just a normal user. By this I mean first you need to know who is your website designed for, if its for normal users just interested in watching some good images I dont think they will check the image size or stuff like that ;) If an average user wants to know the image size, well, there are tones of way to know that, remember we are talking about an average user :) I know it would have been easier with the outline but anyways my website was not made for him.

Now if we are talking about a website offering wallpapers for desktop or handsets, i think this will be really important because the users will always check the size of the images for their specific resolution.

Outlines are good, but you have css rules available to modify them or remove them, I think a good designer will know where to do it without affecting the overall functionality of his website.

thanks for the replies :):)

[swa66]

Charlee, think your co-worker isn't used to use the browser she was using cause firefox displays those outlines *all the time*.

[charlee]

she uses both, but the thing is that most of the time this dots are not even noticible, people are barely aware of them, but sometimes they are REALLY noticible and this was the case :).