Re: [css-d] help with image opacity (?)

[Sara Haradhvala]

It looks to me like it’s transparency in the .png itself - nothing to do with 
the CSS.


> On Mar 9, 2017, at 1:54 PM, Angela French  wrote:
> 
> Hello,
> I have a .png graphic that is white and gold on a transparent background.  It 
> is set over divs with a blue and a black background color.  I cannot figure 
> out what is
> "dulling down" the .png logo.  It looks like an opacity issue, but there is 
> no opacity set on it.
> 
> Here is the page:  http://www.dev.sbctc.edu/default-test-new-logo.aspx .  It 
> is the 50th anniversary logo in the upper left hand corner of the page.
> 
> Here is the html:
>  src="/_resources-for-tests/images/anniversary-logo.png"> width="175" 
> 
> 
> Here is the css:
> 
> .greyHeaderLeft {
>width:44%;
>float:left;
>display:block;
> 
>}
>.greyHeaderLeft img {
>float:left;
>margin: 0;
>}
> 
> 
> Thank you for any advice.
> 
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
> 
> __
> css-discuss [css-d@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 [css-d@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] help with image opacity (?)

[Tom Livingston]

On Thu, Mar 9, 2017 at 1:54 PM, Angela French  wrote:

> Hello,
> I have a .png graphic that is white and gold on a transparent background.
> It is set over divs with a blue and a black background color.  I cannot
> figure out what is
> "dulling down" the .png logo.  It looks like an opacity issue, but there
> is no opacity set on it.
>
>

After downloading the image and opening it in PhotoShop, the png itself is
translucent.



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Ron,
I found this read-up that is quite dated, but I think is still relevant.

https://css-tricks.com/using-css-in-html-emails-the-real-story/

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Feb 21, 2017, at 2:11 PM, Tom Livingston  wrote:
> 
> I'll also add that what I said below is based on the assumption that
> you want to reach the widest audience (number of different email
> clients) as possible. If you know you have a captive audience with a
> limited email client use (all recipients are using Outlook, for
> example) then things may be a bit easier...
> 
> On Tue, Feb 21, 2017 at 3:07 PM, Tom Livingston  wrote:
>> While it is great that it works for you and you've had success, Karl,
>> I don't really recommend using anything other than tables. At least
>> not until you are proficient in using tables (for email) and getting
>> consistent results with them. I cannot find anything recent regarding
>> html emails without tables after googling a bit. I recommend going
>> through the lynda.com tut as you said and getting good at the basics,
>> at least, before straying.
>> 
>> HTML email is tricky and full of gotchas.
>> 
>> Testing is the key. Lots of it. Use the services I recommended earlier
>> to help with this.
>> 
>> Good luck. [insert knowing, yet still maniacal laugh, here]
>> 
>> ;-)
>> 
>> 
>> 
>> On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers  
>> wrote:
>>> Stay away from tables is my recommendation. Use div or ul instead. Be sure 
>>> to study up on the display property as you will be needing this 
>>> understanding to make things look correctly and fit correctly.
>>> 
>>> For background images you could use the background property, or use an img 
>>> and absolute positioning with z-index. Also, set your CSS inline with the 
>>> style attribute. Don't link style sheets and read up on baseurl.
>>> 
>>> Just my 2¢
>>> 
>>> Built a lot of HTML emails in my day and these tips work for me.
>>> 
>>> HTH,
>>> Best,
>>> Karl
>>> 
>>> Sent from losPhone
>> 
>> 
>> --
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
>> #663399
> 
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> css-discuss [css-d@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 [css-d@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] help with media queries for email...mercy, mercy

[Tom Livingston]

I'll also add that what I said below is based on the assumption that
you want to reach the widest audience (number of different email
clients) as possible. If you know you have a captive audience with a
limited email client use (all recipients are using Outlook, for
example) then things may be a bit easier...

On Tue, Feb 21, 2017 at 3:07 PM, Tom Livingston  wrote:
> While it is great that it works for you and you've had success, Karl,
> I don't really recommend using anything other than tables. At least
> not until you are proficient in using tables (for email) and getting
> consistent results with them. I cannot find anything recent regarding
> html emails without tables after googling a bit. I recommend going
> through the lynda.com tut as you said and getting good at the basics,
> at least, before straying.
>
> HTML email is tricky and full of gotchas.
>
> Testing is the key. Lots of it. Use the services I recommended earlier
> to help with this.
>
> Good luck. [insert knowing, yet still maniacal laugh, here]
>
> ;-)
>
>
>
> On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers  
> wrote:
>> Stay away from tables is my recommendation. Use div or ul instead. Be sure 
>> to study up on the display property as you will be needing this 
>> understanding to make things look correctly and fit correctly.
>>
>> For background images you could use the background property, or use an img 
>> and absolute positioning with z-index. Also, set your CSS inline with the 
>> style attribute. Don't link style sheets and read up on baseurl.
>>
>> Just my 2¢
>>
>> Built a lot of HTML emails in my day and these tips work for me.
>>
>> HTH,
>> Best,
>> Karl
>>
>> Sent from losPhone
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Tom Livingston]

While it is great that it works for you and you've had success, Karl,
I don't really recommend using anything other than tables. At least
not until you are proficient in using tables (for email) and getting
consistent results with them. I cannot find anything recent regarding
html emails without tables after googling a bit. I recommend going
through the lynda.com tut as you said and getting good at the basics,
at least, before straying.

HTML email is tricky and full of gotchas.

Testing is the key. Lots of it. Use the services I recommended earlier
to help with this.

Good luck. [insert knowing, yet still maniacal laugh, here]

;-)



On Tue, Feb 21, 2017 at 1:08 PM, Karl DeSaulniers  wrote:
> Stay away from tables is my recommendation. Use div or ul instead. Be sure to 
> study up on the display property as you will be needing this understanding to 
> make things look correctly and fit correctly.
>
> For background images you could use the background property, or use an img 
> and absolute positioning with z-index. Also, set your CSS inline with the 
> style attribute. Don't link style sheets and read up on baseurl.
>
> Just my 2¢
>
> Built a lot of HTML emails in my day and these tips work for me.
>
> HTH,
> Best,
> Karl
>
> Sent from losPhone


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Stay away from tables is my recommendation. Use div or ul instead. Be sure to 
study up on the display property as you will be needing this understanding to 
make things look correctly and fit correctly. 

For background images you could use the background property, or use an img and 
absolute positioning with z-index. Also, set your CSS inline with the style 
attribute. Don't link style sheets and read up on baseurl. 

Just my 2¢

Built a lot of HTML emails in my day and these tips work for me. 

HTH,
Best,
Karl

Sent from losPhone

> On Feb 21, 2017, at 9:12 AM, Rod Castello  wrote:
> 
> Ron, that's the best thing to do. Work thru that tutorial on lynda and you
> will be getting off on the right foot. Table based emails are much harder
> to do than conventional html. Good luck.
> 
> If you're really serious about email, then go to this site and get their
> newsletter and even join. It's $20 / month, but you get to talk to real
> email marketing professionals and ask questions.
> http://www.onlyinfluencers.com/
> 
> Rod Castello
> 
>> On Tue, Feb 21, 2017 at 6:52 AM, Ron Zisman  wrote:
>> 
>> you’ve all been helpful. it’s been years since i’ve done any coding..so my
>> html probably sucks… but it seems to work.
>> 
>> i don’t know why i opted to lay the type over the hero image instead of
>> doing it all in mages…thought it might be “the right way”
>> 
>> i’ve found a tutorial on MQs at lynda.com…hopefully that will help.
>> 
>> and i thought tables would be easy..
>> 
>> rgds,
>> ron
>> 
>> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
>> 
>> Hi Ron,
>> I see a lot of issues with your media queries. They need to be target to
>> the classes you've tagged onto your 's. Such as "top" and "header".
>> You should just try to get one thing working at a time, such as the hero
>> area, which will need to turned into an image. Email clients don't
>> consistently support background images, especially with live text over
>> them.
>> Take  the headline" ANTEC 2017, subhead and date and merge with the
>> background image and create a "hero image".
>> Then just try and set that up in a table using an absolute url for the
>> image. Give the image width as 100%.  If needed you can create multiple
>> hero images if the text looks too small when reduced to "320px" on small
>> screens. Then you show an hide those when appropriate with your MQ's.
>> For the copy, try using "em" sizes instead of "px" sizing and they will
>> resize automatically when the screen size is reduced. You can use "px" but
>> will probably need to use different sizing at your various break points.
>> 
>> I would offer more help with examples of code, but need to get to work.
>> 
>> Rod Castello
>> 
>> 
>> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
>> 
>> karl,
>> 
>> http://ricochet.org/plastics_feb20.html
>> 
>> i’ve been trying to work with media queries. i think understand the basic
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>> my head.
>> 
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>> container. when i apply the query, it goes liquid and won’t hold the 600
>> measure.
>> 
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>> litmus .no  luck. i was hoping to get an extremely
>> simple example.
>> 
>> 
>> most of the examples i’ve seen have a ton of resets and queries—its a
>> blur. its not from not trying. —thanks again,
>> 
>> ron
>> 
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>> 
>> wrote:
>> 
>> 
>> Ron,
>> Quick and simple.
>> 
>> Google: CSS Media Queries example
>> 
>> Download, dissect and learn.
>> 
>> GL!
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>> 
>> hi all,
>> 
>> http://ricochet.org/plastics_engineering.html
>> 
>> i’m new to email, but most of the table coding went ok, but as i’m
>> 
>> trying to make it responsive,
>> 
>> i need media queries. i understand the concept, but am having trouble
>> 
>> with reality.
>> 
>> 
>> a little direction would be appreciated.
>> 
>> thank you in advance,
>> —ron
>> __
>> css-discuss [css-d@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 [css-d@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 [css-d@lists.c

Re: [css-d] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Using text instead of images IS the right way for download times. Less images 
the better I've found when loading a webpage. 

Oh and one other thing regarding the mailing list. Be sure to remember to prune 
your reply-to. I'm getting double emails each time. ;)
Thx. 

Best,
Karl

Sent from losPhone

> On Feb 21, 2017, at 8:52 AM, Ron Zisman  wrote:
> 
> you’ve all been helpful. it’s been years since i’ve done any coding..so my 
> html probably sucks… but it seems to work.
> 
> i don’t know why i opted to lay the type over the hero image instead of doing 
> it all in mages…thought it might be “the right way”
> 
> i’ve found a tutorial on MQs at lynda.com …hopefully that 
> will help.
> 
> and i thought tables would be easy..
> 
> rgds,
> ron
> 
>> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
>> 
>> Hi Ron,
>> I see a lot of issues with your media queries. They need to be target to
>> the classes you've tagged onto your 's. Such as "top" and "header".
>> You should just try to get one thing working at a time, such as the hero
>> area, which will need to turned into an image. Email clients don't
>> consistently support background images, especially with live text over
>> them.
>> Take  the headline" ANTEC 2017, subhead and date and merge with the
>> background image and create a "hero image".
>> Then just try and set that up in a table using an absolute url for the
>> image. Give the image width as 100%.  If needed you can create multiple
>> hero images if the text looks too small when reduced to "320px" on small
>> screens. Then you show an hide those when appropriate with your MQ's.
>> For the copy, try using "em" sizes instead of "px" sizing and they will
>> resize automatically when the screen size is reduced. You can use "px" but
>> will probably need to use different sizing at your various break points.
>> 
>> I would offer more help with examples of code, but need to get to work.
>> 
>> Rod Castello
>> 
>> 
>>> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
>>> 
>>> karl,
>>> 
>>> http://ricochet.org/plastics_feb20.html
>>> 
>>> i’ve been trying to work with media queries. i think understand the basic
>>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>>> my head.
>>> 
>>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>>> container. when i apply the query, it goes liquid and won’t hold the 600
>>> measure.
>>> 
>>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>>> litmus .no  luck. i was hoping to get an extremely
>>> simple example.
>>> 
>>> 
>>> most of the examples i’ve seen have a ton of resets and queries—its a
>>> blur. its not from not trying. —thanks again,
>>> 
>>> ron
 On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>>> wrote:
 
 Ron,
 Quick and simple.
 
 Google: CSS Media Queries example
 
 Download, dissect and learn.
 
 GL!
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com
 
 
 
 
> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
> 
> hi all,
> 
> http://ricochet.org/plastics_engineering.html
> 
> i’m new to email, but most of the table coding went ok, but as i’m
>>> trying to make it responsive,
> i need media queries. i understand the concept, but am having trouble
>>> with reality.
> 
> a little direction would be appreciated.
> 
> thank you in advance,
> —ron
> __
> css-discuss [css-d@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 [css-d@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 [css-d@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/
>> 
>> 
>> 
>> 
>> -- 
>> Rod Castello
>> DIGITAL DESIGN AND DEVELOPMENT
>> 818.437.7880
>> rodcastel...@gmail.com
>> www.smashcube.com
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http:

Re: [css-d] help with media queries for email...mercy, mercy

[Karl DeSaulniers]

Hi Ron,
I usually put width:100%;max-width:600px; for situations where the element will 
fill the screen up to a certain size and then max it so it stops at the width I 
desire. 

And yes, like Tom said, you have to point to something to make it change in 
your media query. 

@media ... (...) {
#some_element {
width:100%;
max-width:600px;
}
}

HTH,

Best,
Karl

Sent from losPhone

> On Feb 21, 2017, at 7:25 AM, Ron Zisman  wrote:
> 
> karl,
> 
> http://ricochet.org/plastics_feb20.html
> 
> i’ve been trying to work with media queries. i think understand the basic 
> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
> head.
> 
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
> container. when i apply the query, it goes liquid and won’t hold the 600 
> measure.
> 
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
> .no  luck. i was hoping to get an extremely simple example.
> 
> 
> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
> its not from not trying. —thanks again,
> 
> ron
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
>> 
>> Ron,
>> Quick and simple.
>> 
>> Google: CSS Media Queries example
>> 
>> Download, dissect and learn.
>> 
>> GL!
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>>> 
>>> hi all,
>>> 
>>> http://ricochet.org/plastics_engineering.html
>>> 
>>> i’m new to email, but most of the table coding went ok, but as i’m trying 
>>> to make it responsive,
>>> i need media queries. i understand the concept, but am having trouble with 
>>> reality.
>>> 
>>> a little direction would be appreciated.
>>> 
>>> thank you in advance,
>>> —ron
>>> __
>>> css-discuss [css-d@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 [css-d@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 [css-d@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 [css-d@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] help with media queries for email...mercy, mercy

[Rod Castello]

Ron, that's the best thing to do. Work thru that tutorial on lynda and you
will be getting off on the right foot. Table based emails are much harder
to do than conventional html. Good luck.

If you're really serious about email, then go to this site and get their
newsletter and even join. It's $20 / month, but you get to talk to real
email marketing professionals and ask questions.
http://www.onlyinfluencers.com/

Rod Castello

On Tue, Feb 21, 2017 at 6:52 AM, Ron Zisman  wrote:

> you’ve all been helpful. it’s been years since i’ve done any coding..so my
> html probably sucks… but it seems to work.
>
> i don’t know why i opted to lay the type over the hero image instead of
> doing it all in mages…thought it might be “the right way”
>
> i’ve found a tutorial on MQs at lynda.com…hopefully that will help.
>
> and i thought tables would be easy..
>
> rgds,
> ron
>
> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
>
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
>
> I would offer more help with examples of code, but need to get to work.
>
> Rod Castello
>
>
> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
>
> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic
> concepts, i’ve done some tutorials, rebuilt the html and am still banging
> my head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
> container. when i apply the query, it goes liquid and won’t hold the 600
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
> litmus .no  luck. i was hoping to get an extremely
> simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a
> blur. its not from not trying. —thanks again,
>
> ron
>
> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>
> wrote:
>
>
> Ron,
> Quick and simple.
>
> Google: CSS Media Queries example
>
> Download, dissect and learn.
>
> GL!
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>
> hi all,
>
> http://ricochet.org/plastics_engineering.html
>
> i’m new to email, but most of the table coding went ok, but as i’m
>
> trying to make it responsive,
>
> i need media queries. i understand the concept, but am having trouble
>
> with reality.
>
>
> a little direction would be appreciated.
>
> thank you in advance,
> —ron
> __
> css-discuss [css-d@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 [css-d@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 [css-d@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/
>
>
>
>
>
> --
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880 <(818)%20437-7880>
> rodcastel...@gmail.com
> www.smashcube.com
> __
> css-discuss [css-d@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/
>
>
>


-- 
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
8

Re: [css-d] help with media queries for email...mercy, mercy

[Tom Livingston]

I'd have to *respectfully* disagree with some of the below. For
reasons like images being hidden by default in some email clients, I'd
recommend using live text as much as possible.

Also, I'd recommend sticking with px font-sizing for email client
compatibility and getting results that are more like you'd expect.

I do agree with background images being sketchy as far as support
goes. I'd suggest a band of that BG texture as an image above the text
headline as a safer layout and allowing live text still for headline
(which is important text IMHO). Of course, you could use a fallback
solid color if that's ok with you.

As always, all your mileages may vary.

Also, I'd recommend an email testing service like emailonacid.com or
litmus.com. We use emailonacid.com as it lets us use a url to test
from so you don't need to have to set up a blast to get your email
into the testing service.

HTH



On Tue, Feb 21, 2017 at 9:45 AM, Rod Castello  wrote:
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
>
> I would offer more help with examples of code, but need to get to work.
>
> Rod Castello
>



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Ron Zisman]

you’ve all been helpful. it’s been years since i’ve done any coding..so my html 
probably sucks… but it seems to work.

i don’t know why i opted to lay the type over the hero image instead of doing 
it all in mages…thought it might be “the right way”

i’ve found a tutorial on MQs at lynda.com …hopefully that 
will help.

and i thought tables would be easy..

rgds,
ron

> On Feb 21, 2017, at 9:45 AM, Rod Castello  wrote:
> 
> Hi Ron,
> I see a lot of issues with your media queries. They need to be target to
> the classes you've tagged onto your 's. Such as "top" and "header".
> You should just try to get one thing working at a time, such as the hero
> area, which will need to turned into an image. Email clients don't
> consistently support background images, especially with live text over
> them.
> Take  the headline" ANTEC 2017, subhead and date and merge with the
> background image and create a "hero image".
> Then just try and set that up in a table using an absolute url for the
> image. Give the image width as 100%.  If needed you can create multiple
> hero images if the text looks too small when reduced to "320px" on small
> screens. Then you show an hide those when appropriate with your MQ's.
> For the copy, try using "em" sizes instead of "px" sizing and they will
> resize automatically when the screen size is reduced. You can use "px" but
> will probably need to use different sizing at your various break points.
> 
> I would offer more help with examples of code, but need to get to work.
> 
> Rod Castello
> 
> 
> On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:
> 
>> karl,
>> 
>> http://ricochet.org/plastics_feb20.html
>> 
>> i’ve been trying to work with media queries. i think understand the basic
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging
>> my head.
>> 
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
>> container. when i apply the query, it goes liquid and won’t hold the 600
>> measure.
>> 
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
>> litmus .no  luck. i was hoping to get an extremely
>> simple example.
>> 
>> 
>> most of the examples i’ve seen have a ton of resets and queries—its a
>> blur. its not from not trying. —thanks again,
>> 
>> ron
>>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
>> wrote:
>>> 
>>> Ron,
>>> Quick and simple.
>>> 
>>> Google: CSS Media Queries example
>>> 
>>> Download, dissect and learn.
>>> 
>>> GL!
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>> 
>>> 
>>> 
>>> 
 On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
 
 hi all,
 
 http://ricochet.org/plastics_engineering.html
 
 i’m new to email, but most of the table coding went ok, but as i’m
>> trying to make it responsive,
 i need media queries. i understand the concept, but am having trouble
>> with reality.
 
 a little direction would be appreciated.
 
 thank you in advance,
 —ron
 __
 css-discuss [css-d@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 [css-d@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 [css-d@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/
> 
> 
> 
> 
> -- 
> Rod Castello
> DIGITAL DESIGN AND DEVELOPMENT
> 818.437.7880
> rodcastel...@gmail.com
> www.smashcube.com
> __
> css-discuss [css-d@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 [css-d@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] help with media queries for email...mercy, mercy

[Rod Castello]

Hi Ron,
I see a lot of issues with your media queries. They need to be target to
the classes you've tagged onto your 's. Such as "top" and "header".
You should just try to get one thing working at a time, such as the hero
area, which will need to turned into an image. Email clients don't
consistently support background images, especially with live text over
them.
Take  the headline" ANTEC 2017, subhead and date and merge with the
background image and create a "hero image".
Then just try and set that up in a table using an absolute url for the
image. Give the image width as 100%.  If needed you can create multiple
hero images if the text looks too small when reduced to "320px" on small
screens. Then you show an hide those when appropriate with your MQ's.
For the copy, try using "em" sizes instead of "px" sizing and they will
resize automatically when the screen size is reduced. You can use "px" but
will probably need to use different sizing at your various break points.

I would offer more help with examples of code, but need to get to work.

Rod Castello


On Tue, Feb 21, 2017 at 5:25 AM, Ron Zisman  wrote:

> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic
> concepts, i’ve done some tutorials, rebuilt the html and am still banging
> my head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed
> container. when i apply the query, it goes liquid and won’t hold the 600
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from
> litmus .no  luck. i was hoping to get an extremely
> simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a
> blur. its not from not trying. —thanks again,
>
> ron
> > On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers 
> wrote:
> >
> > Ron,
> > Quick and simple.
> >
> > Google: CSS Media Queries example
> >
> > Download, dissect and learn.
> >
> > GL!
> >
> > Best,
> >
> > Karl DeSaulniers
> > Design Drumm
> > http://designdrumm.com
> >
> >
> >
> >
> >> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
> >>
> >> hi all,
> >>
> >> http://ricochet.org/plastics_engineering.html
> >>
> >> i’m new to email, but most of the table coding went ok, but as i’m
> trying to make it responsive,
> >> i need media queries. i understand the concept, but am having trouble
> with reality.
> >>
> >> a little direction would be appreciated.
> >>
> >> thank you in advance,
> >> —ron
> >> __
> >> css-discuss [css-d@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 [css-d@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 [css-d@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/




-- 
Rod Castello
DIGITAL DESIGN AND DEVELOPMENT
818.437.7880
rodcastel...@gmail.com
www.smashcube.com
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Tom Livingston]

That should be:

@media screen and (max-width: 640px) {
>  table{ width: 320px!important; }
> }



On Tue, Feb 21, 2017 at 8:47 AM, Tom Livingston  wrote:
> Ron,
>
> Looks to me like you closed the MQ before all of the styles, so the
> styles are working all the time. Also, it appears you aren't targeting
> anything and therefore not changing anything.
>
> for example:
>
> @media screen and (max-width: 640px) {
>  table: width: 320px!important;
> }
>
> Let me know if I can be of more help.
>
>
> On Tue, Feb 21, 2017 at 8:25 AM, Ron Zisman  wrote:
>> karl,
>>
>> http://ricochet.org/plastics_feb20.html
>>
>> i’ve been trying to work with media queries. i think understand the basic 
>> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
>> head.
>>
>> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
>> container. when i apply the query, it goes liquid and won’t hold the 600 
>> measure.
>>
>> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
>> .no  luck. i was hoping to get an extremely simple 
>> example.
>>
>>
>> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
>> its not from not trying. —thanks again,
>>
>> ron
>>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
>>>
>>> Ron,
>>> Quick and simple.
>>>
>>> Google: CSS Media Queries example
>>>
>>> Download, dissect and learn.
>>>
>>> GL!
>>>
>>> Best,
>>>
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>>
>>>
>>>
>>>
 On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:

 hi all,

 http://ricochet.org/plastics_engineering.html

 i’m new to email, but most of the table coding went ok, but as i’m trying 
 to make it responsive,
 i need media queries. i understand the concept, but am having trouble with 
 reality.

 a little direction would be appreciated.

 thank you in advance,
 —ron
 __
 css-discuss [css-d@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 [css-d@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 [css-d@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/
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Tom Livingston]

Ron,

Looks to me like you closed the MQ before all of the styles, so the
styles are working all the time. Also, it appears you aren't targeting
anything and therefore not changing anything.

for example:

@media screen and (max-width: 640px) {
 table: width: 320px!important;
}

Let me know if I can be of more help.


On Tue, Feb 21, 2017 at 8:25 AM, Ron Zisman  wrote:
> karl,
>
> http://ricochet.org/plastics_feb20.html
>
> i’ve been trying to work with media queries. i think understand the basic 
> concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
> head.
>
> i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
> container. when i apply the query, it goes liquid and won’t hold the 600 
> measure.
>
> sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
> .no  luck. i was hoping to get an extremely simple example.
>
>
> most of the examples i’ve seen have a ton of resets and queries—its a blur. 
> its not from not trying. —thanks again,
>
> ron
>> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
>>
>> Ron,
>> Quick and simple.
>>
>> Google: CSS Media Queries example
>>
>> Download, dissect and learn.
>>
>> GL!
>>
>> Best,
>>
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>>
>>
>>
>>
>>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>>>
>>> hi all,
>>>
>>> http://ricochet.org/plastics_engineering.html
>>>
>>> i’m new to email, but most of the table coding went ok, but as i’m trying 
>>> to make it responsive,
>>> i need media queries. i understand the concept, but am having trouble with 
>>> reality.
>>>
>>> a little direction would be appreciated.
>>>
>>> thank you in advance,
>>> —ron
>>> __
>>> css-discuss [css-d@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 [css-d@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 [css-d@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/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with media queries for email...mercy, mercy

[Ron Zisman]

karl,

http://ricochet.org/plastics_feb20.html

i’ve been trying to work with media queries. i think understand the basic 
concepts, i’ve done some tutorials, rebuilt the html and am still banging my 
head.

i theory, it seems like it shouldn’t be that hard. a wrapper and fixed 
container. when i apply the query, it goes liquid and won’t hold the 600 
measure.

sorry to be so dense, but i’m going nuts—i’m done a few tutorial from litmus 
.no  luck. i was hoping to get an extremely simple example.


most of the examples i’ve seen have a ton of resets and queries—its a blur. its 
not from not trying. —thanks again,

ron
> On Feb 19, 2017, at 10:05 PM, Karl DeSaulniers  wrote:
> 
> Ron,
> Quick and simple.
> 
> Google: CSS Media Queries example
> 
> Download, dissect and learn.
> 
> GL!
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
>> 
>> hi all,
>> 
>> http://ricochet.org/plastics_engineering.html
>> 
>> i’m new to email, but most of the table coding went ok, but as i’m trying to 
>> make it responsive,
>> i need media queries. i understand the concept, but am having trouble with 
>> reality.
>> 
>> a little direction would be appreciated.
>> 
>> thank you in advance,
>> —ron
>> __
>> css-discuss [css-d@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 [css-d@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 [css-d@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] help with media queries for email

[Karl DeSaulniers]

Ron,
Quick and simple.

Google: CSS Media Queries example

Download, dissect and learn.

GL!

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Feb 18, 2017, at 7:14 PM, Ron Zisman  wrote:
> 
> hi all,
> 
> http://ricochet.org/plastics_engineering.html
> 
> i’m new to email, but most of the table coding went ok, but as i’m trying to 
> make it responsive,
> i need media queries. i understand the concept, but am having trouble with 
> reality.
> 
> a little direction would be appreciated.
> 
> thank you in advance,
> —ron
> __
> css-discuss [css-d@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 [css-d@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] help getting my under by

[Angela French]

Thank you all.  I got it using a clear:both on the .   I realized I 
don't have a good understanding of the clear property values for example 
clear:both  vs clear:left or clear:right;

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Rockwell
Sent: Tuesday, November 29, 2016 10:58 AM
To: Angela French; Philippe Wittenbergh
Cc: CSS-D
Subject: Re: [css-d] help getting my  under by 

The issue appears to be at line 1725 of sbctc.css.  Is floating every image in 
the main container the desired behavior? If so, you'll have to explicitly reset 
for either all  within a  element or use a class.  You'll need to 
be more specific with your declaration than what you've done here:

@media (min-width: 992px) {
  main img {
...
float: left;
  }
}




On Tue, Nov 29, 2016 at 1:03 PM Angela French  wrote:

>
>
> Well based on your example (good & correct HTML, no need for more), 
> the caption is exactly where you want it to be - given the code above. 
> So what exactly is your issue?
>
> Notes:
> 1. you don’t need the `clear:both` on the figcaption, position: 
> absolute takes care of that.
> 2. there is lots of white space at the bottom of the image (inside / 
> part of the image) 3. tip for debugging: use bright borders and 
> backgrounds to see where those are, how they are sized (the developper 
> tools in your favourite browser should do that as well…)
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
> I found an example online to try to model mine after:
> http://html5doctor.com/the-figure-figcaption-elements/
>
> I got it to work by a simple .  
> However, if I remove the clear:left from the inline declaration and put it in 
> the
> style sheet, it doesn't work, even with !important.   I can't figure out
> what is playing on it in the css.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
>
>
> __
> css-discuss [css-d@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 [css-d@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 [css-d@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] help getting my under by

[Chris Rockwell]

The issue appears to be at line 1725 of sbctc.css.  Is floating every image
in the main container the desired behavior? If so, you'll have to
explicitly reset for either all  within a  element or use a
class.  You'll need to be more specific with your declaration than what
you've done here:

@media (min-width: 992px) {
  main img {
...
float: left;
  }
}




On Tue, Nov 29, 2016 at 1:03 PM Angela French  wrote:

>
>
> Well based on your example (good & correct HTML, no need for more), the
> caption is exactly where you want it to be - given the code above. So what
> exactly is your issue?
>
> Notes:
> 1. you don’t need the `clear:both` on the figcaption, position: absolute
> takes care of that.
> 2. there is lots of white space at the bottom of the image (inside / part
> of the image) 3. tip for debugging: use bright borders and backgrounds to
> see where those are, how they are sized (the developper tools in your
> favourite browser should do that as well…)
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
> I found an example online to try to model mine after:
> http://html5doctor.com/the-figure-figcaption-elements/
>
> I got it to work by a simple .  However,
> if I remove the clear:left from the inline declaration and put it in the
> style sheet, it doesn't work, even with !important.   I can't figure out
> what is playing on it in the css.
>
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
>
>
>
> __
> css-discuss [css-d@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 [css-d@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] help getting my under by

[Angela French]

Well based on your example (good & correct HTML, no need for more), the caption 
is exactly where you want it to be - given the code above. So what exactly is 
your issue?

Notes:
1. you don’t need the `clear:both` on the figcaption, position: absolute takes 
care of that.
2. there is lots of white space at the bottom of the image (inside / part of 
the image) 3. tip for debugging: use bright borders and backgrounds to see 
where those are, how they are sized (the developper tools in your favourite 
browser should do that as well…)

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/


I found an example online to try to model mine after:  
http://html5doctor.com/the-figure-figcaption-elements/ 

I got it to work by a simple .  However, if I 
remove the clear:left from the inline declaration and put it in the style 
sheet, it doesn't work, even with !important.   I can't figure out what is 
playing on it in the css.

http://www.dev.sbctc.edu/_testing/figure-caption.aspx 



__
css-discuss [css-d@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] help getting my under by

[Philippe Wittenbergh]

> On Nov 29, 2016, at 7:28 AM, Angela French  wrote:
> 
> I'm having a heck of a time getting my figure caption text to be underneath 
> my figure.  Thank you for any advice.
> 
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
> 
> This is my html:
> 
>  alt= width="600" height="341">
> this is my caption
> 
> 
> 
> This is my  CSS:
> 
> figure {
>position:relative;
> }
> 
> figure img {
>display:block;
> }
> 
> figcaption {
> 
>clear: both;
>position:absolute;
>bottom:0;
>left:0;
> 
> }

Well based on your example (good & correct HTML, no need for more), the caption 
is exactly where you want it to be - given the code above. So what exactly is 
your issue?

Notes:
1. you don’t need the `clear:both` on the figcaption, position: absolute takes 
care of that.
2. there is lots of white space at the bottom of the image (inside / part of 
the image) 
3. tip for debugging: use bright borders and backgrounds to see where those 
are, how they are sized (the developper tools in your favourite browser should 
do that as well…)

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@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] help getting my under by

[Karl DeSaulniers]

Hi Angela,
It's looks to be under for me. Left justified but under the image, not the 
figure.
To be under the figure, you have to take the figcaption out of the figure, 
technically.

I think your css declaration is incorrect for how it is structured.

figcaption {
   clear: both;
   position:absolute;
   bottom:0;
   left:0;

}

should be 

figure figcaption {
   clear: both;
   position:absolute;
   bottom:0;
   left:0;

}

My thoughts are that you meant the image inside your figure. To ensure it is 
always under the image, just place a  (line break)

this is my 
caption

But the clear:both in your css should do that already. The  helps for 
those with old browsers or css turned off. 
If you are using WordPress, make sure that WP isn't putting a  around 
your image. 
That may cause issues depending on your p {} declaration in your theme css.
If it is, just place a  around your image. 

This is how I would do it:

this is my 
caption

figure {
position:relative;
text-align:center;
}

figure div {
width:100%;
max-width:600px;
margin:0 auto;
}

figure img {
width:100%;
height:auto;
margin:0;
padding:0;
border:none;
display:inline-block;
}

figure figcaption {
clear: both;
margin: 2%;
}

This will put the caption centered below your image and make the image 
responsive.
I hope I understood correctly what you are trying to accomplish.

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Nov 28, 2016, at 4:28 PM, Angela French  wrote:
> 
> 
> I'm having a heck of a time getting my figure caption text to be underneath 
> my figure.  Thank you for any advice.
> 
> http://www.dev.sbctc.edu/_testing/figure-caption.aspx
> 
> This is my html:
> 
>  alt= width="600" height="341">
> this is my caption
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> This is my  CSS:
> 
> figure {
>position:relative;
> }
> 
> figure img {
>display:block;
> }
> 
> figcaption {
> 
>clear: both;
>position:absolute;
>bottom:0;
>left:0;
> 
> }
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> 
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> www.sbctc.edu
> 
> __
> css-discuss [css-d@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 [css-d@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] help with responsive navigation

[Chris Rockwell]

What Greg said...
/*Show menu when invisible checkbox is checked*/
  input[type=checkbox]:checked ~ .menu-main-navigation-container
#menu-main-navigation {
  display: block;
  }

^ That is in your css files

On Fri, Nov 4, 2016 at 3:16 PM Greg Gamble  wrote:

> Looks like the class names are different, and open and close quotes are
> missing for class and id attributes
>
>
> Greg
> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:
> css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Kavinsky
> Sent: Friday, November 04, 2016 11:59 AM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] help with responsive navigation
>
> I'm reworking a client site navigation to work better responsively and
> using a previous site as a model. I think I have the page code and css code
> correct, but I'm not getting the correct results. In short, the menu is
> collapsing when the screen is smaller but the link isn't toggling the menu,
> and I can't figure out why. Here are links:
>
> the site I'm working on:
> http://ipegstl.com/commercial/
>
> the site I'm trying to mimic:
> http://otpnet.com/
>
> here's the css code that works the button link for the toggling:
>
> /*Style 'show menu' label button and hide it by default*/ .show-menu {
> font-family: 'gandhi_sansbold';
> text-decoration: none;
> color: #fff;
> background:#af292e;
> text-align: center;
> padding: 10px 0;
> display: none;
> }
>
> /*Hide checkbox*/
> input[type=checkbox]{
> display: none;
> -webkit-appearance: none;
> }
>
> /*Show menu when invisible checkbox is checked*/
> input[type=checkbox]:checked ~ .menu-menu-1-container #menu-menu-1 {
> display: block;
> }
>
> @media only screen and (max-width : 1000px) {
>
> /*Make dropdown links appear inline*/
> #site-navigation ul {
> position: static;
> display: none;
> }
> /*Create vertical spacing*/
> #site-navigation li {
> margin-bottom: 1px;
> }
>
> /*Make all menu links full width*/
> #site-navigation ul li {
> width: 100%;
> }
>
> #site-navigation li a {
> width: 100%;
> background:#af292e;
> }
>
> /*Display 'show menu' link*/
> .show-menu {
> display:block;
> }
> }
>
>
>
> What am I overlooking?
> __
> css-discuss [css-d@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 [css-d@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 [css-d@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] help with responsive navigation

[Greg Gamble]

Looks like the class names are different, and open and close quotes are missing 
for class and id attributes


Greg
-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Chris Kavinsky
Sent: Friday, November 04, 2016 11:59 AM
To: css-d@lists.css-discuss.org
Subject: [css-d] help with responsive navigation

I'm reworking a client site navigation to work better responsively and using a 
previous site as a model. I think I have the page code and css code correct, 
but I'm not getting the correct results. In short, the menu is collapsing when 
the screen is smaller but the link isn't toggling the menu, and I can't figure 
out why. Here are links:

the site I'm working on:
http://ipegstl.com/commercial/

the site I'm trying to mimic:
http://otpnet.com/

here's the css code that works the button link for the toggling:

/*Style 'show menu' label button and hide it by default*/ .show-menu {
font-family: 'gandhi_sansbold';
text-decoration: none;
color: #fff;
background:#af292e;
text-align: center;
padding: 10px 0;
display: none;
}

/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}

/*Show menu when invisible checkbox is checked*/ input[type=checkbox]:checked ~ 
.menu-menu-1-container #menu-menu-1 {
display: block;
}

@media only screen and (max-width : 1000px) {

/*Make dropdown links appear inline*/
#site-navigation ul {
position: static;
display: none;
}
/*Create vertical spacing*/
#site-navigation li {
margin-bottom: 1px;
}

/*Make all menu links full width*/
#site-navigation ul li {
width: 100%;
}

#site-navigation li a {
width: 100%;
background:#af292e;
}

/*Display 'show menu' link*/
.show-menu {
display:block;
}
}



What am I overlooking?
__
css-discuss [css-d@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 [css-d@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] Help with false positive?

[Tom Livingston]

If its flagging specific colors, check them with this tool (there are
others). If the colors pass here, I'd be satisfied.



On Thursday, July 7, 2016, Angela French  wrote:

> Hello,
> I am using this website validator
> to check this page.  The validator
> set to WCAG 2.0 (Level AA) is interpreting my CSS in a way that fails the
> color contrast check between background and foreground links.  The visual
> examples it gives of the failures is not what is happening on the actual
> site.  I can't find what is causing this in the css.
>
> Thank you for any suggestions.
>
>
>
> Angela French
> Internet/Intranet Specialist
> Washington State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu 
> www.sbctc.edu
>
> __
> css-discuss [css-d@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/
>


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with lineheight

[Tom Livingston]

I feel like you are going to have to set your line height, and then adjust
your margin between p elements based on that line height. I use p +
p{margin-top:x;} frequently for that.

HTH.



On Friday, August 21, 2015, Angela French  wrote:

> I am trying to tweak some lineheight in a specific div class.  I want the
> space between  tags to be the default for the site.  But if the content
> in the  tag wraps to a second line I want the space between theose lines
> to be a little less.  I thought I could achieve that with lineheight but
> it's not working.  it's affecting the space between the  also.
>
>
> Thanks for any help.
>
>
> Angela French
> __
> css-discuss [css-d@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/
>


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
css-discuss [css-d@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] help with responsive menu dropdown

[Chris Kavinsky]

Oh crap. I completely overlooked that. That solved the problem. Thanks
Philippe.

On Thu, May 21, 2015 at 12:24 AM, Philippe Wittenbergh 
wrote:

>
> > Le 21 mai 2015 à 04:06, Chris Kavinsky  a écrit :
> >
> > I'm trying to retrofit an existing site that's using a horizontal
> > navigation menu with dropdowns. The problem I'm having is getting the
> menu
> > to appear on:click when the screen size is smaller. Its doing it entirely
> > using css. I created a static version before moving it to the wordpress
> > site, and it worked there. However, its not working on wordpress. Does
> > anything jump out to anyone as to what the problem is?
> >
> > here's the model I grabbed the css code from:
> >
> > http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
> >
> > here's the live site I'm working on:
> >
> > http://www.aircompressors.com/
>
> Your “button”-link points to a #nav as target. However there is no element
> with id="nav" in your code, that I could find. Do you mean to point to the
> element with ID=primary-navigation? if so, you should correct the “href” in
> your button link to point to that (a href="primary-navigation"), and then
> make sure your stylesheet references that.
>
> #primary-navigation:target { /* do something */ }
>
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
>
__
css-discuss [css-d@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] help with responsive menu dropdown

[Philippe Wittenbergh]

> Le 21 mai 2015 à 04:06, Chris Kavinsky  a écrit :
> 
> I'm trying to retrofit an existing site that's using a horizontal
> navigation menu with dropdowns. The problem I'm having is getting the menu
> to appear on:click when the screen size is smaller. Its doing it entirely
> using css. I created a static version before moving it to the wordpress
> site, and it worked there. However, its not working on wordpress. Does
> anything jump out to anyone as to what the problem is?
> 
> here's the model I grabbed the css code from:
> 
> http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
> 
> here's the live site I'm working on:
> 
> http://www.aircompressors.com/

Your “button”-link points to a #nav as target. However there is no element with 
id="nav" in your code, that I could find. Do you mean to point to the element 
with ID=primary-navigation? if so, you should correct the “href” in your button 
link to point to that (a href="primary-navigation"), and then make sure your 
stylesheet references that.

#primary-navigation:target { /* do something */ }

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@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] help with responsive menu dropdown

[Karl DeSaulniers]

Don't know if this will help, but the touch on your scrolling banner works. I 
can scroll to the next banner on my iPhone. Maybe look at that code to see how 
the touch is handled and repurpose some code?

HTH,
Best,
Karl

Sent from losPhone

> On May 20, 2015, at 2:06 PM, Chris Kavinsky  wrote:
> 
> I'm trying to retrofit an existing site that's using a horizontal
> navigation menu with dropdowns. The problem I'm having is getting the menu
> to appear on:click when the screen size is smaller. Its doing it entirely
> using css. I created a static version before moving it to the wordpress
> site, and it worked there. However, its not working on wordpress. Does
> anything jump out to anyone as to what the problem is?
> 
> here's the model I grabbed the css code from:
> 
> http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
> 
> here's the live site I'm working on:
> 
> http://www.aircompressors.com/
> __
> css-discuss [css-d@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 [css-d@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] help with menu bar

[Brian Jones]

thanks for help..i found the problem..the #header container had an explicit
height set


On Thu, Mar 13, 2014 at 6:56 PM, Tom Livingston  wrote:

>
>
> Sent from my iPhone
>
> On Mar 13, 2014, at 4:53 PM, Brian Jones  wrote:
>
> > Inside header, div class="col-md-9 col-sm-12" at small widths is being
> > told to be 12 cols wide, which is too wide next to your logo - which
> > is also being told to be 12col wide - so it drops down
>
> i fixed the submenu issue by removing the width:170px;
> http://jsfiddle.net/dTsrY/5/
>
> i dont mind that the menu drops down..i just want the menu to still be
> above the shadow border ()
>
>
>
> Can't look right now. Is there an explicit hight set on that div?
>
>
>
> On Thu, Mar 13, 2014 at 3:23 PM, Tom Livingston  wrote:
>
>> On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones 
>> wrote:
>> > Hi,
>> >
>> > I have this demo setup here http://jsfiddle.net/dTsrY/  and i need help
>> > with a few issues that i am having.
>> >
>> > I am using bootstrap 3.0 and when the page gets smaller the menu moves
>> > outside of the bottom shadow image border and i would like for it to
>> stay
>> > inside the border.
>>
>> Inside header, div class="col-md-9 col-sm-12" at small widths is being
>> told to be 12 cols wide, which is too wide next to your logo - which
>> is also being told to be 12col wide - so it drops down
>>
>> > Also, the width of the submenu is longer than the hover for the items in
>> > the submenu, so when you hover a submenu item there is extra white
>> space to
>> > the right.
>>
>> ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and
>> also is getting padding right (line 422). I guess that's too wide for
>> the parent.
>>
>> >
>> > Thanks in advance for any help.
>> >
>> > --
>>
>> Hope this helps.
>>
>>
>> --
>>
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>>
>
>
>
> --
> -bdot
> "There are only 10 kinds of people in this world. Those who understand
> binary and those who don't"
>
>


-- 
-bdot
"There are only 10 kinds of people in this world. Those who understand
binary and those who don't"
__
css-discuss [css-d@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] help with menu bar

[Tom Livingston]

Sent from my iPhone

> On Mar 13, 2014, at 4:53 PM, Brian Jones  wrote:
> 
> > Inside header, div class="col-md-9 col-sm-12" at small widths is being
> > told to be 12 cols wide, which is too wide next to your logo - which
> > is also being told to be 12col wide - so it drops down
> 
> i fixed the submenu issue by removing the width:170px; 
> http://jsfiddle.net/dTsrY/5/
> 
> i dont mind that the menu drops down..i just want the menu to still be above 
> the shadow border ()
> 
> 

Can't look right now. Is there an explicit hight set on that div?


> 
>> On Thu, Mar 13, 2014 at 3:23 PM, Tom Livingston  wrote:
>> On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones  wrote:
>> > Hi,
>> >
>> > I have this demo setup here http://jsfiddle.net/dTsrY/  and i need help
>> > with a few issues that i am having.
>> >
>> > I am using bootstrap 3.0 and when the page gets smaller the menu moves
>> > outside of the bottom shadow image border and i would like for it to stay
>> > inside the border.
>> 
>> Inside header, div class="col-md-9 col-sm-12" at small widths is being
>> told to be 12 cols wide, which is too wide next to your logo - which
>> is also being told to be 12col wide - so it drops down
>> 
>> > Also, the width of the submenu is longer than the hover for the items in
>> > the submenu, so when you hover a submenu item there is extra white space to
>> > the right.
>> 
>> ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and
>> also is getting padding right (line 422). I guess that's too wide for
>> the parent.
>> 
>> >
>> > Thanks in advance for any help.
>> >
>> > --
>> 
>> Hope this helps.
>> 
>> 
>> --
>> 
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> 
> 
> 
> -- 
> -bdot
> "There are only 10 kinds of people in this world. Those who understand binary 
> and those who don't"
__
css-discuss [css-d@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] help with menu bar

[Brian Jones]

> Inside header, div class="col-md-9 col-sm-12" at small widths is being
> told to be 12 cols wide, which is too wide next to your logo - which
> is also being told to be 12col wide - so it drops down

i fixed the submenu issue by removing the width:170px;
http://jsfiddle.net/dTsrY/5/

i dont mind that the menu drops down..i just want the menu to still be
above the shadow border ()



On Thu, Mar 13, 2014 at 3:23 PM, Tom Livingston  wrote:

> On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones  wrote:
> > Hi,
> >
> > I have this demo setup here http://jsfiddle.net/dTsrY/  and i need help
> > with a few issues that i am having.
> >
> > I am using bootstrap 3.0 and when the page gets smaller the menu moves
> > outside of the bottom shadow image border and i would like for it to stay
> > inside the border.
>
> Inside header, div class="col-md-9 col-sm-12" at small widths is being
> told to be 12 cols wide, which is too wide next to your logo - which
> is also being told to be 12col wide - so it drops down
>
> > Also, the width of the submenu is longer than the hover for the items in
> > the submenu, so when you hover a submenu item there is extra white space
> to
> > the right.
>
> ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and
> also is getting padding right (line 422). I guess that's too wide for
> the parent.
>
> >
> > Thanks in advance for any help.
> >
> > --
>
> Hope this helps.
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>



-- 
-bdot
"There are only 10 kinds of people in this world. Those who understand
binary and those who don't"
__
css-discuss [css-d@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] help with menu bar

[Tom Livingston]

On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones  wrote:
> Hi,
>
> I have this demo setup here http://jsfiddle.net/dTsrY/  and i need help
> with a few issues that i am having.
>
> I am using bootstrap 3.0 and when the page gets smaller the menu moves
> outside of the bottom shadow image border and i would like for it to stay
> inside the border.

Inside header, div class="col-md-9 col-sm-12" at small widths is being
told to be 12 cols wide, which is too wide next to your logo - which
is also being told to be 12col wide - so it drops down

> Also, the width of the submenu is longer than the hover for the items in
> the submenu, so when you hover a submenu item there is extra white space to
> the right.

ul.sub-menu has a width of 200px (see ul#mainnav li ul - line 279) and
also is getting padding right (line 422). I guess that's too wide for
the parent.

>
> Thanks in advance for any help.
>
> --

Hope this helps.


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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] Help w/CSS and Bootstrap

[Karl DeSaulniers]

On Mar 2, 2014, at 1:27 PM, Michael Beaudoin  wrote:

> Hi all,
> 
> Thanks to all from my previous post regarding some CSS/Bootstrap issues. 
> 
> I've been able to work through most of my issues, but still have 2 that are 
> eluding me.
> 
> The sample page is located at: http://192.185.4.142/~badoyn/report_test/
> 
> Questions are:
> - In the left sidebar (Choose a Report) I would like the hover to extend the 
> complete width of the sidebar and midway up/down between the items. I still 
> can't get this to work. Should I use a more specific style to target just the 
> left sidebar? I don't want hose all the panel that are part of bootstrap.
> 
> - In the Report Parameters section, I've added some css/javascript that I 
> found on the web to make a custom drop down list. When I have just one it 
> works beautifully. When I add more they seem to operate at the same time. I'm 
> sure it's simple but I can't see it. Been doing a lot of searching and 
> reading. I even tried to contact the author of the tutorial but have received 
> no answer. If there is a better way I'm open to it. The client would like a 
> custom drop down, not the run-of-the-mill kind.
> 
> Thanks all for the help.
> 
> Michael


If your using bootstrap, you could look into the chosen dropdown menus (that's 
their name "chosen").
They are a little bit of a pain to work with, but with persistence you can get 
them to work beautifully.
This one I know from exp... ;)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@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] Help w/CSS and Bootstrap

[Chris Rockwell]

>
> I think you will have more success using Bootstrap's .nav markup, styled
> with
> .nav-pills and .nav-stacked. The current markup will need some difficult
> CSS to
> resolve, methinks.
>
> (This just from a cursory look at Bootstrap - you may find something
> better.)
>

The current markup won't need difficult CSS, but it would need more
specificity
than I would personally prefer.  100% agree that if bootstrap has something
built
in for this, you should go that route.


Dunno about "working beautifully" as I can't even focus them with my
> keyboard,
> let alone having any ARIA to assist screen-readers. Hopefully they do
> better on
> touch screens.
>
> What do you have against select boxes - which would be easier to process
> server-side, I would think?


 100% agree with this sentiment as well.  Granted 's aren't as
customizable
as what Michael has going here, the benefit to ease of digestion (assuming
server side code
is the first to get it) and accessibility is a discussion worth having with
the client, IMO.
__
css-discuss [css-d@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] Help w/CSS and Bootstrap

[David Hucklesby]

On 3/2/14, 11:27 AM, Michael Beaudoin wrote:
[...]


The sample page is located at: http://192.185.4.142/~badoyn/report_test/

Questions are: - In the left sidebar (Choose a Report) I would like the
hover to extend the complete width of the sidebar and midway up/down between
the items. I still can't get this to work. Should I use a more specific style
to target just the left sidebar? I don't want hose all the panel that are
part of bootstrap.



I think you will have more success using Bootstrap’s .nav markup, styled with
.nav-pills and .nav-stacked. The current markup will need some difficult CSS to
resolve, methinks.

(This just from a cursory look at Bootstrap - you may find something better.)



- In the Report Parameters section, I've added some css/javascript that I
found on the web to make a custom drop down list. When I have just one it
works beautifully. When I add more they seem to operate at the same time.
I'm sure it's simple but I can't see it.  ...


Dunno about "working beautifully" as I can’t even focus them with my keyboard,
let alone having any ARIA to assist screen-readers. Hopefully they do better on
touch screens.

What do you have against select boxes - which would be easier to process
server-side, I would think?
--
Cordially,
David

__
css-discuss [css-d@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] Help with positioning list

[Larry Martell]

On Sun, Mar 17, 2013 at 2:40 PM, Jon Reece  wrote:
>
> On Sun, Mar 17, 2013 at 9:42 AM, Larry Martell 
> wrote:
>>
>> Please look at: http://jsfiddle.net/6Q6ud/
>>
>> What I want is the 'Convert and download' button to be directly under
>> the "Pixel Size" field, and the list to begin on the same line as the
>> 'Convert and download' button, just after it, and then continue down.
>>
>> I've been messing with display and positioning styles for hours and
>> hours and just cannot get this to look like I want.
>
>
> This may help you come up with one solution:
> http://alistapart.com/article/css-floats-101

Thanks for the reply and link. I was working on this, when my client
asked 'How you coming on this?' I told them what I was working on.
They said let's see it. I showed them and they said 'It's fine like
that.' That seems to happen a lot - someone asks for something a
certain way, and after putting time and effort in trying to do, then
they say it's fine some other way. Oh well, it's their nickel.
__
css-discuss [css-d@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] Help with positioning list

[Jon Reece]

On Sun, Mar 17, 2013 at 9:42 AM, Larry Martell wrote:

> Please look at: http://jsfiddle.net/6Q6ud/
>
> What I want is the 'Convert and download' button to be directly under
> the "Pixel Size" field, and the list to begin on the same line as the
> 'Convert and download' button, just after it, and then continue down.
>
> I've been messing with display and positioning styles for hours and
> hours and just cannot get this to look like I want.
>

This may help you come up with one solution:
http://alistapart.com/article/css-floats-101

-- 
Jon Reece
jon.re...@gmail.com
__
css-discuss [css-d@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] help with positioning

[Susanne Jäger]

Hi Chris,

Chris Kavinsky schrieb am 07.12.2012 21:40:

I'm working on a new site where I used relative positioning to arrange the
logo and nav horizontally. Consequently, there was a huge gap between the
site header area and the content area because of the repositioning of the
logo, so I moved the content up to fill the space (top:-115px).


looks a bit overcomplicated to me.


Here's the site in progress:

http://associationdatabase.com/aws/OAA/pt/sp/home_page


I'd try position: absolute; for the logo removing it from the flow and 
adding an appropriate padding-top to #subcontent to make room for the 
logo. Then everything else can stay in place.


greetings
Susanne

--
http://sujag.de - Webentwicklung und -beratung
susjae...@sujag.de
Christinenstr. 36, 10119 Berlin, Tel: 030 - 443 241 73
__
css-discuss [css-d@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] Help with CSS3 transitions?

[Kyle Sessions]

On Mon, Jul 23, 2012 at 1:02 PM, David Hucklesby wrote:

> On 7/23/12 11:25 AM, Kyle Sessions wrote:
>
>> On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby > >wrote:
>>
>>  On 7/20/12 12:24 PM, Kyle Sessions wrote:
>>>
>>>  Hi everyone,

 I was hoping someone could give me a hand with the CSS3 transition
 property. I've set up a very simple test page here:

 http://kage23.com/transition-test.html
 
 >


 When you first load the page, you should see a  with four visible
 items, and a "More" link. There's also another  with a few
 additional items, that is hidden when you first load the page (height:
 0px; overflow: hidden;). When you click the "More" link, I'm using
 Javascript/YUI to add a class to the hidden , that gives it height:
 auto; instead of height: 0px;. I have applied the transition property
 [...]


>>> Transitions only work from one specific value to another. "Auto" won't
>>> work,
>>> as you discovered.
>>>
>>> Try deleting the "height" properties, and use "max-height" instead. Make
>>> sure the max-height on the ".open" state is big enough for any future
>>> number
>>> of list items in the submenu. I'd use "em"s for this.
>>>
>>>
>> Thanks, David!
>>
>> I couldn't use max-height because in the actual production environment
>> that
>> this is intended for, there's no way to predict what the maximum number of
>> additional items is. I did get it working, though. I put the additional
>> items into a containing div, then I measured the height of the
>> additional-items , and then used Javascript to adjust the height of
>> the
>> containing div, rather than the actual  itself. Throw an
>> overflow:hidden onto the containing div, and it's good to go.
>>
>> http://kage23.com/transition-**test.html
>>
>>
> Cool!
>
> But I hope you don't anticipate having more than a dozen sub-items, though.
> The bottom items might not be visible in that case. YMMV of course.
> --
> Cordially,
> David
>

Why would the bottom items not be visible? Unless I'm misunderstanding, I
_think_ this solution should allow for any number of sub-items, since I'm
measuring the height of the sub-items themselves, and toggling the height
of the sub-item container between 0 and the actual measured height of the
sub-items. In the actual production environment, there will certainly be
more than a dozen sub-items in many cases.

-- 
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com

510-665-1200 + 128

www.bepress.com

bepress: the frontier of scholarly publishing since 1999

Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.com
__
css-discuss [css-d@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] Help with CSS3 transitions?

[David Hucklesby]

On 7/23/12 11:25 AM, Kyle Sessions wrote:

On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby wrote:


On 7/20/12 12:24 PM, Kyle Sessions wrote:


Hi everyone,

I was hoping someone could give me a hand with the CSS3 transition
property. I've set up a very simple test page here:

http://kage23.com/transition-**test.html

When you first load the page, you should see a  with four visible
items, and a "More" link. There's also another  with a few
additional items, that is hidden when you first load the page (height:
0px; overflow: hidden;). When you click the "More" link, I'm using
Javascript/YUI to add a class to the hidden , that gives it height:
auto; instead of height: 0px;. I have applied the transition property
[...]



Transitions only work from one specific value to another. "Auto" won't
work,
as you discovered.

Try deleting the "height" properties, and use "max-height" instead. Make
sure the max-height on the ".open" state is big enough for any future
number
of list items in the submenu. I'd use "em"s for this.



Thanks, David!

I couldn't use max-height because in the actual production environment that
this is intended for, there's no way to predict what the maximum number of
additional items is. I did get it working, though. I put the additional
items into a containing div, then I measured the height of the
additional-items , and then used Javascript to adjust the height of the
containing div, rather than the actual  itself. Throw an
overflow:hidden onto the containing div, and it's good to go.

http://kage23.com/transition-test.html



Cool!

But I hope you don't anticipate having more than a dozen sub-items, though.
The bottom items might not be visible in that case. YMMV of course.
--
Cordially,
David


__
css-discuss [css-d@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] Help with CSS3 transitions?

[Kyle Sessions]

On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby wrote:

> On 7/20/12 12:24 PM, Kyle Sessions wrote:
>
>> Hi everyone,
>>
>> I was hoping someone could give me a hand with the CSS3 transition
>> property. I've set up a very simple test page here:
>>
>> http://kage23.com/transition-**test.html
>>
>> When you first load the page, you should see a  with four visible
>> items, and a "More" link. There's also another  with a few
>> additional items, that is hidden when you first load the page (height:
>> 0px; overflow: hidden;). When you click the "More" link, I'm using
>> Javascript/YUI to add a class to the hidden , that gives it height:
>> auto; instead of height: 0px;. I have applied the transition property
>> [...]
>>
>
> Transitions only work from one specific value to another. "Auto" won't
> work,
> as you discovered.
>
> Try deleting the "height" properties, and use "max-height" instead. Make
> sure the max-height on the ".open" state is big enough for any future
> number
> of list items in the submenu. I'd use "em"s for this.
>

Thanks, David!

I couldn't use max-height because in the actual production environment that
this is intended for, there's no way to predict what the maximum number of
additional items is. I did get it working, though. I put the additional
items into a containing div, then I measured the height of the
additional-items , and then used Javascript to adjust the height of the
containing div, rather than the actual  itself. Throw an
overflow:hidden onto the containing div, and it's good to go.

http://kage23.com/transition-test.html

Best,
Kyle


> --
> Cordially,
> David
>
>
> __**__**__
> css-discuss [css-d@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/
>



-- 
Kyle G Sessions
Berkeley Electronic Press
ksessi...@bepress.com

510-665-1200 + 128

www.bepress.com

bepress: the frontier of scholarly publishing since 1999

Check out IR success stories on the DC Telegraph at
http://blog.digitalcommons.bepress.com
__
css-discuss [css-d@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] Help with CSS3 transitions?

[David Hucklesby]

On 7/20/12 12:24 PM, Kyle Sessions wrote:

Hi everyone,

I was hoping someone could give me a hand with the CSS3 transition
property. I've set up a very simple test page here:

http://kage23.com/transition-test.html

When you first load the page, you should see a  with four visible
items, and a "More" link. There's also another  with a few
additional items, that is hidden when you first load the page (height:
0px; overflow: hidden;). When you click the "More" link, I'm using
Javascript/YUI to add a class to the hidden , that gives it height:
auto; instead of height: 0px;. I have applied the transition property
[...]


Transitions only work from one specific value to another. "Auto" won't work,
as you discovered.

Try deleting the "height" properties, and use "max-height" instead. Make
sure the max-height on the ".open" state is big enough for any future number
of list items in the submenu. I'd use "em"s for this.
--
Cordially,
David


__
css-discuss [css-d@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] help with centering floated list

[David Hucklesby]

On 6/29/12 7:04 AM, Chris Kavinsky wrote:

Has anyone had any luck with being able to center a list that floats the
list items so it can be horizontal? The only technique I was able to
find required the css to use overflow:hidden, but that wouldn't work for
the project I'm working on since the navigation could potentially use
drop submenus, and the overflow would clip them. Here's the site I'm
working on for reference:

http://associationdatabase.com/aws/YBAA/pt/sp/home2



Centering floats is possible, but awkward. I suggest using something like
this inline-block approach instead. "Live edit" the code to change
"text-align: left;" on .nav-bar to "text-align: center;" to center it:

  

P.S. Even works in IE 6. :)
--
Cordially,
David


__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[mem]

On Jun 7, 2012, at 8:46 , Philippe Wittenbergh wrote:

> 
> Le 7 juin 2012 à 06:23, mem a écrit :
> 
>> So, perhaps this is what I'm not getting: 
>> 
>> if we float an element to the right, for example, but we give it a width of 
>> 100% what will that float: right visually accomplish ?
> 
> Nothing,… maybe ? No, not really nothing. Floating elements has lots of 
> implications (not only for the element itself, but for the flow of the 
> document).
> 
> Floating that element might have implications for how the content 
> (descendants) of that element affect the element itself. Floating the element 
> also affects margin-collapsing. It will affect how subsequent block elements 
> behave.
> 
> For example, floating the element establishes a block formatting context 
> (css2.1:9.4.1) - as such it will contain floated descendants. 
> 
> --
> Philippe Wittenbergh
> http://l-c-n.com

I will note that. 
When the time comes, I will properly read and study the replies provided and 
other that may follow.

note: That reply was intended to leave yesterday (prior to Georg reply), but it 
got stuck on "outbox" box for some reason. 


Regards,
mem



__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[Philippe Wittenbergh]

Le 7 juin 2012 à 06:23, mem a écrit :

> So, perhaps this is what I'm not getting: 
> 
> if we float an element to the right, for example, but we give it a width of 
> 100% what will that float: right visually accomplish ?

Nothing,… maybe ? No, not really nothing. Floating elements has lots of 
implications (not only for the element itself, but for the flow of the 
document).

Floating that element might have implications for how the content (descendants) 
of that element affect the element itself. Floating the element also affects 
margin-collapsing. It will affect how subsequent block elements behave.

For example, floating the element establishes a block formatting context 
(css2.1:9.4.1) - as such it will contain floated descendants. 

--
Philippe Wittenbergh
http://l-c-n.com



__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[Georg]

On 06.06.2012 20:51, mem wrote:

On Jun 6, 2012, at 18:02 , Georg wrote:


On 06.06.2012 18:16, mem wrote:

Can you please take a look on the following snipped and either edited and/or 
explain here, why, when we add a *percentage* value on margin, we get some li 
to drop the float ?

http://jsfiddle.net/vNmjS/

Question: how wide is the float? :-)

I believe it is, as wide as their contents.
And that should be X% wide.
But not 100% wide, unless, their contents correspond to the totality of the 
container.

I still not get with if we do px or em it don't drop, and if we use % it 
drops...


In my experience with floats the problem lies in what the 
percentage-value for those margins gets calculated of - the width of the 
container, the float itself.


As floats, as Tom correctly says, shrink to the width of their content 
when no width is declared, we get a kind of a circular calculation of 
percentage used on its children, ending up with a container that is 
slightly too narrow.  That's not the case with px and em, as values 
using such units are not calculated from container's dimensions, so they 
are "fixed" in advance for calculating the float's width.



A more normal way to do this, is to declare...

div#container {
float: right; /* or 'left' */
text-align: right;
width: 100%;
}

...which provides enough space in most cases. The ul itself will of course work 
fine as only container, with a similar styling.

I see that we float right an element of 100% width. That seems to take no 
effect on their contained elements, it only takes effect when we text-align: 
right the inline or text elements inside.
Indeed it works but I still don't totally understand the solution.

Why should we declare a width of 100% will it not normally taken as 100% by 
default ?


Please discard all nonsense that I may be saying here.


No nonsense found in your writing, your questions make sense. Once you 
master 'floats' you can introduce magic in web design :-)


Float-styling on a container has no effect on children - isn't inherited 
in any way. Float-styling only affect the flow of content/elements that 
follow a floating element.


The only reason to float a container in some cases, is that floats 
contain (wrap around) both their floating and non-floating children. 
That would have been useful if you had floated those list-items to line 
them up. Such a 'float' container must be given a width to prevent it 
from shrinking, and 100% of the float's own  container - whatever that 
container is - is quite often the most logical value. A 100% wide 
float-container prevents following content/elements from flowing up on 
its side(s), which is how we want it in most cases.


Since all children are styled to be 'inline' in your example, 
containment is not an issue. Thus, simply using the 'ul' as 
block-container with text-align: left/right/center would produce a 
3-items "menu". And, a 'display: block' styled element do expand to full 
width of _its_ container.

Typically, the following basic styling...
ul {padding: .1em 0; margin: 0; text-align: right; }
ul li {display: inline-block; margin: nnxx; padding: nnxx; }  /* 
whatever values/units you want on margins/padding to space list-items */
...is a way to start styling a list for the rendering in your example, 
and 'float' styling isn't necessary.


regards
Georg
__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[mem]

On Jun 6, 2012, at 20:55 , Tom Livingston wrote:

> On Wed, Jun 6, 2012 at 2:51 PM, mem  wrote:
>> On Jun 6, 2012, at 18:02 , Georg wrote:
>> 
>>> On 06.06.2012 18:16, mem wrote:
 Can you please take a look on the following snipped and either edited 
 and/or explain here, why, when we add a *percentage* value on margin, we 
 get some li to drop the float ?
 
 http://jsfiddle.net/vNmjS/
>>> 
>>> Question: how wide is the float? :-)
>> 
>> I believe it is, as wide as their contents.
>> And that should be X% wide.
>> But not 100% wide, unless, their contents correspond to the totality of the 
>> container.
>> 
>> I still not get with if we do px or em it don't drop, and if we use % it 
>> drops...
>> 
>> 
>>> 
>>> A more normal way to do this, is to declare...
>>> 
>>> div#container {
>>> float: right; /* or 'left' */
>>> text-align: right;
>>> width: 100%;
>>> }
>>> 
>>> ...which provides enough space in most cases. The ul itself will of course 
>>> work fine as only container, with a similar styling.
>> 
>> I see that we float right an element of 100% width. That seems to take no 
>> effect on their contained elements, it only takes effect when we text-align: 
>> right the inline or text elements inside.
>> Indeed it works but I still don't totally understand the solution.
>> 
>> Why should we declare a width of 100% will it not normally taken as 100% by 
>> default ?
> 
> Floating an element causes it to constrict to the width of it's contents, no?

Yes. You are right.

So, perhaps this is what I'm not getting: 

if we float an element to the right, for example, but we give it a width of 
100% what will that float: right visually accomplish ?


__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[Tom Livingston]

On Wed, Jun 6, 2012 at 2:51 PM, mem  wrote:
> On Jun 6, 2012, at 18:02 , Georg wrote:
>
>> On 06.06.2012 18:16, mem wrote:
>>> Can you please take a look on the following snipped and either edited 
>>> and/or explain here, why, when we add a *percentage* value on margin, we 
>>> get some li to drop the float ?
>>>
>>> http://jsfiddle.net/vNmjS/
>>
>> Question: how wide is the float? :-)
>
> I believe it is, as wide as their contents.
> And that should be X% wide.
> But not 100% wide, unless, their contents correspond to the totality of the 
> container.
>
> I still not get with if we do px or em it don't drop, and if we use % it 
> drops...
>
>
>>
>> A more normal way to do this, is to declare...
>>
>> div#container {
>> float: right; /* or 'left' */
>> text-align: right;
>> width: 100%;
>> }
>>
>> ...which provides enough space in most cases. The ul itself will of course 
>> work fine as only container, with a similar styling.
>
> I see that we float right an element of 100% width. That seems to take no 
> effect on their contained elements, it only takes effect when we text-align: 
> right the inline or text elements inside.
> Indeed it works but I still don't totally understand the solution.
>
> Why should we declare a width of 100% will it not normally taken as 100% by 
> default ?

Floating an element causes it to constrict to the width of it's contents, no?


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[mem]

On Jun 6, 2012, at 18:02 , Georg wrote:

> On 06.06.2012 18:16, mem wrote:
>> Can you please take a look on the following snipped and either edited and/or 
>> explain here, why, when we add a *percentage* value on margin, we get some 
>> li to drop the float ?
>> 
>> http://jsfiddle.net/vNmjS/
> 
> Question: how wide is the float? :-)

I believe it is, as wide as their contents.
And that should be X% wide.
But not 100% wide, unless, their contents correspond to the totality of the 
container.

I still not get with if we do px or em it don't drop, and if we use % it 
drops...


> 
> A more normal way to do this, is to declare...
> 
> div#container {
> float: right; /* or 'left' */
> text-align: right;
> width: 100%;
> }
> 
> ...which provides enough space in most cases. The ul itself will of course 
> work fine as only container, with a similar styling.

I see that we float right an element of 100% width. That seems to take no 
effect on their contained elements, it only takes effect when we text-align: 
right the inline or text elements inside.
Indeed it works but I still don't totally understand the solution.

Why should we declare a width of 100% will it not normally taken as 100% by 
default ? 


Please discard all nonsense that I may be saying here.

> 
> regards
>Georg


Thanks a lot,
mem
__
css-discuss [css-d@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] help on understanding a float behavior with a % margin

[Georg]

On 06.06.2012 18:16, mem wrote:

Can you please take a look on the following snipped and either edited and/or 
explain here, why, when we add a *percentage* value on margin, we get some li 
to drop the float ?

http://jsfiddle.net/vNmjS/


Question: how wide is the float? :-)

A more normal way to do this, is to declare...

div#container {
float: right; /* or 'left' */
text-align: right;
width: 100%;
}

...which provides enough space in most cases. The ul itself will of 
course work fine as only container, with a similar styling.


regards
Georg

__
css-discuss [css-d@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] Help with adding a class and overriding the parent class style

[Larry Martell]

On Tue, May 29, 2012 at 12:49 AM, Micky Hulse
 wrote:
> Hello,
>
> On Mon, May 28, 2012 at 10:03 PM, Larry Martell  
> wrote:
>> I have tried every which way I can think of to specify this, e..g.:
>> #waferiz .waferviz .wafer_summary .metadata b {
>>   color: black;
>> }
>
> I don't know your full stylesheet, so I can't really offer up many
> suggestions (and/or optimizations), but:
>
> 1. You're missing a "v" in your #waferviz ID (#) for the .metadata b
> style declaration.

Thank you. That was the problem.

-larry
__
css-discuss [css-d@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] Help with adding a class and overriding the parent class style

[Micky Hulse]

Hello,

On Mon, May 28, 2012 at 10:03 PM, Larry Martell  wrote:
> I have tried every which way I can think of to specify this, e..g.:
> #waferiz .waferviz .wafer_summary .metadata b {
>   color: black;
> }

I don't know your full stylesheet, so I can't really offer up many
suggestions (and/or optimizations), but:

1. You're missing a "v" in your #waferviz ID (#) for the .metadata b
style declaration.

2. Here's a fiddle:



... Do you need IE6 support? If not, you could do this:



... more info here on the child selector:



I am sure others could give better solutions. :)

Cheers,
Micky
__
css-discuss [css-d@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] help?

[HallMarc Sales]

> -Original Message-
> From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-
> discuss.org] On Behalf Of jon thornton
> Sent: Tuesday, March 06, 2012 3:53 PM
> To: css-d@lists.css-discuss.org
> Subject: [css-d] help?
> 
> Thanks, but on looking at the forum I can't find how or where to submit a
> question, nor repond to existing questions. I'm confued about how this
> works, I've only used the Wordpress Forums.
> 
> I read the rules, many of which I don't understand :
> 
> 
> 
> Do not crosspost between lists.
> 
> Keep your signature file short
> 
> No HTML or RTF (rich text) e-mai
> 
> If your address starts bouncing, you will be removed from the list.
> 
> 
> 
So far so good! Welcome to the list. This is how you post questions to this
and many other lists like it; you send your query to the list. A lot of
lists and I can't remember if this is one of them or not, frown upon
top-posting which means type your response below the previous response. This
is done so it gets parsed correctly to this and other websites. 
When responding to a thread/post it is good practice to snip the content
down to the section you are responding as well.

Marc Hall
HallMarc Websites





__
css-discuss [css-d@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] help targeting a nested list

[David Laakso]

On 11/16/11 3:35 PM, Angela French wrote:

So I wrote this style, and it works for the nesting level indicated, but I need 
a style to work at any nesting level for li.ListNumber. Isn't that possible?



Set paragraphs.

Best,
~d


Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@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] help targeting a nested list

[Angela French]

So I wrote this style, and it works for the nesting level indicated, but I need 
a style to work at any nesting level for li.ListNumber. Isn't that possible?
And no matter what I still can't get IE8/IE7 to render the decimals.

div#Content_box ul ol li.ListNumber
{
font-size: 1.25em;
list-style-type:decimal!important;

}




>-Original Message-
>From: Tim Climis [mailto:tim.cli...@gmail.com]
>Sent: Wednesday, November 16, 2011 10:19 AM
>To: Angela French; 'css-d'
>Subject: RE: [css-d] help targeting a nested list
>
>> Is there some way to target the li that doesn't care what level of
>> nesting
>it is in?
>
>Yes, and your example is it.  "li" selects any list item.  "li li" selects 
>second,
>third, etc level list items.
>
>The problem is that there's a rule div#Content_box ol that sets the font-size
>to .8em on the whole list so if you want your text to be the same size as
>everything else, you'll have to blow it up again.  1.25em (the reciprocal of 
>.8)
>should do the trick.
>
>---Tim
>

__
css-discuss [css-d@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] help targeting a nested list

[Tim Climis]

> Is there some way to target the li that doesn't care what level of nesting
it is in?
 
Yes, and your example is it.  "li" selects any list item.  "li li" selects
second, third, etc level list items.

The problem is that there's a rule div#Content_box ol that sets the
font-size to .8em on the whole list so if you want your text to be the same
size as everything else, you'll have to blow it up again.  1.25em (the
reciprocal of .8) should do the trick.

---Tim


__
css-discuss [css-d@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] help with positioning text in bottom right corner of content area

[Angela French]

Hello,
I made the parent (div id="Content_box" style="position:relative;">.  But this 
had the unintended consequences of messing up the rendering of the drop down 
menus that display over the page content.

You can see it here:  http://sbctc.edu/college/test.aspx



From: Kevin A. Cameron [mailto:kevinacame...@gmail.com]
Sent: Friday, October 21, 2011 2:29 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] help with positioning text in bottom right corner of 
content area

Try making the parent element position relative, and the AF element position 
absolute, bottom:0, left:0.

Kevin

On Fri, Oct 21, 2011 at 2:15 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
I need to position a very small text item in the bottom right hand corner of my 
content area.
I've tried positioning it relative with bottom:0 and right:0, but that didn't 
work.  So then I just positioned it like so:

AF.

This does move it to the right, but not to the bottom of my page content area.  
I can't determine what is keeping it from sitting on the bottom.  Any advice 
appreciated.  Here is my test page:

http://sbctc.edu/college/test.aspx



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.org<mailto:css-d@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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@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] help with positioning text in bottom right corner ofcontent area

[Angela French]

I tried that.  I think that div needs its parent to be relatively positioned.

>-Original Message-
>From: Jayesh T [mailto:xfs...@hotmail.com]
>Sent: Friday, October 21, 2011 2:50 PM
>To: Angela French; css-d@lists.css-discuss.org
>Subject: Re: [css-d] help with positioning text in bottom right corner
>ofcontent area
>
>You could put it in a DIv like this:
>
>
>AF .
>
>
>
>Then your CSS is like this:
>
>.mybottom {
>   position: absolute;
>   bottom: 0;
>   right: 0;
>   height: 50px;
>   background-color: blue;
>   color: yellow;
>}
>
>hth
>
>
>--
>From: "Angela French" 
>Sent: Friday, October 21, 2011 10:15 PM
>To: 
>Subject: [css-d] help with positioning text in bottom right corner ofcontent
>area
>
>> I need to position a very small text item in the bottom right hand
>> corner of my content area.
>> I've tried positioning it relative with bottom:0 and right:0, but that
>> didn't work.  So then I just positioned it like so:
>>
>> AF.
>>
>> This does move it to the right, but not to the bottom of my page
>> content area.  I can't determine what is keeping it from sitting on the
>bottom.
>> Any advice appreciated.  Here is my test page:
>>
>> http://sbctc.edu/college/test.aspx
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.com/
>>
>>
>
>__
>> css-discuss [css-d@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 [css-d@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] help with positioning text in bottom right corner ofcontent area

[Jayesh T]

You could put it in a DIv like this:


 AF .



Then your CSS is like this:

.mybottom {
position: absolute;
bottom: 0;
right: 0;
height: 50px;
background-color: blue;
color: yellow;
}

hth


--
From: "Angela French" 
Sent: Friday, October 21, 2011 10:15 PM
To: 
Subject: [css-d] help with positioning text in bottom right corner ofcontent 
area


I need to position a very small text item in the bottom right hand corner 
of my content area.
I've tried positioning it relative with bottom:0 and right:0, but that 
didn't work.  So then I just positioned it like so:


AF.

This does move it to the right, but not to the bottom of my page content 
area.  I can't determine what is keeping it from sitting on the bottom. 
Any advice appreciated.  Here is my test page:


http://sbctc.edu/college/test.aspx



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/

__
css-discuss [css-d@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 [css-d@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] help with positioning text in bottom right corner of content area

[Angela French]

I did try putting the  inside a < div>  that I positioned relative with the 
 positioned absolutely.  But I suppose what I need to do is set the content 
container to relative.  But I didn't write the layout CSS (happened before I 
got here) and there is something funky about the nested divs used to arrive at 
the content area.  I'm a little hesitant to mess with them. Any other 
possibilities?

From: Kevin A. Cameron [mailto:kevinacame...@gmail.com]
Sent: Friday, October 21, 2011 2:29 PM
To: Angela French
Cc: css-d (css-d@lists.css-discuss.org)
Subject: Re: [css-d] help with positioning text in bottom right corner of 
content area

Try making the parent element position relative, and the AF element position 
absolute, bottom:0, left:0.

Kevin

On Fri, Oct 21, 2011 at 2:15 PM, Angela French 
mailto:afre...@sbctc.edu>> wrote:
I need to position a very small text item in the bottom right hand corner of my 
content area.
I've tried positioning it relative with bottom:0 and right:0, but that didn't 
work.  So then I just positioned it like so:

AF.

This does move it to the right, but not to the bottom of my page content area.  
I can't determine what is keeping it from sitting on the bottom.  Any advice 
appreciated.  Here is my test page:

http://sbctc.edu/college/test.aspx



Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu<mailto:afre...@sbctc.edu>
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.org<mailto:css-d@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://evolt.org> -- 
http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@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] help with positioning text in bottom right corner of content area

[David Laakso]

On 10/21/11 5:15 PM, Angela French wrote:

I need to position a very small text item in the bottom right hand corner of my 
content area.
I've tried positioning it relative with bottom:0 and right:0, but that didn't 
work.  So then I just positioned it like so:

http://sbctc.edu/college/test.aspx



Angela French



Tweak...



AF

~d

--
Desktop. Laptop. Tablet. Mobile!
http://chelseacreekstudio.com/

__
css-discuss [css-d@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] help with positioning text in bottom right corner of content area

[Kevin A. Cameron]

Oops, left:0 should be right:0.
Kevin


On Fri, Oct 21, 2011 at 2:29 PM, Kevin A. Cameron
wrote:

> Try making the parent element position relative, and the AF element
> position absolute, bottom:0, left:0.
>
> Kevin
>
>
>
> On Fri, Oct 21, 2011 at 2:15 PM, Angela French  wrote:
>
>> I need to position a very small text item in the bottom right hand corner
>> of my content area.
>> I've tried positioning it relative with bottom:0 and right:0, but that
>> didn't work.  So then I just positioned it like so:
>>
>> AF.
>>
>> This does move it to the right, but not to the bottom of my page content
>> area.  I can't determine what is keeping it from sitting on the bottom.  Any
>> advice appreciated.  Here is my test page:
>>
>> http://sbctc.edu/college/test.aspx
>>
>>
>>
>> Angela French
>> Internet Specialist
>> State Board for Community and Technical Colleges
>> 360-704-4316
>> afre...@sbctc.edu
>> http://www.checkoutacollege.com/
>>
>> __
>> css-discuss [css-d@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 [css-d@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] help with positioning text in bottom right corner of content area

[Kevin A. Cameron]

Try making the parent element position relative, and the AF element position
absolute, bottom:0, left:0.

Kevin


On Fri, Oct 21, 2011 at 2:15 PM, Angela French  wrote:

> I need to position a very small text item in the bottom right hand corner
> of my content area.
> I've tried positioning it relative with bottom:0 and right:0, but that
> didn't work.  So then I just positioned it like so:
>
> AF.
>
> This does move it to the right, but not to the bottom of my page content
> area.  I can't determine what is keeping it from sitting on the bottom.  Any
> advice appreciated.  Here is my test page:
>
> http://sbctc.edu/college/test.aspx
>
>
>
> Angela French
> Internet Specialist
> State Board for Community and Technical Colleges
> 360-704-4316
> afre...@sbctc.edu
> http://www.checkoutacollege.com/
>
> __
> css-discuss [css-d@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 [css-d@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] help with the last item in a menu sprite

[Debbie Campbell]

That's close - I changed that last image li width from 108 to 99, but 
then I remeasured and found that two of the items were coming it at 
202.5px and 97.5px. I rounded down and that fixed it, thanks for the help.


--
Debbie

On 10/7/2011 5:17 PM, Tom Livingston wrote:

The UL has a width of 960 and thes add up to 969, unless it's
just too late in the day for me to do math.

Maybe that's it?

On Fri, Oct 7, 2011 at 6:56 PM, Debbie Campbell  
wrote:

The 'Contact' a:hover effect is showing up on the bottom left below the menu
bar - there are no HTML errors, and I can't immediately see what's happening
to cause it to shift:


http://www.redkitecreative.com/projects/paramaya/solution/for-clients/

__
css-discuss [css-d@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] help with the last item in a menu sprite

[Tom Livingston]

The UL has a width of 960 and the s add up to 969, unless it's
just too late in the day for me to do math.

Maybe that's it?

On Fri, Oct 7, 2011 at 6:56 PM, Debbie Campbell  
wrote:
> The 'Contact' a:hover effect is showing up on the bottom left below the menu
> bar - there are no HTML errors, and I can't immediately see what's happening
> to cause it to shift:
>
>> http://www.redkitecreative.com/projects/paramaya/solution/for-clients/
>
> Can someone help?
>
> --
> Debbie Campbell
> www.redkitecreative.com
> __
> css-discuss [css-d@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/
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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] help with button background alignment

[Philippe Wittenbergh]

On Oct 1, 2011, at 3:54 AM, Chris Kavinsky wrote:

> I'm having an alignment issue in Safari and Chrome with a button background
> and I can't figure out what's going on. Basically, in the site search in the
> upper right, I added a background image to the button and the search area is
> using a corner radius. In Safari and Chrome (Firefox renders it the way I
> want it to), the button pushes down about 10 pixels. I tried changing the
> margin in the search area and the button itself, but it didn't affect
> anything. I can't find anywhere in the css that's causing it. Anyone have an
> idea why its pushing down in the two browsers and how to fix it? Here's the
> site link:
> 
> http://associationdatabase.com/aws/WCCA/pt/sp/Home_Page

It is a bit of a weirdo thing… iirc it was even discussed once on this list. I 
wouldn't qualify it as a bug though.

Basically, the 'value' attribute for your submit button is empty; WebKit 
doesn't generate a line box inside the button – or rather, the line-box inside 
the button collapses somehow to 0 (zero) height, pushing it down (input 
elements basically being of the 'inline-block' this makes sense - those things 
are aligned based on the baseline inside it).

If you add a non-empty value attribute, then everything displays fine. Adding a 
value is also accessibility friendly, just saying. You can hide that text-node 
with negative text-indent or so [*].

demo with attractive colours:
http://dev.l-c-n.com/_temp/ck.html


[*] might cause problems for iExploder < 8, I don't remember off hand and I'm 
too lazy to launch a VM.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/






__
css-discuss [css-d@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] help with button background alignment

[Tom Livingston]

I came across this a little while ago. It *might* help:

input[type=search] {-webkit-appearance : none;}



On Fri, Sep 30, 2011 at 2:54 PM, Chris Kavinsky  wrote:
> I'm having an alignment issue in Safari and Chrome with a button background
> and I can't figure out what's going on. Basically, in the site search in the
> upper right, I added a background image to the button and the search area is
> using a corner radius. In Safari and Chrome (Firefox renders it the way I
> want it to), the button pushes down about 10 pixels. I tried changing the
> margin in the search area and the button itself, but it didn't affect
> anything. I can't find anywhere in the css that's causing it. Anyone have an
> idea why its pushing down in the two browsers and how to fix it? Here's the
> site link:
>
> http://associationdatabase.com/aws/WCCA/pt/sp/Home_Page
> __
> css-discuss [css-d@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/
>



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@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] Help with 3rd column in IE8

[David Laakso]

On 9/16/11 3:03 PM, Coleen Holley wrote:

I have a website that works perfectly in IE8 Compatibility mode, Firefox,
Chrome, Opera and Safari, but in IE8 I get a "bleed" or "overflow" effect -
you will have to view this in IE8 non-compatibility mode to see what I am
referring to: http://www.aheartbreakinghchoice.com


Coleen



Coleen,

Validate both the CSS and markup. If this does not resolve the issue 
please do bring it back to the list.


Best,
~d
__
css-discuss [css-d@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] Help with 3rd column in IE8

[Lesley Lutomski]

On 16/09/11 20:22, David Laakso wrote:

On 9/16/11 3:03 PM, Coleen Holley wrote:

http://www.aheartbreakinghchoice.com

Can anyone offer me any assistance with why I am getting this overflow
effect in IE8 only? Here is my CSS for that section:

Coleen



3:24p

Server not responding.

~d


There's a stray h in that URL - should be 
http://www.aheartbreakingchoice.com


No IE8 here, so that's all the assistance I can offer just now.

Lesley

__
css-discuss [css-d@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] Help with 3rd column in IE8

[David Laakso]

On 9/16/11 3:03 PM, Coleen Holley wrote:

  http://www.aheartbreakinghchoice.com

Can anyone offer me any assistance with why I am getting this overflow
effect in IE8 only? Here is my CSS for that section:

Coleen



3:24p

Server not responding.

~d
__
css-discuss [css-d@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] Help with div sizing?

[David Hucklesby]

On 8/19/11 9:39 AM, Ghodmode wrote:

On Sat, Aug 20, 2011 at 12:27 AM, Barry Brevik  wrote:

Is there a way, with css, to make a FORM and a containing DIV hug the
widest form element without specifically dimensioning the widths in
pixels? Out of the box, the form and the div take up all of the
available width in the browser.

Here is a test page demonstrating my dilemma:

http://www.manicreader.com/testpage.html


Use float:left on the DIV#container, then on the element that follows
it, use clear:left.



Couple more suggestions:

#container {
  display: table;
  margin: 0 auto;
}

Alternatively:

body {
  text-align: center;
}

#container {
  /* float: left; DELETE */
  display: inline-block;
  text-align: left;
}

Explanation:
float, tables, and inline-blocks shrink to fit the longest content.

Caveat: IE older than 8 does not apply display: table.
 It only applies something like inline-block if you add a separate, 
later rule of "display: inline" just for IE 6 - 7.


HTH
--
Cordially,
David


__
css-discuss [css-d@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] Help with div sizing?

[Barry Brevik]

>> Oops. I probably should have mentioned that I also want to center the
>> result horizontally in the browser window.
>> 
>> After trying a whole bunch of things, I'm going to guess that it
can't
>> be done using this method.
>> 

>Well how about something like this:
>
>body {
>text-align: center;
>width: 100%;
>margin: auto;
>}
>#container {
>border: 2px solid #ff; 
>width: 800px;
>margin: 0 auto;
>text-align: left;
}
>#form1 {
>border: 1px solid #ff;
>}
>
>You can't have float and center at the same time in this situation.

That is a good reply, and it works, but I was trying to get away with
the container div self-sizing to it's content and then having it be
centered without having to specifically dimension it.

Barry Brevik
__
css-discuss [css-d@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] Help with div sizing?

[John D]

> Oops. I probably should have mentioned that I also want to center the
> result horizontally in the browser window.
> 
> After trying a whole bunch of things, I'm going to guess that it can't
> be done using this method.
> 


Well how about something like this:

body {
text-align: center;
width: 100%;
margin: auto;
}
#container {
border: 2px solid #ff; 
width: 800px;
margin: 0 auto;
text-align: left;
}
#form1 {
border: 1px solid #ff;
}

You can't have float and center at the same time in this situation.


  
__
css-discuss [css-d@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] Help with div sizing?

[Barry Brevik]

> 
> > > http://www.manicreader.com/testpage.html
> > 
> > Use float:left on the DIV#container, then on the element 
> that follows 
> > it, use clear:left.
> 
> Wow, man, that works a charm! To be honest, I don't 
> understand float and clear very well, but you can bet I'll be 
> studying it.

Oops. I probably should have mentioned that I also want to center the
result horizontally in the browser window.

After trying a whole bunch of things, I'm going to guess that it can't
be done using this method.

Barry Brevik
__
css-discuss [css-d@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] Help with div sizing?

[Barry Brevik]

> > http://www.manicreader.com/testpage.html
> 
> Use float:left on the DIV#container, then on the element that 
> follows it, use clear:left.

Wow, man, that works a charm! To be honest, I don't understand float and
clear very well, but you can bet I'll be studying it.

Barry Brevik
__
css-discuss [css-d@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] Help with div sizing?

[Ghodmode]

On Sat, Aug 20, 2011 at 12:27 AM, Barry Brevik  wrote:
> Is there a way, with css, to make a FORM and a containing DIV hug the
> widest form element without specifically dimensioning the widths in
> pixels? Out of the box, the form and the div take up all of the
> available width in the browser.
>
> Here is a test page demonstrating my dilemma:
>
> http://www.manicreader.com/testpage.html

Use float:left on the DIV#container, then on the element that follows
it, use clear:left.


> TIA,
>
> Barry Brevik

--
Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@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] help with a table wrapping around a float

[Ghodmode]

On Thu, Aug 4, 2011 at 9:33 PM, Chris Kavinsky  wrote:
>
> I have a web page with a section of content floating to the right of the
> main content on the page. Within the main content is a table with a width
> set at 100% to fit the width of the page. The floated content comes first on
> the page so the main content will wrap around it, and it has a left margin
> set in the css. The text wraps the way I want it to, but the table is
> ignoring the float and overlapping the floated text and ignoring the left
> margin on the float.

Well, the table is supposed to take up 100% of the width of its
container, so it can't respect the margin of the content on the right.
The main content respects the margin because it doesn't have a defined
width.


> Any easy way to fix this without sticking the content
> into another div and floating it to the left so the table won't overlap the
> float?

You can put the table into a DIV and set overflow:hidden on that DIV.
The DIV respects the margin and the table is 100% of the width of the
DIV.

I don't remember why this works and I'm not sure I understood it when
I read it anyway, but it does the trick...


div.table-container {
overflow: hidden;
}
table.tabular-data {
width: 100%;
}
div.sidebar {
float: right;
width: 200px;
margin-left: 20px;
}










Another way would be to put all of your content into a block with
fixed width and position:relative, then move the section to the right
using positioning.  This would give you slightly cleaner markup and,
IMHO, look better.

900px wide and centered horizontally:


div.content {
width: 700px;
margin: 0 auto;
position: relative;
left: -100px;
}
table.tabular-data {
width: 100%;
}
div.sidebar {
position: absolute;
width: 200px;
right: -100px;
}










--
Ghodmode
http://www.ghodmode.com/blog
__
css-discuss [css-d@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] Help! I need help!

[Robert]

Thanks  to you all,
 for your commments that were sooo helpful in thinking this through. I kept 
thinking I know how to do this but had so little time. The page finally came 
together in the wee hours of the mornings when I had more time to think with 
out interruptions around me. 
Thanks to you all I really appreciate you all for your help..
robert
I 
--- On Thu, 6/16/11, Robert  wrote:

From: Robert 
Subject: [css-d] Help! I need help!
To: css-d@lists.css-discuss.org
Date: Thursday, June 16, 2011, 7:30 AM

Hi there.
I hope someone can help me.  I am trying to add include files in a website.
On my computer the page looks fine.  But when I upload the page  by FTP to the 
server the page falls apart. 

I dont understand what i did wrong.
Thanks for any help.
robert
__
css-discuss [css-d@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 [css-d@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] Help! I need help!

[David Laakso]

On 6/16/11 10:30 AM, Robert wrote:

Hi there.
I hope someone can help me.  I am trying to add include files in a website.
On my computer the page looks fine.  But when I upload the page  by FTP to the 
server the page falls apart.

I dont understand what i did wrong.
Thanks for any help.
robert



Are you using a .php extension [and do you have a CSS question]:-) ?


--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@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] Help! I need help!

[Christian Kirchhoff]

Hello Robert,

could you provide a link to the website, please. It is hard to analyze
the problem without seeing or knowing anything about the code.

Best regards

Christian
*Editura GmbH & Co. KG*
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de
AG Berlin-Charlottenburg · HRA 43189 B · USt.Id. DE217180548
Geschäftsführer: Stefan Krause · Ralf Szymanski

Am 16.06.2011 16:30, schrieb Robert:
> Hi there.
> I hope someone can help me.  I am trying to add include files in a website.
> On my computer the page looks fine.  But when I upload the page  by FTP to 
> the server the page falls apart. 
>
> I dont understand what i did wrong.
> Thanks for any help.
> robert
> __
> css-discuss [css-d@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 [css-d@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] Help finding history/discussion on multiple values

[Brian Kardell]

Sorry Gabriel, perhaps I should have been more specific.  You example shows
commas being used to separate values being passed to a function which
resolves a clipping region - this seems pretty standard and intuitive...

On the other hand - what I am talking about is modules (like background or
transition) whose values can be multiple (not expressed in shorthand, but
actually multiple) to reflect something like multiple layers of a background
- as described (again, for example) here:
http://www.w3.org/TR/css3-background/#layering


background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;


This means that a particular element has more than one value for a module
property - which isn't generally the case prior to this in CSS.  A serious
distinction between your example and mine is that given that your example is
merely providing values to a function its meaning is generally pretty
obvious with or without the commas and its impact is very contained.  There
is really nothing in or about CSS that would lead me to believe that I could
override the third argument somehow (definitely correct me if I am wrong
about that) - however, overriding individual properties with via a rule with
greater specificity or processed later is exactly the sort of thing that CSS
has been designed to do since day 1 when it comes to my case - and I don't
see how this allows it.  Given the array-like nature - CSS has no (to the
best of my knowledge) good way of dealing with those kinds of things that
would seem to be "common"... As far as I can tell, you wouldn't be able to
create a rule which added a new layer, nor a way to identify the right layer
in an array/list to override a property on.  There is also potentially some
disagreement and lack of clarity in terms of how properties will balance in
there... The drafts still have lots of red comments and I've seen some
discussion that it might not be 100% consistent between browsers (we would
expect that for a while) or even maybe between module specifications.

I think that reading what people were thinking when this was getting drafted
would be very informative to me in trying to understand the decisions,
considerations and direction.

-Brian


On Fri, Jun 10, 2011 at 11:16 AM, Gabriele Romanato <
gabriele.roman...@gmail.com> wrote:

> Hi Brian.
> The problem with CSS commas is that they're not required in all cases.
> Consider this example:
>
> #test {
>   clip: rect(10px, 10px, 10px, 5px);
> }
>
> CSS specs say that for the clip property commas are optional, but some
> browsers don't allow them to appear between values, meaning that for some
> browsers they're not allowed, even though that specs say the contrary.
>
> This happens also for the new properties. In other words, commas are
> property-dependent, because the CSS syntax says that they can be considered
> as separators.
> With the CSS3 properties, things get more complicated with the widespread
> use of browser-specific extensions (aka vendor prefixes).
>
> I think that you should document yourself by reading the browser-specific
> implementations, not the specs, because the properties you mentioned are so
> far supported only via vendor prefixes.
> When browsers will implement them without prefixes, then you can go
> straight to the official CSS3 module specs and read how they actually work.
>
> HTH :-)
>
> Gabriele Romanato
>
> --
> 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 [css-d@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] Help finding history/discussion on multiple values

[Gabriele Romanato]

Hi Brian.
The problem with CSS commas is that they're not required in all cases.
Consider this example:

#test {
  clip: rect(10px, 10px, 10px, 5px);
}

CSS specs say that for the clip property commas are optional, but some
browsers don't allow them to appear between values, meaning that for some
browsers they're not allowed, even though that specs say the contrary.

This happens also for the new properties. In other words, commas are
property-dependent, because the CSS syntax says that they can be considered
as separators.
With the CSS3 properties, things get more complicated with the widespread
use of browser-specific extensions (aka vendor prefixes).

I think that you should document yourself by reading the browser-specific
implementations, not the specs, because the properties you mentioned are so
far supported only via vendor prefixes.
When browsers will implement them without prefixes, then you can go straight
to the official CSS3 module specs and read how they actually work.

HTH :-)

Gabriele Romanato

-- 
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 [css-d@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] Help please put arrow inside nav instead of sticking outside of page (was Re: css-d Digest, Vol 102, Issue 7)

[John D]

The vertical Menu does show the arrows inside the NAV bar (in FF 4.0.1).  You 
do, however, need to remove the bullets by using:

list-style-type: none;

IE8 seems to show the page correctly including the bullets are not appearing on 
the page.  I haven't looked at the code yet because I am watching the biggest 
football match on the planet today!!

hth





> DC Cocioba wrote:
> > Can someone please help me put this arrow inside the left nav instead of
> > having it sticking outside of the page? Also in IE8 it doesn't show at all.
> > Thank you all for helping. Here is the link
> > http://www.decorativethings.com
> 

  
__
css-discuss [css-d@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] help centering items

[Kim Brooks Wei]

On 4/30/11 11:51 PM, Kim Brooks Wei wrote:

(Problem 1) I want both blocks to be centered on the page.


On a different page http://bit.ly/kp21jM on the site I accomplished 
part of what I want. The two blocks of copy are now side by side:

   (Block #1: Everyone is welcome and elly)
   (Block #2: Join and Twitter box)

Next, can I
* Get Block #2 to align to middle of Block #1?
* Get both blocks to sit in the center of my page?


FOLLOWING IS FIXED - THANK YOU!

2 At http://bit.ly/jwgrff (home page, same site)

get the picture to float centered in the middle of the page



David Huckleby and Alex Mitchell suggested this fix:


.leftcopytwothree {
  text-align: center;


It didn't work, but using the idea of controlling the centering with 
a text-align statement, I wrapped the photo in a centered  and 
that works fine. Thanks guys!

--

[ Kimi Wei
thewei.com
@kimiwei
(t) 862.203.8814
p o box 626
fair lawn, nj 07410 ]
__
css-discuss [css-d@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] help centering items

[Kim Brooks Wei]

Chetan, thanks for your interest, but you're getting hung up on the 
word "block". I explained that block is a term in layout design which 
means a group of words. If you're interested in the word's history 
and publishing applications please email me off list.


What I'm trying to accomplish is:

elephant and h5  to the left
join (which should appear as a short-width button) to the right
both elements centered to the page.

I will try the couple of solutions that were posted already and see 
how they work.


Best,
Kimi

At 12:47 AM +0530 5/2/11, Chetan Crasta wrote:

So when you say that you want it to appear as a single copy block, do
you mean you want to style the logo and the h5 together and give them
the appearance of a block? The solution to that would depend on what
style you wish to apply. You have to be more clear.

Regards,
Chetan Crasta



--

[ Kimi Wei
thewei.com
@kimiwei
(t) 862.203.8814
p o box 626
fair lawn, nj 07410 ]
__
css-discuss [css-d@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] help centering items

[Chetan Crasta]

So when you say that you want it to appear as a single copy block, do
you mean you want to style the logo and the h5 together and give them
the appearance of a block? The solution to that would depend on what
style you wish to apply. You have to be more clear.

Regards,
Chetan Crasta
__
css-discuss [css-d@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] help centering items

[Kim Brooks Wei]

Chetan, copy block is a typesetting, or publishing term, meaning a 
block of text. Text can be also referred to as "copy", as in 
copywriting). The block of text can be one, or several paragraphs, 
long.



At 10:37 PM +0530 5/1/11, Chetan Crasta wrote:

On Sun, May 1, 2011 at 12:21 PM, Kim Brooks Wei  wrote:


 I want Metro New Jersey Green Drinks 3 Gatherings - You're Invited! and the

 > elephant to appear as a single copy block - to the left of the Join box

 (another copy block).


I have never heard the term "copy block" before. Can you tell us 
what you mean?


Regards,
Chetan Crasta



--

[ Kimi Wei
thewei.com
@kimiwei
(t) 862.203.8814
p o box 626
fair lawn, nj 07410 ]
__
css-discuss [css-d@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] help centering items

[Chetan Crasta]

On Sun, May 1, 2011 at 12:21 PM, Kim Brooks Wei  wrote:

> I want Metro New Jersey Green Drinks 3 Gatherings - You're Invited! and the
> elephant to appear as a single copy block - to the left of the Join box
> (another copy block).

I have never heard the term "copy block" before. Can you tell us what you mean?

Regards,
Chetan Crasta
__
css-discuss [css-d@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] help centering items

[David Hucklesby]

On 4/30/11 11:51 PM, Kim Brooks Wei wrote:

Hi People,

1 At http://bit.ly/k6aFjU

I'm trying to get the following to happen, and can't work it out for
 some reason:

I want Metro New Jersey Green Drinks 3 Gatherings - You're Invited!
and the elephant to appear as a single copy block - to the left of
the Join box (another copy block).

I want both blocks to be centered on the page.


Make .ctr .small inline-block, and use vertical-align: middle or top or
??? to line it up with the elephant.

Old IE will likely need a separate rule, following that one, to declare
that it is inline. Explanation: inline-block only adds "layout" to IE 5
- 7, but "layout" works a bit like inline-block on elements that are inline.

.ctr .small {
  display: inline-block;
  vertical-align: middle;
}

.ctr .small {
  *display: inline;
}
/* "star hack" for IE < 8 alone. There are better ways... :) */



2 At http://bit.ly/jwgrff (home page, same site)

Is there a way to get the picture to float centered in the middle of
the page? When the window expands, I don't want the picture to end up
very far to the left of the sidebar - it looks very odd that way.



Sure:

.leftcopytwothree {
  text-align: center;
}

HTH
--
Cordially,
David
__
css-discuss [css-d@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] help centering items

[Alex Mitchell]

On Sat, Apr 30, 2011 at 11:51 PM, Kim Brooks Wei wrote:

> Hi People,
>
> 1
> At http://bit.ly/k6aFjU
>
> I'm trying to get the following to happen, and can't work it out for some
> reason:
>
> I want Metro New Jersey Green Drinks 3 Gatherings - You're Invited! and the
> elephant to appear as a single copy block - to the left of the Join box
> (another copy block).
>
> I want both blocks to be centered on the page.
>
> As for this, I'm not quite sure what you're trying to say. Try making an
image of it or explaining it differently?

>
> 2
> At http://bit.ly/jwgrff (home page, same site)
>
> Is there a way to get the picture to float centered in the middle of the
> page? When the window expands, I don't want the picture to end up very far
> to the left of the sidebar - it looks very odd that way.
>
>
This is easily achieved. If this is all you need in the leftcopytwothree div,
then simply add text-align:center; to the .leftcopytwothree {} rule on line
487 of greenwei.css. If there will be more text in that div, or if you use
this same div for another page, then wrap the image in another div with
text-align:center; in the styling.


> Best,
> Kimi
> --
>
> [ Kimi Wei
> thewei.com
> @kimiwei
> (t) 862.203.8814
> p o box 626
> fair lawn, nj 07410 ]
>
If you have any other issues just reply to this list of course.
Alex Mitchell
http://gumware.com/


> __
> css-discuss [css-d@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 [css-d@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] help for rendering pages correctly on differents browsers

[Jonny Stephens]

On 11 Jan 2011, at 10:46, olivia antonin wrote:
> I have a real problem with my web pages, basically They don't render the same 
> in Safari and firefox. The padding-bottom of the div information in the 
> "home" page doesn't render the same in firefox as in Safari, and the same 
> problem occur for the "about us" page too: the padding bottom of the div 
> bonus has a white space.  What do you think may be the issue. Please help 
> me...I'm pretty new in using CSS and need some help.
> 
> here are the link for the home page: 
> http://www.expressionofmind.com/home.html about us 
> page:http://www.expressionofmind.com/about.html and the link for the css 
> files: http://www.expressionofmind.com/css.html

[supplied links fixed]

I'm afraid the problem lies in your expectations. Consistent alignment of the 
bottom of elements whose content is variable, in this case text in two columns, 
by use of padding or margins is not attainable. Not only do different browsers 
render fonts at different heights and widths, but you have no control over the 
base size. Zooming Safari in Zoom Text Only mode will show that the columns do 
not survive resizing even in that browser.

A simple way to provide a background on the right column that continues to the 
footerwould be the "Faux Column" method. This involves creating a background 
image and applying it to vertically repeat on the element containing both main 
content and sidebar, in this case #wrappercolum .

The image would need to be 800px wide and, because repeating, only 10px or so 
high, coloured white for the first 510px and #0D2557 for the remaining 290px.

The css would be

#wrappercolum { background: #fff url(path/to/image.png) repeat-y; }

To maintain a 10px white space between the divs in the sidebar you could use a 
border on the upper div. e.g.

#team {
   background-color: #558D96;
   border-bottom: 10px solid #FF; /* added */
   line-height: 18px;
   padding-top: 10px;
}

Hope this helps.

Jonny
__
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] help for rendering pages correctly on differents browsers

[David Postill]

On Tue, 11 Jan 2011 11:46:55 +0100, olivia antonin wrote:

| 
| Hi there
| I have a real problem with my web pages, basically They don't render the same 
in Safari and firefox. The padding-bottom of the div information in the "home" 
page doesn't render the same in firefox as in Safari, and the same problem 
occur for the "about us" page too: the padding bottom of the div bonus has a 
white space.  What do you think may be the issue. Please help me...I'm pretty 
new in using CSS and need some help.
| 
| here are the link for the home page: 
http://www.expressionofmind.com/home.htmlabout us page: 
http://www.expressionofmind.com/about.htmland the link for the css files: 
http://www.expressionofmind.com/css.html

Your links are broken.

Your html is also broken
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.expressionofmind.com%2Fhome.html
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.expressionofmind.com%2Fabout.htm
-- 
David Postill
Dance your Life - Biodanza in Holland - 
__
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] help with 2nd tier items

[David Laakso]

On 1/10/11 4:51 PM, Greg Wilker wrote:


I have 2nd tier items on this site:
http://www.philsheridan.com/

The 1st tier items are: "audiobooks" and "readers' theater play readings".

I kind of finessed the styles for the 2nd tier - but would like to get it
right. (spacing is a mess in IE7.)

Can anyone lend a hand in getting the 2nd tier items correct? I'd also like
to have both 1st tier and 2nd tier items linked appropriately.

Thank you,
Greg



You might want to consider a nested rollover list and it may be 
advantageous to make the nav block twice as wide as what you currently use:



If the site is supposed to be funky you are on target. If not, ditch the 
little typography exercise and stick with something like this throughout 
[with some top/bottom padding on the header]:

html, body {
font: 100%/1.4 Helvetica, Arial, sans-serif;
}

Best,
~d



--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
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] help with padding/margin and floated objects

[Christian Kirchhoff]

Hi,

the div#ss-box has a fixed height of 278px. The div#ss-text lies within 
that other div. If the div#ss-box had overflow: hidden, you would 
recognize that the contents of the div#ss-text  were cropped. So 1st I 
would remove the definition of the height if the div#ss-box.


But: that will push down the top edge of the div#bottom, because it has 
a relative position with the top set to 40px. I don't know why this top 
offset is defined, amybe you should jzst get rid of it.


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: Stefan Krause · Ralf Szymanski

Am 29.12.2010 00:15, schrieb Debbie Campbell:

For the slideshow on this page:


http://www.redkitecreative.com/projects/acbl/


What I'd like to do is have a bottom-margin of 10px on the caption, 
#ss-text, so that the grey box below it moves down when needed rather 
than just sitting at 20px below the slideshow image as it does now. So 
far adding any bottom margin to #ss-text has no effect - can someone 
advise?



__
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] help with div fixed when resizing window [ec]

[Sh]

thanks!

On Mon, Dec 20, 2010 at 11:59 PM, David Laakso
 wrote:
> Whoops! Error Correction;
>
> The link to the referenced layout is:
> 
>
> 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/
>



-- 
Sh
__
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] help with div fixed when resizing window [ec]

[David Laakso]

Whoops! Error Correction;

The link to the referenced layout is:


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] help with div fixed when resizing window

[David Laakso]

On 12/20/10 2:12 PM, Sh wrote:

Hello,

I have this, and similar to this, pages:
http://ariearoch.com/site/solo.php?id=258

I can't seem to figure out how to make the image always stay on the
left, and the text on the right, when resizing the window.

Will appreciate your help



Hi,

I think you may want to start with a base layout [1] that employs a 
doctype  and is stable, robust, and known to work well cross-browser. 
Validate  the markup [2] and the CSS [3].
Put your images in the #content division, adjusting width of same to 
fit. Avoid all the complicated nesting of divisions you current use to 
place those images and the written text that accompanies them..


Best and good luck,
~d

[1]
Set a width of 980px and a margin: 0 auto; on #container. Delete the CSS 
and markup for #extra.

[2]

[3]


--
:: desktop and mobile ::
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] Help with IE6 and #&*? Box Model

[Beth Lee]

> http://ohalah.org/wp/index.php

Felix wrote:

> IE6 use is down to less than 5%, deprecated by M$ even.

Yes, I wasn't going to worry about IE6, until I had a specific reason to do so.

Philippe wrote:

>As far as I can see without checking in IE 6 ...
> the issue is not one of box model, but margin-doubling on floated blocks
> Your images have a left margin, IE 6 doubles that, and making a mess.
> The usual fix:

Worked beautifully. Thanks so much!

Georg wrote:

> While you're fixing IE6, note that you have serious typos in the IE6 
> stylesheet link in that page...

Thanks for pointing that out. I dispensed with the extra stylesheet
because the margin-doubling doesn't require one, but no wonder I was
getting nowhere with that stylesheet.

As I sent my post last night, I felt like the shoemaker setting out
shoe leather and lasts for the elves, knowing that when I woke up this
morning I would find my web page stitched together properly. Thank you
all!

Beth
__
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] Help with IE6 and #&*? Box Model

[G.Sørtun]

http://ohalah.org/wp/index.php


While you're fixing IE6, note that you have serious typos in the IE6 
stylesheet link in that page...


href="http://ohalah.org/wp/wp-content/themes/o-twentyten/iecss.css";>" 
rel="stylesheet" type="text/css">


...should rather be...

href="http://ohalah.org/wp/wp-content/themes/o-twentyten/iecss.css"; 
rel="stylesheet" type="text/css">



regards

Georg
__
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] Help with IE6 and #&*? Box Model

[Philippe Wittenbergh]

On Dec 17, 2010, at 2:38 PM, Beth Lee wrote:

>> 'm moving a site from tables into html5 and css, and onto WordPress. The
>> head of the organization is concerned that the front page drops the 2 rows
>> of 3 images out of alignment in her browser, which is ... AOL.

> The site is using the html5 doctype, which throws the page into quirks mode
> for IE6, yes? The page validates as html5.

The HTML5 doctype doesn't trigger quirksmode in IE 6, last I checked. (the 
space you have before the doctype may trigger quirksmode, though.

> 
> I meant to reference this URL regarding the IE6 box model:
> http://ohalah.org/wp/index.php

As far as I can see without checking in IE 6 (the VM being on another machine), 
the issue is not one of box model, but margin-doubling on floated blocks
Your images have a left margin, IE 6 doubles that, and making a mess.
The usual fix: 

#home-content img {
  display:block;
  float:left;
  margin:0 0 0.6em 0.6em;
display: inline /* <-- add */
}

Philippe
---
Philippe Wittenbergh
http://l-c-n.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/