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/

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

[Angela French]

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:



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-d] help with media queries for email

[gpalz]

Hi Ron,

Might want to check out the site below for some client specific tips and 
tricks. Used to pull my hair sometimes getting things to work across all 
clients ( ie desktop, mobile and web based)


http://www.emailology.org

Outlook doesn't support background images unless you use a Microsoft  
language called VML to get backgrounds to show in Outlook.


Good luck.

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

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

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 

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

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/

[css-d] help with media queries for email

[Ron Zisman]

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/

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 <afre...@sbctc.edu> 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/

[css-d] help getting my under by

[Angela French]

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:


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-d] help with responsive navigation

[Chris Kavinsky]

Looks like I'm having hosting issues. The css file is updated (I can see
the updates in the WP editor) but for some reason the site isn't refreshing
the file. Thanks.
__
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 <ggam...@sbctc.edu> 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/

[css-d] help with responsive navigation

[Chris Kavinsky]

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/

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/

[css-d] Help with false positive?

[Angela French]

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/

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 afre...@sbctc.edu wrote:

 I am trying to tweak some lineheight in a specific div class.  I want the
 space between p tags to be the default for the site.  But if the content
 in the p 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 p also.


 Thanks for any help.


 Angela French
 __
 css-discuss [css-d@lists.css-discuss.org javascript:;]
 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/

[css-d] help with lineheight

[Angela French]

I am trying to tweak some lineheight in a specific div class.  I want the space 
between p tags to be the default for the site.  But if the content in the p 
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 p 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/

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 e...@l-c-n.com
wrote:


  Le 21 mai 2015 à 04:06, Chris Kavinsky ckavin...@gmail.com 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/

[css-d] help with responsive menu dropdown

[Chris Kavinsky]

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/

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 ckavin...@gmail.com 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 responsive menu dropdown

[Philippe Wittenbergh]

 Le 21 mai 2015 à 04:06, Chris Kavinsky ckavin...@gmail.com 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 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 tom...@gmail.com wrote:



 Sent from my iPhone

 On Mar 13, 2014, at 4:53 PM, Brian Jones bdotjo...@gmail.com 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 (div class=row top-shadow/div)



 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 tom...@gmail.com wrote:

 On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones bdotjo...@gmail.com
 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/

[css-d] help with menu bar

[Brian Jones]

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

Thanks in advance for any help.

-- 
-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 bdotjo...@gmail.com 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 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 (div class=row top-shadow/div)



On Thu, Mar 13, 2014 at 3:23 PM, Tom Livingston tom...@gmail.com wrote:

 On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones bdotjo...@gmail.com 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]

Sent from my iPhone

 On Mar 13, 2014, at 4:53 PM, Brian Jones bdotjo...@gmail.com 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 (div class=row top-shadow/div)
 
 

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 tom...@gmail.com wrote:
 On Thu, Mar 13, 2014 at 10:47 AM, Brian Jones bdotjo...@gmail.com 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/

[css-d] Help w/CSS and Bootstrap

[Michael Beaudoin]

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
__
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 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 option'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

[Karl DeSaulniers]

On Mar 2, 2014, at 1:27 PM, Michael Beaudoin mich...@ba-doyn.com 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 with positioning list

[Larry Martell]

On Sun, Mar 17, 2013 at 2:40 PM, Jon Reece jon.re...@gmail.com wrote:

 On Sun, Mar 17, 2013 at 9:42 AM, Larry Martell larry.mart...@gmail.com
 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 larry.mart...@gmail.comwrote:

 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/

[css-d] help with positioning

[Chris Kavinsky]

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).
There's a graphic at the bottom of the content area (airplane shadow)
that's supposed to sit atop the footer area. But due to the relative
positioning, there's 115px of gap between where it sits and the footer
area. Any suggestions on removing that space without wrapping the footer in
another div with a background color and repositioning it -115px? I'm trying
to not use another div wrapper if I don't have to.

Here's the site in progress:

http://associationdatabase.com/aws/OAA/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/

Re: [css-d] Help with CSS3 transitions?

[Kyle Sessions]

On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.comwrote:

 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.htmlhttp://kage23.com/transition-test.html

 When you first load the page, you should see a ul with four visible
 items, and a More link. There's also another ul 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 ul, 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 ems 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 ul, and then used Javascript to adjust the height of the
containing div, rather than the actual ul 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-dhttp://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- 
 http://css-discuss.incutio.**com/http://css-discuss.incutio.com/
 List policies -- 
 http://css-discuss.org/**policies.htmlhttp://css-discuss.org/policies.html
 Supported by evolt.org -- 
 http://www.evolt.org/help_**support_evolt/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/23/12 11:25 AM, Kyle Sessions wrote:

On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.comwrote:


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.htmlhttp://kage23.com/transition-test.html

When you first load the page, you should see a ul with four visible
items, and a More link. There's also another ul 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 ul, 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 ems 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 ul, and then used Javascript to adjust the height of the
containing div, rather than the actual ul 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 Mon, Jul 23, 2012 at 1:02 PM, David Hucklesby huckle...@gmail.comwrote:

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

 On Fri, Jul 20, 2012 at 3:18 PM, David Hucklesby huckle...@gmail.com
 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.htmlhttp://kage23.com/transition-**test.html
 http://kage23.com/**transition-test.htmlhttp://kage23.com/transition-test.html
 


 When you first load the page, you should see a ul with four visible
 items, and a More link. There's also another ul 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 ul, 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 ems 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 ul, and then used Javascript to adjust the height of
 the
 containing div, rather than the actual ul itself. Throw an
 overflow:hidden onto the containing div, and it's good to go.

 http://kage23.com/transition-**test.htmlhttp://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/

[css-d] Help with CSS3 transitions?

[Kyle Sessions]

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 ul with four visible
items, and a More link. There's also another ul 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 ul, that gives it height: auto; instead of height:
0px;. I have applied the transition property (along with all the
vendor-prefixed transition properties) to my hidden ul, so when you click
the link, it should take a second for the hidden stuff to slide down and
become visible. However, for whatever reason, the transition is not being
applied, and the hidden stuff is instantly visible upon clicking More.
This lack of transition is happening in all the browsers I care about, and
I have no idea what I'm doing wrong. Any thoughts?

Thanks in advance!

Best,
Kyle

-- 
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 ul with four visible
items, and a More link. There's also another ul 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 ul, 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 ems 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/

[css-d] help with centering floated list

[Chris Kavinsky]

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

I thought of switching the items out of the list, but I'm also using the
same items in the footer as a normal list, so would prefer to keep it as a
list if possible. Thanks.
__
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:

  http://dabblet.com/gist/2820352

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

[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

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

[css-d] help on understanding a float behavior with a % margin

[mem]

Hello all,

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/


k. 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

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

[Tom Livingston]

On Wed, Jun 6, 2012 at 2:51 PM, mem talofo.l...@gmail.com 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 20:55 , Tom Livingston wrote:

 On Wed, Jun 6, 2012 at 2:51 PM, mem talofo.l...@gmail.com 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

[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 with adding a class and overriding the parent class style

[Micky Hulse]

Hello,

On Mon, May 28, 2012 at 10:03 PM, Larry Martell larry.mart...@gmail.com 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:

http://jsfiddle.net/X8RkK/

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

http://jsfiddle.net/PUjpg/2/

... more info here on the child selector:

http://coding.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/

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 with adding a class and overriding the parent class style

[Larry Martell]

On Tue, May 29, 2012 at 12:49 AM, Micky Hulse
mickyhulse.li...@gmail.com wrote:
 Hello,

 On Mon, May 28, 2012 at 10:03 PM, Larry Martell larry.mart...@gmail.com 
 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/

[css-d] Help with adding a class and overriding the parent class style

[Larry Martell]

I'm very new with CSS, so please bear with me.

I have a page that has the following hiercharchy:

div id=waferviz
   div id=waferviz1
  div class=waferviz
 div class=wafer_summary

With this CSS:

#waferviz .waferviz .wafer_summary b {
   color: navy;
}


I need to add another div below wafer_summary:

div class=metadata

I want that div's bold text to be black, not navy (but all the other
bold text in wafer_summary that's not in metadata should still be
navy.

I have tried every which way I can think of to specify this, e..g.:

#waferiz .waferviz .wafer_summary .metadata b {
   color: black;
}

but nothing works - my metadata bold text is navy. What is the way to do this?

(As an aside to my issue, I've never seen the # in a CSS, and I can't
find any info on that when I google it or in my CSS book. What is that
all about?)

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

[css-d] help?

[jon thornton]

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.



If I manage to figure out how to participate, and violate any of these
rules, it will be quite unintentional, soryy in advance!
__
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/

[css-d] help targeting a nested list

[Angela French]

Good Morning.  I need some help styling lis in nested lists.

This is my test page: 
http://168.156.9.142/college/_f-tuitionwaivers_childofdisableddeceasedpowNEW.aspx
 . Half way down the page, under Changes in 2008, my nested list is supposed to 
be numbered and the font should be the same as elsewhere.  It isn't working.  
My CSS needs to target the li as our CMS doesn't not support styling lists, 
but only list items.

This is my css for the numbered list items:
div#Content_box ol li.ListNumber
{
font-size: 1em;
margin: 5px 0px 5px 5px;
list-style-type:decimal;
}

It is working fine elsewhere, but on a nested list it is not working in IE. In 
FF, it renders as numbered, but the font is still tiny.

I also tried removing the list type from the style declaration as below, but 
that doesn't work either.  Is there some way to target the li that doesn't care 
what level of nesting it is in?

div#Content_box li.ListNumber
{
font-size: 1em;
margin: 5px 0px 5px 5px;
list-style-type:decimal;
}


Thank you!

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/

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

[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 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 
afre...@sbctc.edumailto: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:

p style=position:relative;bottom:0;left:100%;AF/p.

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-4316tel:360-704-4316
afre...@sbctc.edumailto:afre...@sbctc.edu
http://www.checkoutacollege.com/

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

[Angela French]

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:

p style=position:relative;bottom:0;left:100%;AF/p.

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/

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

 p style=position:relative;bottom:0;left:100%;AF/p.

 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]

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


On Fri, Oct 21, 2011 at 2:29 PM, Kevin A. Cameron
kevinacame...@gmail.comwrote:

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

 p style=position:relative;bottom:0;left:100%;AF/p.

 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

[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...

div id=Content_box style=position: relative;border:1px dashed red;

p style=position: absolute; bottom: 0; left: 95%; color: red;AF/p

~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

[Angela French]

I did try putting the p inside a  div  that I positioned relative with the 
p 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 
afre...@sbctc.edumailto: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:

p style=position:relative;bottom:0;left:100%;AF/p.

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-4316tel:360-704-4316
afre...@sbctc.edumailto:afre...@sbctc.edu
http://www.checkoutacollege.com/

__
css-discuss [css-d@lists.css-discuss.orgmailto: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.orghttp://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:

div class=mybottom
p AF /p.
/div


Then your CSS is like this:

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

hth


--
From: Angela French afre...@sbctc.edu
Sent: Friday, October 21, 2011 10:15 PM
To: css-d@lists.css-discuss.org
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:


p style=position:relative;bottom:0;left:100%;AF/p.

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

[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:

div class=mybottom
   p AF /p.
/div


Then your CSS is like this:

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

hth


--
From: Angela French afre...@sbctc.edu
Sent: Friday, October 21, 2011 10:15 PM
To: css-d@lists.css-discuss.org
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:

 p style=position:relative;bottom:0;left:100%;AF/p.

 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/

[css-d] help with the last item in a menu sprite

[Debbie Campbell]

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/

Re: [css-d] help with the last item in a menu sprite

[Tom Livingston]

The UL has a width of 960 and the lis 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 d...@redkitecreative.com 
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 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 thelis 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 Campbelld...@redkitecreative.com  
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/

[css-d] help with button background alignment

[Chris Kavinsky]

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/

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 ckavin...@gmail.com 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 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/

[css-d] Help with 3rd column in IE8

[Coleen Holley]

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

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

div#sidecol
{
background-position: center top;
padding: 10px 20px 10px 5px;
width: 15%;
float: right;
margin-left: 5px;
background-image: url('../Images/BrokenHeart4.png');
background-repeat: repeat-y;
height: 100%;
}

Any help would be greatly appreciated.

Thanks,

Coleen
__
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 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:

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/

[css-d] Help with div sizing?

[Barry Brevik]

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

TIA,

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 bbre...@stellarmicro.com 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 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?

[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?

[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]

 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?

[David Hucklesby]

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

On Sat, Aug 20, 2011 at 12:27 AM, Barry Brevikbbre...@stellarmicro.com  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/

[css-d] help with a table wrapping around a float

[Chris Kavinsky]

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. 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?
__
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/