[css-d] drop shadows
hey all, Is there a good way to get a drop shadow on text using css? I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. I can't really fake this with an image or duplicated text - the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. http://sandyfeldman.com/ana/8test.shtml http://sandyfeldman.com/ana/css_js/8test.css any suggestions are much appreciated. thanks! Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Hi!
The CSS way is using text-shadow:
h1 {text-shadow: 3px 3px 3px #ccc}
Another way is using 2 wrappers:
h1spanText/span/h1
h1 span {
position: relative;
top: 3px;
left: 3px;
color: #ccc;
}
Finally, you can use image replacement and graphics:
h1 {
background: url(text.png) no-repeat 0 0;
text-indent: -1000em;
height: value;
}
HTH ^^/
http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/ (English)
http://www.css-zibaldone.com/articles/ (English)
http://onwebdev.blogspot.com/ (English)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Is there a good way to get a drop shadow on text using css? You're using it. I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Actually, it works in Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+, on all platforms. Only IE doesn't play ball. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Am 09.08.2010 17:46, schrieb Climis, Tim: Is there a good way to get a drop shadow on text using css? You're using it. I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Actually, it works in Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+, on all platforms. Only IE doesn't play ball. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ For IE you could take a look here: http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows Best regards Christian Kirchhoff *Editura GmbH Co. KG* Tempelhofer Damm 2 · 12101 Berlin www.editura.de AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548 Geschäftsführer: Ralf Szymanski __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop down menu help...
On Aug 6, 2010, at 7:34 PM, David Laakso wrote:
Michael Beaudoin wrote:
I am working on some css/javascript drop down menus and for the
life of me I can't get the submenus to line up under the nav menu
item. Right now they are down and to the right.
The offending file is at http://www.ba-doyn.com/junk/ for your
perusal.
Thanks so much.
Michael
No guarantee. Try:
Replace this declaration:
ul.dropdown ul li {
color: #333;
border-bottom: 1px solid #ccc;
float: none;
background-color: #CC;
}
With this declaration:
ul.dropdown ul li {
color: #333;width: 160px;
border-bottom: 1px solid #ccc;
float: none;
background: lime;
top: 10px;
left: 0;
}
And add the padding to this
declaration:
ul.dropdown ul li a {
padding: 5px 0 /*add*/;
border-right: none;
width: 100%;
display: inline-block;
}
--
http://chelseacreekstudio.com/
David,
Thanks so much. Sorry for the delay, but I was unavailable over the
weekend.
What you did was great. Now, if you don't mind, can you explain what I
just did so I can understand?
Thanks,
Michael
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop down menu help...
Michael Beaudoin wrote:
On Aug 6, 2010, at 7:34 PM, David Laakso wrote:
Michael Beaudoin wrote:
I can't get the submenus to line up under the nav menu item. Right
now they are down and to the right.
http://www.ba-doyn.com/junk/ for your perusal.
Michael
No guarantee. Try:
Replace this declaration:
ul.dropdown ul li {
color: #333;
border-bottom: 1px solid #ccc;
float: none;
background-color: #CC;
}
With this declaration:
ul.dropdown ul li {
color: #333;width: 160px;
border-bottom: 1px solid #ccc;
float: none;
background: lime;
top: 10px;
left: 0;
}
And add the padding to this
declaration:
ul.dropdown ul li a {
padding: 5px 0 /*add*/;
border-right: none;
width: 100%;
display: inline-block;
}
David,
Thanks so much. Sorry for the delay, but I was unavailable over the
weekend.
What you did was great. Now, if you don't mind, can you explain what I
just did so I can understand?
Thanks,
Michael
Michael,
I don't know-- can't remember what I did 3 hours ago much less 3 days
ago. I guess maybe top: 10px;
left: 0; needed to be put on the relevant selector: ul.dropdown ul li.
If you comment-out the padding on ul.dropdown ul li a you'll see why it
is needed.
Best,
~d
--
http://chelseacreekstudio.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] CSS-only color picker
The web is crowded with color-picker palettes using JavaScript mumbo-jumbo. I wanted one working with css only + server-side scripting and got the idea to use a select with optgroups and options styled with display: block and display: inline respectively. It works in Firefox 3.6 at least. What about other browsers? http://melroch.se/misc/palette.html I would have liked for the selected color names to be shown after the menu collapses, but can't find any way to get that without breaking the menu itself. BTW, what's up with the FF submit button? It can't be styled! /BP __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
sfeld...@sympatico.ca wrote: hey all, Is there a good way to get a drop shadow on text using css? I've got something that seems to work in Safari, and in FireFox 3.6.8 on a mac, but I think that's about it. Others have answered your quesion. I can't really fake this with an image or duplicated text - the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. Then set no font less than default, and ditch the Verdana and MS stuff: Arial, Helvetica, sans-serif will do. Letter-spacing content text is not helping their cause. You are dropping the right col with a heavy + hand-- and same if minimum font-size is set in the prefs at 24 in FF and 32 in Opera. If you use em you'll need to declare font-size 100% on html or the fonts will go totally goofy in IE when scaled. http://sandyfeldman.com/ana/8test.shtml any suggestions are much appreciated. thanks! Sandy Best, Helen K. Tuscumbia, Alabama -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
hi Tim, hi Gabriele, Thanks for your help with my efforts to get some drop shadows going. I think this is the best approach http://sandyfeldman.com/dstest/dstest3.shtml though it doesn't work with everything. http://www.browsercam.com/public.aspx?proj_id=525331 I'm afraid I can't use repeated offset text, since this would be repetitive and confusing for the screen reader users, and I can't use an image, since it wouldn't always get bigger when the user increases text size. thanks again for taking the time. best regards, Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. Then set no font less than default, and ditch the Verdana and MS stuff: Arial, Helvetica, sans-serif will do. Letter-spacing content text is not helping their cause. You are dropping the right col with a heavy + hand-- and same if minimum font-size is set in the prefs at 24 in FF and 32 in Opera. If you use em you'll need to declare font-size 100% on html or the fonts will go totally goofy in IE when scaled. Hi Helen K. - or is this David? Thanks for your input. I've made some changes http://sandyfeldman.com/ana/10test.shtml and I have some questions - why not Verdana or trebuchet MS? letter-spacing on browser text is often really tight - a small bit of opening up seems to increase legibility to me. I can understand objecting to the kind of spacing that ends up looking like t h i s but a .1em just looks to me like it makes things better. Is there something I'm not thinking of? I'm not sure what you mean by You are dropping the right col with a heavy + hand-- thanks again for taking the time to help me think about this. Sandy __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] drop shadows
Sandy wrote: the site needs to work for people who will be increasing text size and also for those who will be using a screen reader. Then set no font less than default, and ditch the Verdana and MS stuff: Arial, Helvetica, sans-serif will do. Letter-spacing content text is not helping their cause. You are dropping the right col with a heavy + hand-- and same if minimum font-size is set in the prefs at 24 in FF and 32 in Opera. If you use em you'll need to declare font-size 100% on html or the fonts will go totally goofy in IE when scaled. Hi Helen K. - or is this David? Thanks for your input. I've made some changes http://sandyfeldman.com/ana/10test.shtml and I have some questions - why not Verdana or trebuchet MS? Use whatever does it for you and your clients /visually impaired users/. Neither of the above fits the bill in my book. Verdana was designed in 1996 for low resolution monitors in use at that time. It is ugly at default and larger. Trebuchnet MS is not much better. Why you should avoid the Verdana font http://www.xs4all.nl/~sbpoley/webmatters/verdana.html letter-spacing on browser text is often really tight - a small bit of opening up seems to increase legibility to me. I can understand objecting to the kind of spacing that ends up looking like t h i s but a .1em just looks to me like it makes things better. Is there something I'm not thinking of? Do whatever does it for you and your clients /visually impaired users/ with the content text. Generally it is not a good practice to tinker with a type-designers text font. I'm not sure what you mean by You are dropping the right col with a heavy + hand-- Hold the ctrl key [or apple key] and repeatedly bang the + key in FF. Current accessibility requirements, of which the /visually impaired/ qualify, call for use and funtionality of typography at *twice default.* You are also dropping at 24px minimum font-size in FF and at 32 minimum in Opera. thanks again for taking the time to help me think about this. May be you should ask some of your clients users what they think before making up their mind for them? Sandy Best, Helen -- http://chelseacreekstudio.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Logo positioning with CSS?
Hi
How can I have the logo sit on top of the slideshow image? At present the
logo pushes the slideshow image further down the page? I have tried Z index
on the logo but it still pushes the slideshow down the page instead of the
logo sitting on top of the slideshow?
div id=mainheader
div id=logo/div
div id=navigation
ul id=navigs
lia href=index.htmlHOME/a/li
lia href=aboutus.htmlABOUT US/a/li
lia href=classes.htmlCLASSES/a/li
lia href=contact.htmlCONTACT US/a/li
/ul
/div
/div
div id=slideshow-border
div id=slideshow
div id=cycle-home
img src=images/hp1.jpg alt=Dance Studios /
img src=images/hp2.jpg alt=Music and Dance Studio /
img src=images/hp3.jpg alt=test /
img src=images/hp4.jpg alt=test /
/div
My CSS for these elements are
#logo {
width: 211px;
height: 177px;
float: left;
margin: 0px 0px 0px 10px;
background: url(../images/logo1.png)
}
#slideshow-border {
width: 900px;
height: 348px;
padding: 10px;
margin: 0 auto;
background: #FFF;
}
#slideshow {
width: 900px;
height: 348px;
overflow: hidden;
position: relative;
background: #222;
}
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Logo positioning with CSS?
On Mon, 09 Aug 2010 21:19:45 +0100, Joe Jackson priory...@googlemail.com
wrote:
Hi
How can I have the logo sit on top of the slideshow image? At present
the
logo pushes the slideshow image further down the page? I have tried Z
index
on the logo but it still pushes the slideshow down the page instead of
the
logo sitting on top of the slideshow?
Not sure if this is what you are trying for:
#logo{
width:211px;
height:177px;
float:left;
margin:0px 0px 0px 10px;
background:url(../images/logo1.png);
outline:1px solid red;
}
#slideshow-border{
width:900px;
height:348px;
padding:10px;
margin:0 auto;
background:#FFF;
}
#slideshow{
width:900px;
height:348px;
background:#222;
}
div id=mainheader
div id=navigation
ul id=navigs
lia href=index.htmlHOME/a/li
lia href=aboutus.htmlABOUT US/a/li
lia href=classes.htmlCLASSES/a/li
lia href=contact.htmlCONTACT US/a/li
/ul
/div
/div
div id=slideshow-border
div id=logo/div
div id=slideshow
div id=cycle-home
img src=images/hp1.jpg alt=Dance Studios / img
src=images/hp2.jpg alt=Music and Dance Studio / img
src=images/hp3.jpg alt=test / img src=images/hp4.jpg alt=test /
/div
/div
/div
Best wishes
Duncan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS-only color picker
At 6:51 PM +0200 8/9/10, BPJ wrote: The web is crowded with color-picker palettes using JavaScript mumbo-jumbo. I wanted one working with css only + server-side scripting and got the idea to use a select with optgroups and options styled with display: block and display: inline respectively. It works in Firefox 3.6 at least. What about other browsers? http://melroch.se/misc/palette.html I would have liked for the selected color names to be shown after the menu collapses, but can't find any way to get that without breaking the menu itself. BTW, what's up with the FF submit button? It can't be styled! /BP Your color picker doesn't work for me. There are no colors in the selection options. Safari 4.1.1 Mac OSX 10.4.11 Cheers, tedd -- --- http://sperling.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS-only color picker
Win Vista, Chrome 5 Basically works ... is the color supposed to show up in the menu after selection but before submittal? If so ... it doesn't. On Mon, Aug 9, 2010 at 9:51 AM, BPJ melr...@gmail.com wrote: The web is crowded with color-picker palettes using JavaScript mumbo-jumbo. I wanted one working with css only + server-side scripting and got the idea to use a select with optgroups and options styled with display: block and display: inline respectively. It works in Firefox 3.6 at least. What about other browsers? http://melroch.se/misc/palette.html I would have liked for the selected color names to be shown after the menu collapses, but can't find any way to get that without breaking the menu itself. BTW, what's up with the FF submit button? It can't be styled! /BP __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] sub-columns within floats
Hi All, I've been racking my brains regarding column control within a float. I'm revising an event agenda that currently has two columns via a 100px left float for the session times and a 425px right float for all the session titles and associated content. The problem is now, many of the items in the right float need to be divided into their own columns while some span the full 425px. Some of these include the left span and some of them don't. I've thrown together a quick table to show the various scenarios: http://www.mdsol.com/conferences/mug/emug2010/table_example.html How do I nest two columns below the initial line of the right float that spans the full float width? Also, how would I go about creating the three-column version? I've included links to a test page and test css that show the initial agenda format. In the CSS it's the #center .left, #center .right IDs/classes. http://www.mdsol.com/conferences/mug/emug2010/agenda_test.htm (Test page) http://www.mdsol.com/conferences/mug/mug_test.css (CSS) I tried a bunch of things earlier but with no success. I'm just not sure of the best way to go about this to cover all the scenarios...or if maybe I should chalk this up as tabular data and just go the table route. Any and all help/advice is certainly appreciated. Thx, Pete __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Fwd: Clear Float? Help
-- Forwarded message -- From: css man css...@gmail.com Date: Mon, Aug 9, 2010 at 4:38 PM Subject: Clear Float? Help To: l...@webdesign-l.com I started a page at: http://cssman.webs.com/testbuttons.html I cannot get the orange box to mesh up with the Headline goes here... line. I tried using br style=clear:both / but it didn't seem to make a difference. -- ~~~ css...@gmail.com ~~~ -- ~~~ css...@gmail.com ~~~ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Fwd: Clear Float? Help
On Mon, 9 Aug 2010, css man wrote: I started a page at: http://cssman.webs.com/testbuttons.html I cannot get the orange box to mesh up with the Headline goes here... line. I tried using br style=clear:both / but it didn't seem to make a difference. First, fix the HTML errors: http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fcssman.webs.com%2Ftestbuttons.html Errors found while checking this document as HTML 4.01 Transitional! Result: 6 Errors, 3 warning(s) They may or may not be causing the problem, but fixing errors is always the first step in getting a page to work. -- Chris F.A. Johnson, http://cfajohnson.com Author: Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress) Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
