Re: [css-d] Fwd: Clear Float? Help

2010-08-09 Thread Chris F.A. Johnson 
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  but it didn't seem to make a
> difference.

First, fix the HTML errors:



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, 
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/

[css-d] Fwd: Clear Float? Help

2010-08-09 Thread css man 
-- Forwarded message --
From: css man 
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  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/

[css-d] sub-columns within floats

2010-08-09 Thread Peter Ankelein 
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/

Re: [css-d] CSS-only color picker

2010-08-09 Thread William Gaffga 
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  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  with s
> and s styled with display: block and display: inline
> respectively. It works in Firefox 3.6 at least. What about
> other browsers?
>
> 
>
> 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/

Re: [css-d] CSS-only color picker

2010-08-09 Thread tedd 
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  with s
>and s styled with display: block and display: inline
>respectively. It works in Firefox 3.6 at least. What about
>other browsers?
>
>
>
>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] Logo positioning with CSS?

2010-08-09 Thread Duncan Hill 
On Mon, 09 Aug 2010 21:19:45 +0100, Joe Jackson   
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;
}



 
   
 HOME

 ABOUT US

 CLASSES

 CONTACT US
   
 
   

   
 

 
   

   
 
   

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/

[css-d] Logo positioning with CSS?

2010-08-09 Thread Joe Jackson 
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?



   
   

 HOME
 ABOUT US
 CLASSES
 CONTACT US

   

  
  
   


 
 
 
 



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] drop shadows

2010-08-09 Thread David Laakso 
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"





>
> 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/

Re: [css-d] drop shadows

2010-08-09 Thread Sandy 

> 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

2010-08-09 Thread sfeldman 

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

2010-08-09 Thread David Laakso 
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/

[css-d] CSS-only color picker

2010-08-09 Thread BPJ 
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  with s
and s styled with display: block and display: inline
respectively. It works in Firefox 3.6 at least. What about
other browsers?



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 down menu help...

2010-08-09 Thread David Laakso 
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/

Re: [css-d] drop down menu help...

2010-08-09 Thread Michael Beaudoin 
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 shadows

2010-08-09 Thread Christian Kirchhoff 

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 shadows

2010-08-09 Thread 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/

Re: [css-d] drop shadows

2010-08-09 Thread Gabriele Romanato 
Hi!
The CSS way is using text-shadow:

h1 {text-shadow: 3px 3px 3px #ccc}

Another way is using 2 wrappers:

Text

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/

[css-d] drop shadows

2010-08-09 Thread sfeldman 

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/