Re: [css-d] Making sure my container turned out

[David Laakso]

Andy B. wrote:
> I was wondering if some of you could verify that this css container turned
> out the way it was supposed to. 








re: 

Keep it simple.
Put up a test-case pointing to a uri where no user name/password is 
required.

Best,
Helen K.







-- 
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] css on iframes

[Ed Seedhouse]

On Fri, Jun 11, 2010 at 4:18 PM, Angela French  wrote:
> I want to add the google translate widget on my website.  However, I want to 
> be able to use by own CSS styles.  The widget is rendered in an iframe that 
> contains that the css for the widget.  I can't seem to write my own css to 
> overwrite theirs.  Can anyone explain to me how the cascade works when an 
> iframe is pulled into a page?

So far as I know it doesn't work at all.  What's inside an iFrame is a
separate document, not part of the current one.

-- 
Ed Seedhouse
__
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 on iframes

[Angela French]

I want to add the google translate widget on my website.  However, I want to be 
able to use by own CSS styles.  The widget is rendered in an iframe that 
contains that the css for the widget.  I can't seem to write my own css to 
overwrite theirs.  Can anyone explain to me how the cascade works when an 
iframe is pulled into a page?

Thank you,


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
http://www.checkoutacollege.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] Making sure my container turned out

[Chris F.A. Johnson]

On Fri, 11 Jun 2010, Andy B. wrote:

> Ar 11/06/10 22:23, ysgrifennodd Andy B. :
...
> For me, I found the text size OK.  I guess that's a matter of personal 
> taste and the eyesight characteristics of your target audience.

   That's why you shouldn't set the text size to anything other than
   100% or 1em; then it will be readable by everyone.

>  The CSS you give above is not what I'm seeing so I guess that's
> what you're intending to deploy. There's a couple of points:

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

Re: [css-d] Making sure my container turned out

[Andy B.]

Ar 11/06/10 22:23, ysgrifennodd Andy B. :
> Ar 11/06/10 21:19, ysgrifennodd Chris F.A. Johnson :
>
>>  The title is not centred. It is bold, but in Firefox it is not 
>> Georgia.
>>
>>  The text is too small to read.
>>
>>
>>  
> Yes.  To centre the title you need to centre the div that contains it. 
> Using text-align:center on the containing div will only centre it in 
> IE (IE6??), so you need to give the title container div a width and 
> automatic margins.  Hopefully that won't mess it up in IE.
>
> Ok. So far I have this on the title's div to fix the problem: (it 
> isn't applied yet, but wanted your idea on the code before then:
>
> .TITLECONTAINER {
> Text-align:center; */IE fix for center/*
> float: left;
> Left: auto;
> Right: auto;
> width: 80%; }
>
> What do you think? and if the text is too small in FF, what do you 
> recommend for sizes and how to set them? Oh, is it all of the text on 
> the page, or is it just the text inside of the container? If anybody 
> has a proposed style for the title div, I will for sure listen and 
> try.
>
>
>
For me, I found the text size OK.  I guess that's a matter of personal 
taste and the eyesight characteristics of your target audience.  The CSS 
you give above is not what I'm seeing so I guess that's what you're 
intending to deploy.  There's a couple of points:

Well, sort of... Guess css has me confused now. This is why I like having
sighted people taking a look since I don't know what always looks best.

*  Left should be margin-left ( all l.c.) - unless you're doing absolute 
positioning, which would make no sense here
*  Right should be margin-right (all l.c.) - unless you're doing 
absolute positioning, which would make no sense here

What does right/left do then?

*  I don't know why you want to float the title container left.

I originally had from left to right a container icon, the title and the
minimize/maximize icon for public views. I decided that I didn't want an
icon in the title bar so took it out. I floated them all left to align them
side by side at the top of the container. In the admin views, I have an
actions menu, the title and the minimize/maximize icon.. Again, the title
bar icon was removed because the images ended up being too large (I think).
Most of the icon images I was going to use were no more than 100x100 in
size. I was just trying to follow most of the examples for container
creation that I saw out there. What would you recommend for positioning the
parts of the title bar?

*  I don't understand, either, why your divs have both ids and classes.  
If there's only going to be one of each of them on the page, just use an 
ids.  If there's going to be more than one, use a class.

Ok. Would never find a use for div ids, so stick with classes?

You can use some shortcuts as well:

.TITLECONTAINER {
 text-align: center;
 width: 80%;
 margin: 0 auto;
}

Ok. not used to shorthand either. Visual Studio claimed that if I typed long
hand that it would convert it to shorthand but... guess not unless I use the
style builder window.

I wouldn't style the title in the way you have, either.  It's a level 
one heading in my book, so I'd use  and style that.  Since that 
gives you 150% font size by default as well as a bold font you can also 
save on some rules:

.TITLECONTAINER h1 {
 color: blue;
 font-family: georgia, serif; /* note the generic font for computers 
without georgia */
 text-align: center;
}


Similarly the content pane.  The content pane header is a header so you 
should use a header tag.  For instance:

dnn_ctr380_ContentPane h1 {
 /* styles for content pane level one header... */
}

How did the contentpane end up being a heading? strange, because it doesn't
say that in the asp.net code... *boggle*

There are also a couple of validation errors that you ought to attend 
to.  They're easy enough to fix.

What would they be?

I'm replying privately because you mailed me privately but if you find 
this or any future mails between us useful you should forward them to 
css-d so that other people who might have similar issues can benefit.

Cheers


Peter

-- 
http://www.peredur.net

__
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] Making sure my container turned out

[Andy B.]

Ar 11/06/10 22:23, ysgrifennodd Andy B. :
> Ar 11/06/10 21:19, ysgrifennodd Chris F.A. Johnson :
>
>>  The title is not centred. It is bold, but in Firefox it is not
>> Georgia.
>>
>>  The text is too small to read.
>>
>>
>>  
> Yes.  To centre the title you need to centre the div that contains it.
> Using text-align:center on the containing div will only centre it in 
> IE (IE6??), so you need to give the title container div a width and 
> automatic margins.  Hopefully that won't mess it up in IE.
>
> Ok. So far I have this on the title's div to fix the problem: (it
> isn't applied yet, but wanted your idea on the code before then:
>
> .TITLECONTAINER {
> Text-align:center; */IE fix for center/*
> float: left;
> Left: auto;
> Right: auto;
> width: 80%; }
>
> What do you think? and if the text is too small in FF, what do you
> recommend for sizes and how to set them? Oh, is it all of the text on 
> the page, or is it just the text inside of the container? If anybody 
> has a proposed style for the title div, I will for sure listen and 
> try.
>
>
>
For me, I found the text size OK.  I guess that's a matter of personal 
taste and the eyesight characteristics of your target audience.  The CSS 
you give above is not what I'm seeing so I guess that's what you're 
intending to deploy.  There's a couple of points:

Well, sort of... Guess css has me confused now. This is why I like having
sighted people taking a look since I don't know what always looks best.

*  Left should be margin-left ( all l.c.) - unless you're doing absolute 
positioning, which would make no sense here
*  Right should be margin-right (all l.c.) - unless you're doing 
absolute positioning, which would make no sense here

What does right/left do then?

*  I don't know why you want to float the title container left.

I originally had from left to right a container icon, the title and the
minimize/maximize icon for public views. I decided that I didn't want an
icon in the title bar so took it out. I floated them all left to align them
side by side at the top of the container. In the admin views, I have an
actions menu, the title and the minimize/maximize icon.. Again, the title
bar icon was removed because the images ended up being too large (I think).
Most of the icon images I was going to use were no more than 100x100 in
size. I was just trying to follow most of the examples for container
creation that I saw out there. What would you recommend for positioning the
parts of the title bar?

*  I don't understand, either, why your divs have both ids and classes.  
If there's only going to be one of each of them on the page, just use an 
ids.  If there's going to be more than one, use a class.

Ok. Would never find a use for div ids, so stick with classes?

You can use some shortcuts as well:

.TITLECONTAINER {
 text-align: center;
 width: 80%;
 margin: 0 auto;
}

Ok. not used to shorthand either. Visual Studio claimed that if I typed long
hand that it would convert it to shorthand but... guess not unless I use the
style builder window.

I wouldn't style the title in the way you have, either.  It's a level 
one heading in my book, so I'd use  and style that.  Since that 
gives you 150% font size by default as well as a bold font you can also 
save on some rules:

.TITLECONTAINER h1 {
 color: blue;
 font-family: georgia, serif; /* note the generic font for computers 
without georgia */
 text-align: center;
}


Similarly the content pane.  The content pane header is a header so you 
should use a header tag.  For instance:

dnn_ctr380_ContentPane h1 {
 /* styles for content pane level one header... */
}

How did the contentpane end up being a heading? strange, because it doesn't
say that in the asp.net code... *boggle*

There are also a couple of validation errors that you ought to attend 
to.  They're easy enough to fix.

What would they be?

__
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] IE 6 & 7 problems

[Stuart King]

in vertNav the rest of the page moved down in IE6 and IE7 - Windows (checked
in adobe browserlab)

In firefox 3.6.3 mac the li "Exploring Old Sugar Mill" was purple,
underlined and larger than the second li


The page validated.

URL:
http://www.oldsugarmill.com/pages/cheese.html


Help!!!

thanks

--stuart
__
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] Making sure my container turned out

[Peter Bradley]

Ar 11/06/10 21:19, ysgrifennodd Chris F.A. Johnson :
>
> The title is not centred. It is bold, but in Firefox it is not Georgia.
>
> The text is too small to read.
>
>
Yes.  To centre the title you need to centre the div that contains it.  
Using text-align:center on the containing div will only centre it in IE 
(IE6??), so you need to give the title container div a width and 
automatic margins.  Hopefully that won't mess it up in IE.

Cheers


Peter

-- 
http://www.peredur.net

__
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] Making sure my container turned out

[Chris F.A. Johnson]

On Fri, 11 Jun 2010, Andy B. wrote:

> Hi.
> 
> I was wondering if some of you could verify that this css container turned
> out the way it was supposed to. I ask because I use a screen reader and
> can't actually visually see what is going on. All I have to base anything on
> is the css/html code. I need to know if it works in all major browsers. Here
> is the link: www.eternityrecords.org/private. Use EternityRecords for the
> username and InHimAdmin for the password. Don't worry, the username/password
> isn't anything more than to detract the internet roaming public from messing
> around with it until it is done. Here is the description of what it should
> look like. It is also found on the container as well.
> 
> This container should have a title bar at the top. Centered should be the
> title "Test container". It should be blue text in bolded Georgia font which
> is roughly 1.5 times larger than this text. To the right of the container
> title, there should be a +/- graphic that lets you maximize/minimize this
> content. Around the entire container there should be a solid blue border.
> There is header text above this content and footer text at the bottom of
> this content. The entire container should be horizontally centered in the
> content pane (the largest blank section of this page).

   The title is not centred. It is bold, but in Firefox it is not Georgia.

   The text is too small to read.

-- 
   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] Making sure my container turned out

[Andy B.]

Hi.

I was wondering if some of you could verify that this css container turned
out the way it was supposed to. I ask because I use a screen reader and
can't actually visually see what is going on. All I have to base anything on
is the css/html code. I need to know if it works in all major browsers. Here
is the link: www.eternityrecords.org/private. Use EternityRecords for the
username and InHimAdmin for the password. Don't worry, the username/password
isn't anything more than to detract the internet roaming public from messing
around with it until it is done. Here is the description of what it should
look like. It is also found on the container as well.

This container should have a title bar at the top. Centered should be the
title "Test container". It should be blue text in bolded Georgia font which
is roughly 1.5 times larger than this text. To the right of the container
title, there should be a +/- graphic that lets you maximize/minimize this
content. Around the entire container there should be a solid blue border.
There is header text above this content and footer text at the bottom of
this content. The entire container should be horizontally centered in the
content pane (the largest blank section of this page).

Thanks for your help.


__
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] Grid Based Layout

[David Hucklesby]

On 6/10/10 11:42 AM, Thierry Koblentz wrote:
>> http://webwiz.robinshosting.com/temp/css-table-layout/

 [snip]

 Take a look at CSS code for this popular grid
 system:

>>>
>>> Ah yes. Rigid pixel-width layouts. Just perfect in these days of
>>> iPad and mobile devices... :-\
>>
>> Better is the fluid version:
>> 
>
> These are simple templates with width-less content containers. A "%"
> width on the wrapper will make them fluid.
>
> http://www.ez-css.org/css_templates
>
> They only use a few DIVs and not too many CSS rules, which should
> make things easier for people who are moving from tables to DIV
> layout.
>
> Disclaimer: I made them
>

Thank you, yes. I already stole several ideas from your code. Lots of
excellent techniques in a well-documented "framework." I love your work,
Thierry.

Cordially,
David
--

__
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] width / max-width problem with select tag

[david]

cr.vege...@gmail.com wrote:
> Hi All,
> 
> I have a select tag with about 100 options, like:
>  
> However, the dropdown list exceeds the page / screen, so no scroll bar is 
> displayed.
> The problem occurs in Chrome 5.0, not in IE.
> Any idea how to solve / bypass this ?

Hmmm - find a way to reduce the number of options, or break the list 
into categorized subsets, where a subset could be picked using a 
different select?

100 options seems like way too much to put in a selection list (just 
from a user interface design perspective)!

To put it in perspective, my employer's search select dropdown list has 
fewer than 50 items on it (I think) and visitors still complain that's 
too many to pick from ...

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
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] width / max-width problem with select tag

[cr.vegelin]

Hi All,

I have a select tag with about 100 options, like:
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 forms : default styles

[Gabriele Romanato]

Hi all,
some reflections that I think may be helpful to many of you:

http://onwebdev.blogspot.com/2010/06/css-forms-tutorial-default-styles.html

HTH :-)

Gabriele



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/