Re: [css-d] Background images for element within MQ ?

[Tom Livingston]

No. This...

body {
 background-image: url('my300pximage.jpg');
}

@media and (min-width: 700px) {
 body {
  background-image: url('my700pximage.jpg');
 }
}

...is not Sass, but it does what you described.


-- 

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] Background images for element within MQ ?

[Crest Christopher]

Yes, knowing that SaSS is the solution ;-)

Tom Livingston wrote:
>
> On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
> wrote:
>
>>
>> If I understand you correctly, no.
>>
>> You can do:
>> body {
>>   background-image: url('my300pximage.jpg');
>> }
>> @media and (min-width: 700px) {
>>   body {
>> background-image: url('my700pximage.jpg');
>>   }
>> }
>>
>
>
>
> This accomplishes what you were describing.
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background images for element within MQ ?

[Tom Livingston]

On Fri, Aug 5, 2016 at 3:05 PM, Chris Rockwell 
wrote:

> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>


This accomplishes what you were describing.


-- 

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] Background images for element within MQ ?

[Chris Rockwell]

Note that it still compiles to the first example.

On Fri, Aug 5, 2016 at 3:18 PM Crest Christopher 
wrote:

> I knew probably SaSS could do it although I don't use SaSS atleast I was
> right ;-)
>
> Chris Rockwell wrote:
>
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
>
> mailto:crestchristop...@gmail.com>> wrote:
>
> Is it possible to do conditions within a rule for an element;
>
>   &nbs p; similar to
>
>
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org
>
> ]
>
>
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background images for element within MQ ?

[Crest Christopher]

I knew probably SaSS could do it although I don't use SaSS atleast I was
right ;-)

Chris Rockwell wrote:
>
> If I understand you correctly, no.
>
> You can do:
> body {
>   background-image: url('my300pximage.jpg');
> }
> @media and (min-width: 700px) {
>   body {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> With sass you can do this:
> body {
>   background-image: url('my300pximage.jpg');
>   @media and (min-width: 700px) {
> background-image: url('my700pximage.jpg');
>   }
> }
>
> On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher
> mailto:crestchristop...@gmail.com>> wrote:
>
> Is it possible to do conditions within a rule for an element;
> similar to
> MQ.  For example, you may have a break point that if the screen is
> 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org
> ]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background images for element within MQ ?

[Chris Rockwell]

If I understand you correctly, no.

You can do:
body {
  background-image: url('my300pximage.jpg');
}
@media and (min-width: 700px) {
  body {
background-image: url('my700pximage.jpg');
  }
}

With sass you can do this:
body {
  background-image: url('my300pximage.jpg');
  @media and (min-width: 700px) {
background-image: url('my700pximage.jpg');
  }
}

On Fri, Aug 5, 2016 at 3:02 PM Crest Christopher 
wrote:

> Is it possible to do conditions within a rule for an element; similar to
> MQ.  For example, you may have a break point that if the screen is 300px
> and 700px then a background image of 300px width or close will be
> displayed, otherwise a background image of a 700px width will be
> displayed ?
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background images for element within MQ ?

[Crest Christopher]

Is it possible to do conditions within a rule for an element; similar to
MQ.  For example, you may have a break point that if the screen is 300px
and 700px then a background image of 300px width or close will be
displayed, otherwise a background image of a 700px width will be
displayed ?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Tom Livingston]

On Sun, Jan 11, 2015 at 12:24 PM, Philip Taylor  wrote:
>
>
> Tom Livingston wrote:
>
>> In a URL string like that, I personally would not look down on the dev for
>> that.
>
>
> We could debate this forever, Tom, and I suspect would never reach
> agreement.  My position (with which you may well disagree) is that I look on
> it as being similar to a developer who elects to use (say) the Qt library in
> his/her work and then, when challenged that something does not work as it
> should, responds "It's a bug in Qt".  If a developer elects to use something
> from without his/her control, then it is his/her responsibility to ensure
> that it /does/ work as intended (i.e., in this case, validates).
>
> "A bad workman blames his tools; a good workman chooses the correct tools
> and therefore never needs to try to ascribe blame".
>
> Philip Taylor

I'll agree to disagree with you. While I agree your code should
validate, there are *some* things that can be overlooked. It's been
said many time on this list. It's like vendor prefixes or zoom:1; in
the CSS validator. It's an error, but if you know why it's an error
and know it's there on purpose, you can let it go.

I'm not saying you are wrong, Philip. I'm just a little more lenient.

-- 

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] Background-Image overrides background color

[Philip Taylor]

Tom Livingston wrote:


In a URL string like that, I personally would not look down on the dev for that.


We could debate this forever, Tom, and I suspect would never reach 
agreement.  My position (with which you may well disagree) is that I 
look on it as being similar to a developer who elects to use (say) the 
Qt library in his/her work and then, when challenged that something does 
not work as it should, responds "It's a bug in Qt".  If a developer 
elects to use something from without his/her control, then it is his/her 
responsibility to ensure that it /does/ work as intended (i.e., in this 
case, validates).


"A bad workman blames his tools; a good workman chooses the correct 
tools and therefore never needs to try to ascribe blame".


Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Tom Livingston]

>
> Schoolboy errors, which indicate (to my mind) the level of care (or lack
> thereof) that went into the preparation of the material :
>
> Error Line 453, Column 88: & did not start a character reference. (&
> probably should have been escaped as &.)
>
> …ancybar.net/ac/fancybar.js?zoneid=1502&serve=C6ADVKE&placement=html5doctor"
> id…
>
> ✉
> Error Line 453, Column 102: & did not start a character reference. (&
> probably should have been escaped as &.)
>
> Philip Taylor

In a URL string like that, I personally would not look down on the dev for that.

-- 

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] Background-Image overrides background color

[Philip Taylor]

Tom Livingston wrote:


It appears that the errors are for things that are not yet part of the
spec the validator is based on. I would not call that bad code.


Schoolboy errors, which indicate (to my mind) the level of care (or lack 
thereof) that went into the preparation of the material :


Error Line 453, Column 88: & did not start a character reference. (& 
probably should have been escaped as &.)


…ancybar.net/ac/fancybar.js?zoneid=1502&serve=C6ADVKE&placement=html5doctor" 
id…


✉
Error Line 453, Column 102: & did not start a character reference. (& 
probably should have been escaped as &.)


Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Wade Smart]

w3school is at the top for so many searches.
It would be great if they would just clean up their site.
--
Registered Linux User: #480675
Registered Linux Machine: #408606
Linux since June 2005


On Sun, Jan 11, 2015 at 10:30 AM, Barney Carroll
 wrote:
> I'm amazed it took this long for a link to the W3 validator to creep into
> the conversation. Maybe if we keep at it the list archives will trump
> w3schools in search results?
>
> Regards,
> Barney Carroll
>
> barney.carr...@gmail.com
> +44 7429 177278
>
> barneycarroll.com
>
> On 11 January 2015 at 16:22, Tom Livingston  wrote:
>
>> It appears that the errors are for things that are not yet part of the spec
>> the validator is based on. I would not call that bad code.
>>
>>
>> On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor 
>> wrote:
>>
>> >
>> >
>> > Tom Livingston wrote:
>> > > For someone at the OPs level, I'd not recommend a site with such a bad
>> > > reputation. He won't know if what he is reading is correct. While that
>> > site
>> > > may be improved as of late, why start learning at such a poorly
>> regarded
>> > > source. There are much more reputable places to learn the basics.
>> > >
>> > > Csstricks.com
>> > >
>> > > Moz sites
>> > >
>> > > Html5doctor
>> >
>> > I would personally treat with the greatest suspicion any site claiming
>> > to offer guidance on W3C standards that does not itself validate :
>> >
>> > http://validator.w3.org/check?uri=http://html5doctor.com/
>> >
>> > Philip Taylor
>> >
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- 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] Background-Image overrides background color

[Barney Carroll]

I'm amazed it took this long for a link to the W3 validator to creep into
the conversation. Maybe if we keep at it the list archives will trump
w3schools in search results?

Regards,
Barney Carroll

barney.carr...@gmail.com
+44 7429 177278

barneycarroll.com

On 11 January 2015 at 16:22, Tom Livingston  wrote:

> It appears that the errors are for things that are not yet part of the spec
> the validator is based on. I would not call that bad code.
>
>
> On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor 
> wrote:
>
> >
> >
> > Tom Livingston wrote:
> > > For someone at the OPs level, I'd not recommend a site with such a bad
> > > reputation. He won't know if what he is reading is correct. While that
> > site
> > > may be improved as of late, why start learning at such a poorly
> regarded
> > > source. There are much more reputable places to learn the basics.
> > >
> > > Csstricks.com
> > >
> > > Moz sites
> > >
> > > Html5doctor
> >
> > I would personally treat with the greatest suspicion any site claiming
> > to offer guidance on W3C standards that does not itself validate :
> >
> > http://validator.w3.org/check?uri=http://html5doctor.com/
> >
> > Philip Taylor
> >
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background-Image overrides background color

[Tom Livingston]

It appears that the errors are for things that are not yet part of the spec
the validator is based on. I would not call that bad code.


On Sun, Jan 11, 2015 at 11:17 AM Philip Taylor  wrote:

>
>
> Tom Livingston wrote:
> > For someone at the OPs level, I'd not recommend a site with such a bad
> > reputation. He won't know if what he is reading is correct. While that
> site
> > may be improved as of late, why start learning at such a poorly regarded
> > source. There are much more reputable places to learn the basics.
> >
> > Csstricks.com
> >
> > Moz sites
> >
> > Html5doctor
>
> I would personally treat with the greatest suspicion any site claiming
> to offer guidance on W3C standards that does not itself validate :
>
> http://validator.w3.org/check?uri=http://html5doctor.com/
>
> Philip Taylor
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Philip Taylor]

Tom Livingston wrote:

For someone at the OPs level, I'd not recommend a site with such a bad
reputation. He won't know if what he is reading is correct. While that site
may be improved as of late, why start learning at such a poorly regarded
source. There are much more reputable places to learn the basics.

Csstricks.com

Moz sites

Html5doctor


I would personally treat with the greatest suspicion any site claiming 
to offer guidance on W3C standards that does not itself validate :


http://validator.w3.org/check?uri=http://html5doctor.com/

Philip Taylor
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Tom Livingston]

For someone at the OPs level, I'd not recommend a site with such a bad
reputation. He won't know if what he is reading is correct. While that site
may be improved as of late, why start learning at such a poorly regarded
source. There are much more reputable places to learn the basics.

Csstricks.com

Moz sites

Html5doctor
On Sun, Jan 11, 2015 at 3:43 AM Karl DeSaulniers 
wrote:

>
>
>
>
> On Jan 11, 2015, at 2:02 AM, "Jukka K. Korpela" 
> wrote:
>
> > 2015-01-11, 9:48, Karl DeSaulniers wrote:
> >
> >> I would suggest a little trip to WC3.
> >
> > I wonder what that means.
>
> it means study time
>
> >
> >> See here:
> >> http://www.w3schools.com/css/css_background.asp
> >
> > The w3schools site, unreliable and with rather low information/noise
> ratio, intentionally wants to be confused with the Word Wide Web
> Consortium, W3C. Please do not contribute to this confusion.
>
> Matter of opinion Yucca, but I hear ya. For the level christopher is at it
> will do just fine getting him in line with how things on a basic level work.
> Did not mean to add to the confusion of W3Schools being WC3 itself.
>
> @Christopher, don't confuse W3Schools with WC3... Ok? They are not the
> same. One is lucifer and the other is God.
>
> There I uncontributed.
>
> >
> > The W3C material on CSS is as authoritative as you can get in the area
> of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla
> Development Network material
> > https://developer.mozilla.org/en-US/docs/Web/CSS
>
> and there you have it! a real contribution.
>
> > is much more suitable as learning material. And it links to W3C
> material, so that you can check it too, after learning the basics and
> getting an idea of how various CSS features are used.
> >
> >> I would suggest you google every css attribute you can so you
> familiarize yourself with it before using.
> >
> > There are no attributes in CSS. Googling every CSS property (which is
> what you are probably referring to) would be rather pointless. There are
> about 1,000 different properties in CSS specifications, drafts, and
> browser-specific documentation.
>
> Yes. sorry not attributes, properties and NO don't go read them all that
> would be silly. That should read ... every css proplerty you need to so
> you...
>
> There. better? I'm trying here Yucca I really am man. Thank God for your
> technicalities! We all would be lost without them. :)
>
> >
> > Yucca
>
>
> 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/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Karl DeSaulniers]

On Jan 11, 2015, at 2:02 AM, "Jukka K. Korpela"  wrote:

> 2015-01-11, 9:48, Karl DeSaulniers wrote:
> 
>> I would suggest a little trip to WC3.
> 
> I wonder what that means.

it means study time

> 
>> See here:
>> http://www.w3schools.com/css/css_background.asp
> 
> The w3schools site, unreliable and with rather low information/noise ratio, 
> intentionally wants to be confused with the Word Wide Web Consortium, W3C. 
> Please do not contribute to this confusion.

Matter of opinion Yucca, but I hear ya. For the level christopher is at it will 
do just fine getting him in line with how things on a basic level work. 
Did not mean to add to the confusion of W3Schools being WC3 itself. 

@Christopher, don't confuse W3Schools with WC3... Ok? They are not the same. 
One is lucifer and the other is God.

There I uncontributed.

> 
> The W3C material on CSS is as authoritative as you can get in the area of 
> CSS, but it’s mostly not suitable for use as tutorials. The Mozilla 
> Development Network material
> https://developer.mozilla.org/en-US/docs/Web/CSS

and there you have it! a real contribution. 

> is much more suitable as learning material. And it links to W3C material, so 
> that you can check it too, after learning the basics and getting an idea of 
> how various CSS features are used.
> 
>> I would suggest you google every css attribute you can so you familiarize 
>> yourself with it before using.
> 
> There are no attributes in CSS. Googling every CSS property (which is what 
> you are probably referring to) would be rather pointless. There are about 
> 1,000 different properties in CSS specifications, drafts, and 
> browser-specific documentation.

Yes. sorry not attributes, properties and NO don't go read them all that would 
be silly. That should read ... every css proplerty you need to so you...

There. better? I'm trying here Yucca I really am man. Thank God for your 
technicalities! We all would be lost without them. :)

> 
> Yucca


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] Background-Image overrides background color

[Jukka K. Korpela]

2015-01-11, 9:48, Karl DeSaulniers wrote:


I would suggest a little trip to WC3.


I wonder what that means.


See here:
http://www.w3schools.com/css/css_background.asp


The w3schools site, unreliable and with rather low information/noise 
ratio, intentionally wants to be confused with the Word Wide Web 
Consortium, W3C. Please do not contribute to this confusion.


The W3C material on CSS is as authoritative as you can get in the area 
of CSS, but it’s mostly not suitable for use as tutorials. The Mozilla 
Development Network material

https://developer.mozilla.org/en-US/docs/Web/CSS
is much more suitable as learning material. And it links to W3C 
material, so that you can check it too, after learning the basics and 
getting an idea of how various CSS features are used.



I would suggest you google every css attribute you can so you familiarize 
yourself with it before using.


There are no attributes in CSS. Googling every CSS property (which is 
what you are probably referring to) would be rather pointless. There are 
about 1,000 different properties in CSS specifications, drafts, and 
browser-specific documentation.


Yucca


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Jukka K. Korpela]

2015-01-11, 6:59, Crest Christopher wrote:


The background image should sit on-top of the background color,


Yes, if both are specified.


instead the background color is overriding my background image ?

  background-color:#343630;/*#b7b7b7;*/
 background:url("/wdp/wip/overlay_bg.png");
 background-position:top;
 background-blend-mode: overlay;
 margin:0;
 padding:0;
 font:100%/1.3 arial, helvetica, sans-serif;


Can you please provide a complete example? This code can hardly produce 
the effect described. The background shorthand sets background-color to 
transparent, so there is either the background image alone or, if it 
does not exist, no background, i.e. the enclosing element’s background 
will shine thru.


If you replace background by background-image, the situation changes. 
Then, if the image exists, it will be blended with the background color, 
as specified by background-blend-mode: overlay (on supporting browsers).


Yucca


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[Karl DeSaulniers]

I would suggest a little trip to WC3.
You have posted this a lot. it should be 

background-image: 

if your just setting the url attribute to your background image. 

background:

if your setting the url, position, size, origin, color, etc as the shorthand 
notation.

See here:
http://www.w3schools.com/css/css_background.asp

I would suggest you google every css attribute you can so you familiarize 
yourself with it before using.
That's what I did.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jan 10, 2015, at 10:59 PM, Crest Christopher  
wrote:

> background:url("/wdp/wip/overlay_bg.png");

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background-Image overrides background color

[John Andrews]

Try making the background color the last item in the list.

On Sat, Jan 10, 2015 at 11:59 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

>The background image should sit on-top of the background color, instead
> the background color is overriding my background image ?
>
>  background-color:#343630;/*#b7b7b7;*/
> background:url("/wdp/wip/overlay_bg.png");
> background-position:top;
> background-blend-mode: overlay;
> margin:0;
> padding:0;
> font:100%/1.3 arial, helvetica, sans-serif;
>
> Christopher
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background-Image overrides background color

[Crest Christopher]

   The background image should sit on-top of the background color, 
instead the background color is overriding my background image ?


 background-color:#343630;/*#b7b7b7;*/
background:url("/wdp/wip/overlay_bg.png");
background-position:top;
background-blend-mode: overlay;
margin:0;
padding:0;
font:100%/1.3 arial, helvetica, sans-serif;

Christopher
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Tim Dawson]

On 09/02/2014 20:53, David Hucklesby wrote:

On 2/9/14, 12:11 PM, Chris Rockwell wrote:

Interesting Chris. I'v always styled the  with margins,

positioning, sometimes padding...etc and it always has an effect. But have
you applied colors, images to that? This pen shows what I'm referring to (and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.

Notice the border and padding honor the width, but not the color. I wonder
why...
__


I believe that's because backgrounds on  propagate to the viewport -
that's the root () element. Unless, that is, you have a background
specified for .

Try adding this to your pen's CSS:

html { background-color: white; }


YES !  It worked for me too. So that's the problem solved, thank you. Just leaves me wondering 
why I've never come across that before.


Tim

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Chris Rockwell]

>
>
> Backgrounds on root elements are special :)
>
> http://www.w3.org/TR/css3-background/#special-backgrounds


Perfect - thanks for the link Jon!

-- 
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Jon Reece]

On Sun, Feb 9, 2014 at 3:53 PM, David Hucklesby  wrote:

> I believe that's because backgrounds on  propagate to the viewport -
> that's the root () element. Unless, that is, you have a background
> specified for .
>

Backgrounds on root elements are special :)

http://www.w3.org/TR/css3-background/#special-backgrounds

-- 
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] Background image on body appears to be in viewport or HTML

[Chris Rockwell]

That did it, so is this reverse cascading :)?


On Sun, Feb 9, 2014 at 3:53 PM, David Hucklesby  wrote:

> On 2/9/14, 12:11 PM, Chris Rockwell wrote:
>
>> Interesting Chris. I'v always styled the  with margins,

>>> positioning, sometimes padding...etc and it always has an effect. But
>> have
>> you applied colors, images to that? This pen shows what I'm referring to
>> (and
>> I've never experienced because of my mark-up conventions):
>> http://codepen.io/anon/pen/fkyEF.
>>
>> Notice the border and padding honor the width, but not the color. I wonder
>> why...
>> __
>>
>
> I believe that's because backgrounds on  propagate to the viewport -
> that's the root () element. Unless, that is, you have a background
> specified for .
>
> Try adding this to your pen's CSS:
>
> html { background-color: white; }
> --
> 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/
>



-- 
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[David Hucklesby]

On 2/9/14, 12:11 PM, Chris Rockwell wrote:

Interesting Chris. I'v always styled the  with margins,

positioning, sometimes padding...etc and it always has an effect. But have
you applied colors, images to that? This pen shows what I'm referring to (and
I've never experienced because of my mark-up conventions):
http://codepen.io/anon/pen/fkyEF.

Notice the border and padding honor the width, but not the color. I wonder
why...
__


I believe that's because backgrounds on  propagate to the viewport -
that's the root () element. Unless, that is, you have a background
specified for .

Try adding this to your pen's CSS:

html { background-color: white; }
--
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] Background image on body appears to be in viewport or HTML

[Tim Dawson]

Thanks Chris, and others.

I'd agree about the 'wrapper'. It just happens I was rather throwing a page together for my menu 
tests, and slipped the background image onto the body. I've moved it now (in my local version 
only) to my 'wrapper', which is div#outer, and that works too, and looks much as I had expected 
it to on the body.


I see Eric Meyer puts a background image on the body in his Definitive Guide, so I feel I'm in 
good company. Just doesn't work for me yet.


Rachel: Yes, positioning works, but it only positions wrt the viewport (or HTML) where it is 
appearing. My thought is that it shouldn't be there in the first place.


Tim


On 09/02/2014 19:54, Chris Rockwell wrote:

oThis has never come up for me, so I can't explain (yet) why this happens, but 
it appears, at
least in Chrome, that some style attributes don't honor widths, margins, [and 
other things I
don't know of] of the body element.

The reason this has never come up for me, is that I would always use a wrapper 
of sorts so that
styling of the body element was not necessary:



   



On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson mailto:t...@ramasaig.com>> wrote:

I've been playing around with a few menu design ideas, and mocked up a site 
to try them out.
The menus are OK as far as they go, but I'm having trouble with a 
background image.

I have been trying to set up a background image in the  (or in ),
but when I do so it appears outside the body, as if it were attached to the 
viewport or
perhaps the HTML. If I move the background image to appear in the  
there's no
problem. I've tried several variants without success.

CSS is like this:
body {
 background-color: #FFF;
 background-image: url(../img/clouds_3677.jpg);
 background-repeat: no-repeat;
 margin: 0 auto;
 width: 100%;
 max-width: 900px;
 padding: 0;
}

body.plain {
 max-width: 900px;
 border: 0;
 border: 1px dashed red; /*(temporary)*/
 border-radius: 5px;
}

 div#outer {
/*  background-color: #DFEFFF; */
 width: 100%;
 margin: 0 auto;
 padding: 0.25em 0.25em;
 padding: 0;
 }

/* HEADER */
 header#banner {
/* when the background image is set here, all is well */
/*  background-color: #FFF;
 background-image: url(../img/clouds_3677.jpg);
 background-repeat: no-repeat;*/
 margin-bottom: 1em;
 width: 100%;
 float: left;
 }

I can live with the background being in the  if necessary, but I 
would like to know
why it doesn't work correctly in the . I suspect it may be very 
simple, but I can no
longer see the wood for the trees. Any suggestions, please ?

It can be seen at http://www.webadit.co.uk/__newhmi 


Tim Dawson

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [css-d@lists.css-discuss.org 
]
http://www.css-discuss.org/__mailman/listinfo/css-d

List wiki/FAQ -- http://css-discuss.incutio.__com/ 

List policies -- http://css-discuss.org/__policies.html 

Supported by evolt.org  -- 
http://www.evolt.org/help___support_evolt/





--
Chris Rockwell


--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Chris Rockwell]

>> Interesting Chris. I'v always styled the  with margins,
positioning, sometimes padding...etc and it always has an effect.
But have you applied colors, images to that? This pen shows what I'm
referring to (and I've never experienced because of my mark-up
conventions): http://codepen.io/anon/pen/fkyEF.

Notice the border and padding honor the width, but not the color. I wonder
why...
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Eric]

Interesting Chris. I'v always styled the  with margins, positioning,
sometimes padding...etc and it always has an effect.

Rachel, Tim will need to give his element a position of absolute, relative (and
maybe fixed but I'm sure about that one) for z-index to kick in.
Eric


> On February 9, 2014 at 2:54 PM Chris Rockwell  wrote:
>
>
> oThis has never come up for me, so I can't explain (yet) why this happens,
> but it appears, at least in Chrome, that some style attributes don't honor
> widths, margins, [and other things I don't know of] of the body element.
>
> The reason this has never come up for me, is that I would always use a
> wrapper of sorts so that styling of the body element was not necessary:
>
> 
>  
> 
> 
>
>
> On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson  wrote:
>
> > I've been playing around with a few menu design ideas, and mocked up a
> > site to try them out. The menus are OK as far as they go, but I'm having
> > trouble with a background image.
> >
> > I have been trying to set up a background image in the  (or in  > class='plain'>), but when I do so it appears outside the body, as if it
> > were attached to the viewport or perhaps the HTML. If I move the background
> > image to appear in the  there's no problem. I've tried several
> > variants without success.
> >
> > CSS is like this:
> > body {
> > background-color: #FFF;
> > background-image: url(../img/clouds_3677.jpg);
> > background-repeat: no-repeat;
> > margin: 0 auto;
> > width: 100%;
> > max-width: 900px;
> > padding: 0;
> > }
> >
> > body.plain {
> > max-width: 900px;
> > border: 0;
> > border: 1px dashed red; /*(temporary)*/
> > border-radius: 5px;
> > }
> >
> > div#outer {
> > /* background-color: #DFEFFF; */
> > width: 100%;
> > margin: 0 auto;
> > padding: 0.25em 0.25em;
> > padding: 0;
> > }
> >
> > /* HEADER */
> > header#banner {
> > /* when the background image is set here, all is well */
> > /* background-color: #FFF;
> > background-image: url(../img/clouds_3677.jpg);
> > background-repeat: no-repeat;*/
> > margin-bottom: 1em;
> > width: 100%;
> > float: left;
> > }
> >
> > I can live with the background being in the  if necessary, but I
> > would like to know why it doesn't work correctly in the . I suspect
> > it may be very simple, but I can no longer see the wood for the trees. Any
> > suggestions, please ?
> >
> > It can be seen at http://www.webadit.co.uk/newhmi
> >
> > Tim Dawson
> >
> > --
> > Tim Dawson
> > Maolbhuidhe
> > Fionnphort
> > Isle of Mull PA66 6BP
> >
> > 01681 700718
> > __
> > css-discuss [css-d@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
>
>
>
> --
> Chris Rockwell
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Chris Rockwell]

oThis has never come up for me, so I can't explain (yet) why this happens,
but it appears, at least in Chrome, that some style attributes don't honor
widths, margins, [and other things I don't know of] of the body element.

The reason this has never come up for me, is that I would always use a
wrapper of sorts so that styling of the body element was not necessary:


   
  



On Sun, Feb 9, 2014 at 2:02 PM, Tim Dawson  wrote:

> I've been playing around with a few menu design ideas, and mocked up a
> site to try them out. The menus are OK as far as they go, but I'm having
> trouble with a background image.
>
> I have been trying to set up a background image in the  (or in  class='plain'>), but when I do so it appears outside the body, as if it
> were attached to the viewport or perhaps the HTML. If I move the background
> image to appear in the  there's no problem. I've tried several
> variants without success.
>
> CSS is like this:
> body {
> background-color: #FFF;
> background-image: url(../img/clouds_3677.jpg);
> background-repeat: no-repeat;
> margin: 0 auto;
> width: 100%;
> max-width: 900px;
> padding: 0;
> }
>
> body.plain {
> max-width: 900px;
> border: 0;
> border: 1px dashed red; /*(temporary)*/
> border-radius: 5px;
> }
>
> div#outer {
> /*  background-color: #DFEFFF; */
> width: 100%;
> margin: 0 auto;
> padding: 0.25em 0.25em;
> padding: 0;
> }
>
> /* HEADER */
> header#banner {
> /* when the background image is set here, all is well */
> /*  background-color: #FFF;
> background-image: url(../img/clouds_3677.jpg);
> background-repeat: no-repeat;*/
> margin-bottom: 1em;
> width: 100%;
> float: left;
> }
>
> I can live with the background being in the  if necessary, but I
> would like to know why it doesn't work correctly in the . I suspect
> it may be very simple, but I can no longer see the wood for the trees. Any
> suggestions, please ?
>
> It can be seen at http://www.webadit.co.uk/newhmi
>
> Tim Dawson
>
> --
> Tim Dawson
> Maolbhuidhe
> Fionnphort
> Isle of Mull  PA66 6BP
>
> 01681 700718
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



-- 
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Rachel Mawhood]

Hi - I think you have to give it a position and include a z-index 
instruction to tell it to put the image at the "back", eg


background-attachment: fixed;
background-position: 50% 60px;
margin: 30px 0px 0px 0px;
z-index: 1;
}

That, above, is taken from a very old style sheet; I wouldn't use pixels 
doing this now.


Rachel

On 09/02/2014 19:02, Tim Dawson wrote:
I've been playing around with a few menu design ideas, and mocked up a 
site to try them out. The menus are OK as far as they go, but I'm 
having trouble with a background image.


I have been trying to set up a background image in the  (or in 
), but when I do so it appears outside the body, 
as if it were attached to the viewport or perhaps the HTML. If I move 
the background image to appear in the  there's no problem. 
I've tried several variants without success.


CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}

body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}

div#outer {
/*background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}

/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/*background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}

I can live with the background being in the  if necessary, but 
I would like to know why it doesn't work correctly in the . I 
suspect it may be very simple, but I can no longer see the wood for 
the trees. Any suggestions, please ?


It can be seen at http://www.webadit.co.uk/newhmi

Tim Dawson



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image on body appears to be in viewport or HTML

[Tim Dawson]

I've been playing around with a few menu design ideas, and mocked up a site to try them out. The 
menus are OK as far as they go, but I'm having trouble with a background image.


I have been trying to set up a background image in the  (or in ), but 
when I do so it appears outside the body, as if it were attached to the viewport or perhaps the 
HTML. If I move the background image to appear in the  there's no problem. I've tried 
several variants without success.


CSS is like this:
body {
background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;
margin: 0 auto;
width: 100%;
max-width: 900px;
padding: 0;
}

body.plain {
max-width: 900px;
border: 0;
border: 1px dashed red; /*(temporary)*/
border-radius: 5px;
}

div#outer {
/*  background-color: #DFEFFF; */
width: 100%;
margin: 0 auto;
padding: 0.25em 0.25em;
padding: 0;
}

/* HEADER */
header#banner {
/* when the background image is set here, all is well */
/*  background-color: #FFF;
background-image: url(../img/clouds_3677.jpg);
background-repeat: no-repeat;*/
margin-bottom: 1em;
width: 100%;
float: left;
}

I can live with the background being in the  if necessary, but I would like to know why 
it doesn't work correctly in the . I suspect it may be very simple, but I can no longer 
see the wood for the trees. Any suggestions, please ?


It can be seen at http://www.webadit.co.uk/newhmi

Tim Dawson

--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background doesn't show up on iOS

[Karl DeSaulniers]

Good Deal. Glad I could help.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jan 15, 2014, at 7:54 PM, +josh+  wrote:

> Thanks, that did it! 
> Josh 
> 
> 
> 
>> On Jan 15, 2014, at 5:22 PM, Karl DeSaulniers  wrote:
>> 
>> 
>>> On Jan 11, 2014, at 5:42 PM, nom nom nom  wrote:
>>> 
>>> http://bit.ly/1dcFzaf
>>> 
>>> My page background shows up in chrome & safari on my computer, also works
>>> in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
>>> 
>>> Can anyone help me understand why?
>>> 
>>> Thanks in advance for your eyes!
>>> 
>>> josh
>> 
>> Josh,
>> I checked it on safari on my iphone5 with 7.0.4 with safari dev tools on my 
>> desktop and it looks like safari mobile doesn't like your gif file.
>> Try re-exporting it or try changing it to a png. My guess is that whatever 
>> compression you did on the gif, safari mobile doesn't like.
>> 
>> 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/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background doesn't show up on iOS

[+josh+]

Thanks, that did it! 
Josh 



> On Jan 15, 2014, at 5:22 PM, Karl DeSaulniers  wrote:
> 
> 
>> On Jan 11, 2014, at 5:42 PM, nom nom nom  wrote:
>> 
>> http://bit.ly/1dcFzaf
>> 
>> My page background shows up in chrome & safari on my computer, also works
>> in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
>> 
>> Can anyone help me understand why?
>> 
>> Thanks in advance for your eyes!
>> 
>> josh
> 
> Josh,
> I checked it on safari on my iphone5 with 7.0.4 with safari dev tools on my 
> desktop and it looks like safari mobile doesn't like your gif file.
> Try re-exporting it or try changing it to a png. My guess is that whatever 
> compression you did on the gif, safari mobile doesn't like.
> 
> 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/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background doesn't show up on iOS

[Karl DeSaulniers]

On Jan 11, 2014, at 5:42 PM, nom nom nom  wrote:

> http://bit.ly/1dcFzaf
> 
> My page background shows up in chrome & safari on my computer, also works
> in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
> 
> Can anyone help me understand why?
> 
> Thanks in advance for your eyes!
> 
> josh

Josh,
I checked it on safari on my iphone5 with 7.0.4 with safari dev tools on my 
desktop and it looks like safari mobile doesn't like your gif file.
Try re-exporting it or try changing it to a png. My guess is that whatever 
compression you did on the gif, safari mobile doesn't like.

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] background doesn't show up on iOS

[Chris Williams]

Just grasping at straws here, but I wonder if Safari is getting confused
by setting an image, and then later changing the color (which overrides
the inherent "transparent" of the background)??  Maybe if you tested
making that JS code that specifies the changing color also respecify the
image spec again (e.g. style="background: # url('bg.gif') x y")???
Again just a toss in the dark?

On 1/15/14 1:33 PM, "nom nom nom"  wrote:

>Thanks Chris,
>
>I know what you're talking about. What I did was I have an image that's
>partially transparent, and then I set a bg color which shows behind it.
>The
>js that I assume you speak of was setting an initial bgcolor.
>Subsequently,
>the bgcolor is changed as you mouseover the menu items. I have removed the
>initial jquery color, which means that CSS alone should be controlling
>bgimage on page load. But I still don't see the image on iOS.
>
>Oddly, I have never had a problem seeing it on Safari Mac -- that was one
>of the first things I checked. Still works fine.
>
>Any other ideas?
>
>Thanks
>josh
>__
>css-discuss [css-d@lists.css-discuss.org]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- 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] background doesn't show up on iOS

[nom nom nom]

Thanks Chris,

I know what you're talking about. What I did was I have an image that's
partially transparent, and then I set a bg color which shows behind it. The
js that I assume you speak of was setting an initial bgcolor. Subsequently,
the bgcolor is changed as you mouseover the menu items. I have removed the
initial jquery color, which means that CSS alone should be controlling
bgimage on page load. But I still don't see the image on iOS.

Oddly, I have never had a problem seeing it on Safari Mac -- that was one
of the first things I checked. Still works fine.

Any other ideas?

Thanks
josh
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background doesn't show up on iOS

[Chris Williams]

FWIW, I don't see it on my safari on OSX either.

One of your many JS files is adding an element style on the body tag that
has a background-color that overrides everything else specified there.
Haven't had time to figure out which one.  Try playing around in Firebug
(or some such) and see which one it is.  When I turn off that  tag in Firebug, the image comes back.

Or just disabling JS files one by one and see which one it is.

On 1/11/14 3:42 PM, "nom nom nom"  wrote:

>http://bit.ly/1dcFzaf
>
>My page background shows up in chrome & safari on my computer, also works
>in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.
>
>Can anyone help me understand why?
>
>Thanks in advance for your eyes!
>
>josh
>__
>css-discuss [css-d@lists.css-discuss.org]
>http://www.css-discuss.org/mailman/listinfo/css-d
>List wiki/FAQ -- 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] background doesn't show up on iOS

[nom nom nom]

http://bit.ly/1dcFzaf

My page background shows up in chrome & safari on my computer, also works
in android. Doesn't load in safari or the Perfect Browser in iOS 5 or 7.

Can anyone help me understand why?

Thanks in advance for your eyes!

josh
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image AND background color?

[Karl DeSaulniers]

You have to set up a special alpha CSS for IE.
Also you may need PNG fix for it to work in IE older browsers, but it can be 
done.

just search for "transparency in IE"
and
PNG fix for IE

HTH,
Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jun 19, 2013, at 12:46 PM, COM wrote:

> 
> On Jun 19, 2013, at 10:35 AM, "Tom Livingston"  wrote:
> 
>> You won't get PhotoShop "multiply" layer effects exactly, but using a 24bit 
>> png for your image with areas of alpha transparency to allow the bg color to 
>> come through is as close as u can get I believe.
> 
> 
> confirmed…here's what worked for me, aside from David and Karl's correction 
> of my code:
> 
> To make my png partially opaque in my image editor (Pixelmator)…I set it to 
> 50% just for grins and NOW the influence of that red is taking effect on the 
> PNG texture occupying the same element.
> 
> link:http://coffeeonmars.com/test/flextest/flextest.html
> 
> weird…my connection shows the red load first and then s-l-o-w-l-y replace by 
> the texture..
> 
> Thank you for the code corrections and ideas about png/opacity
> 
> Spoze the CSS consortium is considering giving us some photoshop-like layers? 
> Compared to the many other effects CSS is now handling, it doesn't seem 
> far-fetched..
> 
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background image AND background color?

[COM]

On Jun 19, 2013, at 11:43 AM, David Laakso  wrote:

> The red-like color is opaque: no texture whatsoever seen in Windows 7
> any browser.

well that blows a hole right through that technique..thank you for telling me 
that, David.


John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image AND background color?

[David Laakso]

On Wed, Jun 19, 2013 at 1:46 PM, COM  wrote:

confirmed…here's what worked for me./..
>
> To make my png partially opaque in my image editor (Pixelmator)…I set it to 
> 50% just for grins and NOW the influence of that red is taking effect on the 
> PNG texture occupying the same element.
>
> link:http://coffeeonmars.com/test/flextest/flextest.html

> John


The red-like color is opaque: no texture whatsoever seen in Windows 7
any browser.

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.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] background image AND background color?

[Greg Gamble]

Sorry Tom L.  Sent this to you instead of the list.

Anyway, you need an overlay div if you're trying to simulate layers. 
Makes for css that is easier to read, in my opinion.

Greg

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston
Sent: Wednesday, June 19, 2013 10:36 AM
To: COM
Cc: CSS-Discuss
Subject: Re: [css-d] background image AND background color?

You won't get PhotoShop "multiply" layer effects exactly, but using a 24bit png 
for your image with areas of alpha transparency to allow the bg color to come 
through is as close as u can get I believe.


​HTH 

—
Sent from Mailbox for iPhone

On Wed, Jun 19, 2013 at 11:54 AM, COM  wrote:

> On Jun 19, 2013, at 8:37 AM, David Laakso  wrote:
>> 
>> For those among us who dwell in the visual world, one picture is worth
>> a thousand words... a click able link to your coded page would help.
> A link to the page in question is here:   
> http://coffeeonmars.com/test/flextest/flextest.html
> the part I'm talking about is at top, where it says "heading one" and 
> "heading two"; behind them in the  is a jpg of what looks like some 
> light texture. in the css is also a background color for that element: a red 
> at 0.4 alpha.
> my goal is to have the texture image's color influenced by that background 
> color, IOW, by varying the opacity of the color, the image would have more or 
> less of a reddish cast to it.
> Thank you!
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background image AND background color?

[COM]

On Jun 19, 2013, at 10:35 AM, "Tom Livingston"  wrote:

> You won't get PhotoShop "multiply" layer effects exactly, but using a 24bit 
> png for your image with areas of alpha transparency to allow the bg color to 
> come through is as close as u can get I believe.


confirmed…here's what worked for me, aside from David and Karl's correction of 
my code:

To make my png partially opaque in my image editor (Pixelmator)…I set it to 50% 
just for grins and NOW the influence of that red is taking effect on the PNG 
texture occupying the same element.

link:http://coffeeonmars.com/test/flextest/flextest.html

weird…my connection shows the red load first and then s-l-o-w-l-y replace by 
the texture..

Thank you for the code corrections and ideas about png/opacity

Spoze the CSS consortium is considering giving us some photoshop-like layers? 
Compared to the many other effects CSS is now handling, it doesn't seem 
far-fetched..

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image AND background color?

[Tom Livingston]

You won't get PhotoShop "multiply" layer effects exactly, but using a 24bit png 
for your image with areas of alpha transparency to allow the bg color to come 
through is as close as u can get I believe.


​HTH 

—
Sent from Mailbox for iPhone

On Wed, Jun 19, 2013 at 11:54 AM, COM  wrote:

> On Jun 19, 2013, at 8:37 AM, David Laakso  wrote:
>> 
>> For those among us who dwell in the visual world, one picture is worth
>> a thousand words... a click able link to your coded page would help.
> A link to the page in question is here:   
> http://coffeeonmars.com/test/flextest/flextest.html
> the part I'm talking about is at top, where it says "heading one" and 
> "heading two"; behind them in the  is a jpg of what looks like some 
> light texture. in the css is also a background color for that element: a red 
> at 0.4 alpha.
> my goal is to have the texture image's color influenced by that background 
> color, IOW, by varying the opacity of the color, the image would have more or 
> less of a reddish cast to it.
> Thank you!
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background image AND background color?

[COM]

On Jun 19, 2013, at 10:31 AM, Karl DeSaulniers  wrote:

> Tested on safari 6.0.5...
> 
> background-color: rgba(240,0,0,0.4);
> 
> althought it looks like rgba(240,0,0,0.2) might be better suited. :)
> 

weird…no change for me at all, tho when I refresh, I do see the reduced-opacity 
red flash for just a second, right before the .jpg loads…..


John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image AND background color?

[Karl DeSaulniers]

Tested on safari 6.0.5...

background-color: rgba(240,0,0,0.4);

althought it looks like rgba(240,0,0,0.2) might be better suited. :)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jun 19, 2013, at 12:17 PM, David Laakso wrote:

> On Wed, Jun 19, 2013 at 11:51 AM, COM  wrote:
>> 
>> On Jun 19, 2013, at 8:37 AM, David Laakso  wrote:
>> 
>> For those among us who dwell in the visual world, one picture is worth
>> a thousand words... a click able link to your coded page would help.
>> 
>> 
>> A link to the page in question is here:
>> http://coffeeonmars.com/test/flextest/flextest.html
>> 
>> the part I'm talking about is at top, where it says "heading one" and
>> "heading two"; behind them in the  is a jpg of what looks like some
>> light texture. in the css is also a background color for that element: a red
>> at 0.4 alpha.
>> 
>> my goal is to have the texture image's color influenced by that background
>> color, IOW, by varying the opacity of the color, the image would have more
>> or less of a reddish cast to it.
>> 
>> Thank you!
>> 
>> John
> 
> 
> John,
> 
> rgba coding error...
> 
> Change this:
> header{
> background-color:rgba(240,0,0 0.4);
> }
> 
> to this:
> header{
> background-color:rgba(240,0,0,.04);
> }
> 
> or this:
> header{
> background-color:rgba(240,0,0,.4);
> }
> 
> Note the last comma.
> Not tested.
> 
> Best,
> David Laakso
> 
> 
> 
> 
> -- 
> Chelsea Creek Studio
> http://ccstudi.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] background image AND background color?

[David Laakso]

On Wed, Jun 19, 2013 at 11:51 AM, COM  wrote:
>
> On Jun 19, 2013, at 8:37 AM, David Laakso  wrote:
>
> For those among us who dwell in the visual world, one picture is worth
> a thousand words... a click able link to your coded page would help.
>
>
> A link to the page in question is here:
> http://coffeeonmars.com/test/flextest/flextest.html
>
> the part I'm talking about is at top, where it says "heading one" and
> "heading two"; behind them in the  is a jpg of what looks like some
> light texture. in the css is also a background color for that element: a red
> at 0.4 alpha.
>
> my goal is to have the texture image's color influenced by that background
> color, IOW, by varying the opacity of the color, the image would have more
> or less of a reddish cast to it.
>
> Thank you!
>
> John


John,

rgba coding error...

Change this:
header{
background-color:rgba(240,0,0 0.4);
}

to this:
header{
background-color:rgba(240,0,0,.04);
}

or this:
header{
background-color:rgba(240,0,0,.4);
}

Note the last comma.
Not tested.

Best,
David Laakso




-- 
Chelsea Creek Studio
http://ccstudi.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] background image AND background color?

[COM]

On Jun 19, 2013, at 8:37 AM, David Laakso  wrote:

> 
> For those among us who dwell in the visual world, one picture is worth
> a thousand words... a click able link to your coded page would help.

A link to the page in question is here:   
http://coffeeonmars.com/test/flextest/flextest.html

the part I'm talking about is at top, where it says "heading one" and "heading 
two"; behind them in the  is a jpg of what looks like some light 
texture. in the css is also a background color for that element: a red at 0.4 
alpha.

my goal is to have the texture image's color influenced by that background 
color, IOW, by varying the opacity of the color, the image would have more or 
less of a reddish cast to it.

Thank you!

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image AND background color?

[David Laakso]

On Wed, Jun 19, 2013 at 10:58 AM, COM  wrote:
>
> On Jun 18, 2013, at 6:38 PM, David Laakso  wrote:
>
> Anything is possible. Scalable Vector Graphics [svg images], CSS rgba
> transparency, and CSS linear-gradients --among other contemporary
> methods ...  open a lot of new doors and windows  that do not require
> PhotoShop.
>
>
> Thank you..this is good to hear. Let me make sure I expressed my request
> clearly when I say "on top"..picture a  960x100px which has a
> background image. imagine that same  with a color applied to the
> entire 960x100px dimension
>
> as opposed to: a header with a background image and a background color
> "above" it in the sense of "closer to the top edge of the view port.
>
> I fiddled yesterday and got nothing other than I can vary the opacity of my
> color but not so that the background image's color is affected by that of
> the color above it (above it in z-space)
>
> Thank you!
>
> JOhn


John,

For those among us who dwell in the visual world, one picture is worth
a thousand words... a click able link to your coded page would help.

Transparency is determined by the code but it is dependent on the hue,
saturation, value of the elements proper-- their z-index, the type of
monitor used to view the page, ambient light when viewed... and god
only knows what else.

For what its worth this is a site in progress that uses various
combinations of svg images, linear-gradients, and rgba-transparency in
the header, navigation, sidebar, and footer: 

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.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] background image AND background color?

[David Laakso]

On Tue, Jun 18, 2013 at 8:22 PM, COM  wrote:
> Fiddling with trying to combine a background image with background color 
> applied to the same element and hoping to vary either one or both opacity.
>
> Is this possible to do…I guess what I'm looking for is to do with CSS, images 
> and color what you can do with Photoshop layers.
>
> Thank you!
>
> John



Anything is possible. Scalable Vector Graphics [svg images], CSS rgba
transparency, and CSS linear-gradients --among other contemporary
methods ...  open a lot of new doors and windows  that do not require
PhotoShop.

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.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] background image AND background color?

[Tom Livingston]

Background: #cco url('image.png') 0 0 no-repeat;
—
Sent from Mailbox for iPhone

On Tue, Jun 18, 2013 at 8:22 PM, COM  wrote:

> Fiddling with trying to combine a background image with background color 
> applied to the same element and hoping to vary either one or both opacity.
> Is this possible to do…I guess what I'm looking for is to do with CSS, images 
> and color what you can do with Photoshop layers.
> Thank you!
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background image AND background color?

[COM]

Fiddling with trying to combine a background image with background color 
applied to the same element and hoping to vary either one or both opacity.

Is this possible to do…I guess what I'm looking for is to do with CSS, images 
and color what you can do with Photoshop layers.

Thank you!

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background displays locally, but not remotely

[Hahnel, Fred (DET-MRM)]

Css file not found  in  Web Developer console

http://ricochet.org/evolutionery.com/stylesheets/floradise.css



-Fred Hahnel

-Original Message-
From: css-d-boun...@lists.css-discuss.org 
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Ron Zisman
Sent: Wednesday, June 12, 2013 1:17 PM
To: CSS List
Subject: [css-d] background displays locally, but not remotely

http://ricochet.org/evolutionery.com/index.html

stupidly simple, a background image with 2 links... only the links show (not bg 
imgs) styles in the head of doc.

thanks 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/
This message contains information which may be confidential and privileged. 
Unless you are the intended recipient (or authorized to receive this message 
for the intended recipient), you may not use, copy, disseminate or disclose to 
anyone the message or any information contained in the message.  If you have 
received the message in error, please advise the sender by reply e-mail, and 
delete the message.  Thank you very much.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background displays locally, but not remotely

[Tim Arnold]

On Wed, Jun 12, 2013 at 1:17 PM, Ron Zisman  wrote:
> http://ricochet.org/evolutionery.com/index.html
>
> stupidly simple, a background image with 2 links… only the links show (not bg 
> imgs)
> styles in the head of doc.
>
> thanks in advance
> ron

The path to the images that do show up:
http://ricochet.org/evolutionery.com/images/contact.jpg  Great!
Works!
The path to the image referenced in the css:
http://ricochet.org/evolutionery.com/images/index.jpg  Not Great!
File Not Found!

Move that "index.jpg" image up to the same directory that
"contact.jpg" is in and it should work.

tim



-- 

tim.arn...@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] background displays locally, but not remotely

[Karl DeSaulniers]

Looks like index.jpg isn't in that folder.
404 not found for me anyways.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jun 12, 2013, at 12:17 PM, Ron Zisman wrote:

> http://ricochet.org/evolutionery.com/index.html
> 
> stupidly simple, a background image with 2 links… only the links show (not bg 
> imgs)
> styles in the head of doc.
> 
> thanks 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] background displays locally, but not remotely

[Ron Zisman]

http://ricochet.org/evolutionery.com/index.html

stupidly simple, a background image with 2 links… only the links show (not bg 
imgs)
styles in the head of doc.

thanks 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-d] background image of entire tag change on hover... not the tags under it?

[lobo]

Hi everyone,

I am trying to solve a css puzzle and thought I'd see if I could find 
help.


I am building a navigation that is composed of three  elements, 
each with a background image. I would like for the background image to 
change when the user hovers over anywhere within the  element, and 
for the  elements underneath it to change color when they are 
hovered over.


Please check out the attached images and consider the following html:

Permanent powder
available colors
how to use
faq
where to buy
order now


When mouse is all-together away from the :
http://bigen-usa.com/2013stage_v2/_images/samplenav-a.jpg

When mouse is over  and over how to use:
http://bigen-usa.com/2013stage_v2/_images/samplenav-b.jpg


Any ideas on how to make this work?

Thanks in advance for any insight!

- Matthew
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[John D]

> Wait..so…you're saying that the .css document is "making the call" for the 
> background image and NOT the HTML page?
> so, if the styles were in the html document head, THEN it would be one up?
> 

No,  what he is saying is the code you have got is dependent on where exactly 
your CSS file is located.  If it is located in the same folder as your 
index.html and referenced accrodingly in the index file then it won't find your 
background image because it is looking for a folder image at the same level.  
However, by putting the dots and slash infront of the word "image" then it goes 
one step up to look for the folder image.  Also, make sure that image <> Image 
<> IMAGE.

Hope this gives you the idea in a nutshell.



  
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[Tom Livingston]

Correct
—
Sent from Mailbox for iPhone

On Fri, Apr 26, 2013 at 7:29 PM, COM  wrote:

> On Apr 26, 2013, at 4:26 PM, COM  wrote:
>>> Background images are relative to the CSS not the HTML 
> Wait..so…you're saying that the .css document is "making the call" for the 
> background image and NOT the HTML page?
> so, if the styles were in the html document head, THEN it would be one up?
> Sorry, I just really need to get this straight in my head, who's lookin for 
> what in this hierarchy..
> thank you,
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background image not appearing

[COM]

On Apr 26, 2013, at 4:29 PM, "Tom Livingston"  wrote:

> Right so you have to back out of the CSS dir then go into the image dir to 
> get your background image, where as the HTML just had to go into the CSS dir 
> to get the sheet.
> 

OK..alright…this is a key bit of learning for Johnny today..thank you.

J

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[COM]

On Apr 26, 2013, at 4:26 PM, COM  wrote:

>> Background images are relative to the CSS not the HTML 

Wait..so…you're saying that the .css document is "making the call" for the 
background image and NOT the HTML page?
so, if the styles were in the html document head, THEN it would be one up?

Sorry, I just really need to get this straight in my head, who's lookin for 
what in this hierarchy..

thank you,

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[COM]

On Apr 26, 2013, at 4:14 PM, "Tom Livingston"  wrote:

> Background images are relative to the CSS not the HTML 

I get that but here's a screen grab showing that the image is "1 folder up" and 
that the .css file is, too "1 folder up"

ergo, the same relationship from html file to css file as from html file to 
image file. Isn't it? Different folders, yes, but "1 up?"

link:

http://coffeeonmars.com/screenshots/imagecsshtml.jpg

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[Tom Livingston]

Background images are relative to the CSS not the HTML 
—
Sent from Mailbox for iPhone

On Fri, Apr 26, 2013 at 7:12 PM, COM  wrote:

> On Apr 26, 2013, at 4:04 PM, Micky Hulse  wrote:
>> Have you tried:
>> 
>> background-image:url(../image/bricktile.jpg);
> That works, but I don't get it because for the css, THIS works: 
> css/hwthreestyles.css
> where css is the folder where the .css file lives.  why the leading ../ for 
> the image but not needed for the css?
> thank you!
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background image not appearing

[COM]

On Apr 26, 2013, at 4:04 PM, Micky Hulse  wrote:

> Have you tried:
> 
> background-image:url(../image/bricktile.jpg);

That works, but I don't get it because for the css, THIS works: 
css/hwthreestyles.css

where css is the folder where the .css file lives.  why the leading ../ for the 
image but not needed for the css?

thank you!

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[Micky Hulse]

Howdy,

On Fri, Apr 26, 2013 at 3:50 PM, COM  wrote:
> given the  code below and that my "bricktile.jpg" is 1 level up from my 
> index.html in a folder named "image" can anyone tell me why my 
> background-image refuses to appear?

Have you tried:

background-image:url(../image/bricktile.jpg);
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[Philip TAYLOR]

COM wrote:

> given the  code below and that my "bricktile.jpg" is 1 level up from
> my index.html in a folder named "image" can anyone tell me why my
> background-image refuses to appear?

Because it is one level up, not one level down.
Philip Taylor

> 
> I've been looking at it for half hour and I am baffled. thank you for
> any clues.
> 
> John
> 
> body{ font-size:100%; font-family:Helvetica Neue, Verdana, Arial,
> sans-serif; background-image:url(image/bricktile.jpg); }
> 
> 
> __
>
> 
css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ --
> http://css-discuss.incutio.com/ List policies --
> http://css-discuss.org/policies.html Supported by evolt.org --
> http://www.evolt.org/help_support_evolt/
> 

-- 
If I can't see the start of your reply without scrolling, there is a
99.9% probability that your message will be ignored.  And if all that I
can see is recycled text from earlier messages in the thread, the
probability will increase to 100%.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background image not appearing

[COM]

given the  code below and that my "bricktile.jpg" is 1 level up from my 
index.html in a folder named "image" can anyone tell me why my background-image 
refuses to appear?

I've been looking at it for half hour and I am baffled. thank you for any clues.

John

body{
font-size:100%;
font-family:Helvetica Neue, Verdana, Arial, sans-serif;
background-image:url(image/bricktile.jpg);
}


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Markus Ernst]

Am 15.11.2012 16:14 schrieb Elli Vizcaino:



- Original Message -


From: HMW Sales 
To: css-d@lists.css-discuss.org
Cc:
Sent: Thursday, November 15, 2012 9:56 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8

On 11/15/2012 9:43 AM, Markus Ernst wrote:

  Am 15.11.2012 15:27 schrieb Elli Vizcaino:

  Here is my conditional comment in case you were wondering:

  


  At the page that you link to, I see this:
  


  Are sure you have actually posted the link to the page you have the problem

with?





Try using absolute path for the background image


Tried that too and did it again just now. Maybe I'm having a cache problem? Ok 
tried something else. I deleted the ie.css file from server and in my header 
file within the conditional comments I am calling a stylesheet named 
iestyles.css which actually doesn't exist on the server and nothing has 
changed. Do you think it's a cache problem or maybe it's my conditional comment?


It looks like IE is not finding or not interpreting the stylesheet at 
all. To control this, you can do some very obvious change in the IE 
stylesheet, such as body {background:yellow} - then you see very well if 
the browser gets the stylesheet or not.


I am not quite familiar with the impacts of the media attribute. But I 
noticed that in the link element for your main stylesheet you have 
media="projection, screen". Maybe you try to add that in the link for 
the ie stylesheet, too, or remove it at all.


(Anyway, the stylesheet you provided a link to does not seem to exist:
http://www.e7flux.com/wp-content/themes/e7flux/css/ie.css)

HTH
Markus
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[HMW Sales]

On 11/15/2012 10:14 AM, Elli Vizcaino wrote:


- Original Message -


From: HMW Sales 
To: css-d@lists.css-discuss.org
Cc:
Sent: Thursday, November 15, 2012 9:56 AM
Subject: Re: [css-d] Background Image Not Showing in IE7/IE8

On 11/15/2012 9:43 AM, Markus Ernst wrote:

  Am 15.11.2012 15:27 schrieb Elli Vizcaino:

  Here is my conditional comment in case you were wondering:

  

  At the page that you link to, I see this:
  


  Are sure you have actually posted the link to the page you have the problem

with?
Try using absolute path for the background image

Tried that too and did it again just now. Maybe I'm having a cache problem? Ok 
tried something else. I deleted the ie.css file from server and in my header 
file within the conditional comments I am calling a stylesheet named 
iestyles.css which actually doesn't exist on the server and nothing has 
changed. Do you think it's a cache problem or maybe it's my conditional comment?

Elli


Works fine on my end now. Could be a cache issue, not sure.
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Elli Vizcaino]

Ok resolved it. Added an absolute path, changed stylesheet name, uploaded it 
and it works in IE 7 / 8 

Thanks everyone! 

Elli 

>
> From: Elli Vizcaino 
>To: HMW Sales ; "css-d@lists.css-discuss.org" 
> 
>Sent: Thursday, November 15, 2012 10:14 AM
>Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
> 
>
>
>- Original Message -
>
>> From: HMW Sales 
>> To: css-d@lists.css-discuss.org
>> Cc: 
>> Sent: Thursday, November 15, 2012 9:56 AM
>> Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
>> 
>> On 11/15/2012 9:43 AM, Markus Ernst wrote:
>>>  Am 15.11.2012 15:27 schrieb Elli Vizcaino:
>>>>  Here is my conditional comment in case you were wondering:
>>>> 
>>>>  
>>> 
>>>  At the page that you link to, I see this:
>>>  
>>> 
>>> 
>>>  Are sure you have actually posted the link to the page you have the 
>>>problem 
>> with?
>
>>> 
>> Try using absolute path for the background image
>
>Tried that too and did it again just now. Maybe I'm having a cache problem? Ok 
>tried something else. I deleted the ie.css file from server and in my header 
>file within the conditional comments I am calling a stylesheet named 
>iestyles.css which actually doesn't exist on the server and nothing has 
>changed. Do you think it's a cache problem or maybe it's my conditional 
>comment?
>
>Elli
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Elli Vizcaino]

- Original Message -

> From: HMW Sales 
> To: css-d@lists.css-discuss.org
> Cc: 
> Sent: Thursday, November 15, 2012 9:56 AM
> Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
> 
> On 11/15/2012 9:43 AM, Markus Ernst wrote:
>>  Am 15.11.2012 15:27 schrieb Elli Vizcaino:
>>>  Here is my conditional comment in case you were wondering:
>>> 
>>>  
>> 
>>  At the page that you link to, I see this:
>>  
>> 
>> 
>>  Are sure you have actually posted the link to the page you have the problem 
> with?

>> 
> Try using absolute path for the background image

Tried that too and did it again just now. Maybe I'm having a cache problem? Ok 
tried something else. I deleted the ie.css file from server and in my header 
file within the conditional comments I am calling a stylesheet named 
iestyles.css which actually doesn't exist on the server and nothing has 
changed. Do you think it's a cache problem or maybe it's my conditional comment?

Elli
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[HMW Sales]

On 11/15/2012 9:43 AM, Markus Ernst wrote:

Am 15.11.2012 15:27 schrieb Elli Vizcaino:

Here is my conditional comment in case you were wondering:




At the page that you link to, I see this:



Are sure you have actually posted the link to the page you have the 
problem with?

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Try using absolute path for the background image
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Elli Vizcaino]

Hi Markus, 

Yes I have. I started to experiment and rewrite the php in the conditional 
comment but I've since put it back. You should find the direct url to the IE 
stylesheet: 

http://www.e7flux.com/wp-content/themes/e7flux/css/ie.css



 
Elli Vizcaino
Helping entrepreneurs and businesses build 
a brand that helps them engage, delight and 
interact more profitably with their customers. 
http://www.e7flux.com



- Original Message -
> From: Markus Ernst 
> To: Elli Vizcaino 
> Cc: CSS Discuss ; Isabel Santos 
> 
> Sent: Thursday, November 15, 2012 9:43 AM
> Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
> 
> Am 15.11.2012 15:27 schrieb Elli Vizcaino:
>>  Here is my conditional comment in case you were wondering:
>> 
>>  
> 
> At the page that you link to, I see this:
> 
> 
> 
> Are sure you have actually posted the link to the page you have the problem 
> with?
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Markus Ernst]

Am 15.11.2012 15:27 schrieb Elli Vizcaino:

Here is my conditional comment in case you were wondering:




At the page that you link to, I see this:



Are sure you have actually posted the link to the page you have the 
problem with?

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Elli Vizcaino]

Hi Isabel, 

Thanks for your suggestion but it still didn't work. I guess there is no 
difference in writing the rule incrementally since I need the bkg-pattern.png 
image to tile and that one must be written last in the rule, when using 
multiple background images so I cannot change the order, in order to target the 
older browsers. Just don't understand why IE7/8 aren't picking up the image yet 
they are picking up the blue background color that was stated in the IE 
stylesheet. 

Here is my conditional comment in case you were wondering: 



Elli Vizcaino
Helping entrepreneurs and businesses build 
a brand that helps them engage, delight and 
interact more profitably with their customers. 
http://www.e7flux.com




>
> From: Isabel Santos 
>To: Elli Vizcaino  
>Cc: CSS Discuss  
>Sent: Wednesday, November 14, 2012 9:04 PM
>Subject: Re: [css-d] Background Image Not Showing in IE7/IE8
> 
>Hi Elli,
>
>I cannot find the conditional comment on your code, not on the ie developer
>tools, nor on firebug, (I gess it has to do with a onload js script) so I'm
>not sure I'm seeing the right css files, but you do not really need a
>conditional code for the multiple backgrounds if you write the rule
>incrementally.
>
>I can see this code on style.css:
>
>body {
>background: url("images/fancy-tag-bkg-med.png") no-repeat center 50px,
>url("images/bkg-pattern.png") rgb(146, 212, 210); height: 100%; color:
>rgb(255, 255, 255); font-family: "Caviar Dreams", "Helvetica", "Arial",
>"sans-serif";
>}
>
>If you write it as:
>
>body {
>background-image: url("images/fancy-tag-bkg-med.png"),
>("images/bkg-pattern.png");
>background-repeat: no-repeat, repeat;
>background-position: 50% 50px;
>background-color: #92d4d2;
>
>...
>}
>
>older browsers, that do not support multiple backgrounds, will still render
>the first background.
>
>You can also play with rewriting rules to serve the correct background to
>older browsers if the background you want to serve them is not the first in
>the rule.
>The only drawback of this tecnique is that it is possible some browsers
>will download files that wont be used because of the rewriting..
>Hope it helps,
>isabel
>
>On Wed, Nov 14, 2012 at 9:54 PM, Elli Vizcaino  wrote:
>
>> Hello CSS Discuss,
>>
>> I'm using conditional statement to target an ie specific stylesheet to
>> browsers IE7 & 8 since neither of them support CSS3 multiple backgrounds.
>> While IE7 & 8 are both picking up the stylesheet's bacgkround color
>> property it's not loading the background image. I'm not sure why. Maybe my
>> directory path is wrong? Can someone please help out.
>>
>> TIA,
>>
>> Elli Vizcaino

> 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background Image Not Showing in IE7/IE8

[Isabel Santos]

Hi Elli,

I cannot find the conditional comment on your code, not on the ie developer
tools, nor on firebug, (I gess it has to do with a onload js script) so I'm
not sure I'm seeing the right css files, but you do not really need a
conditional code for the multiple backgrounds if you write the rule
incrementally.

I can see this code on style.css:

body {
 background: url("images/fancy-tag-bkg-med.png") no-repeat center 50px,
url("images/bkg-pattern.png") rgb(146, 212, 210); height: 100%; color:
rgb(255, 255, 255); font-family: "Caviar Dreams", "Helvetica", "Arial",
"sans-serif";
}

If you write it as:

body {
 background-image: url("images/fancy-tag-bkg-med.png"),
 ("images/bkg-pattern.png");
 background-repeat: no-repeat, repeat;
 background-position: 50% 50px;
 background-color: #92d4d2;

 ...
}

older browsers, that do not support multiple backgrounds, will still render
the first background.

You can also play with rewriting rules to serve the correct background to
older browsers if the background you want to serve them is not the first in
the rule.
The only drawback of this tecnique is that it is possible some browsers
will download files that wont be used because of the rewriting..
Hope it helps,
isabel

On Wed, Nov 14, 2012 at 9:54 PM, Elli Vizcaino  wrote:

> Hello CSS Discuss,
>
> I'm using conditional statement to target an ie specific stylesheet to
> browsers IE7 & 8 since neither of them support CSS3 multiple backgrounds.
> While IE7 & 8 are both picking up the stylesheet's bacgkround color
> property it's not loading the background image. I'm not sure why. Maybe my
> directory path is wrong? Can someone please help out.
>
> TIA,
>
> Elli Vizcaino
> Helping entrepreneurs and businesses build
> a brand that helps them engage, delight and
> interact more profitably with their customers.
> http://www.e7flux.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] Background Image Not Showing in IE7/IE8

[Elli Vizcaino]

Hello CSS Discuss, 

I'm using conditional statement to target an ie specific stylesheet to browsers 
IE7 & 8 since neither of them support CSS3 multiple backgrounds. While IE7 & 8 
are both picking up the stylesheet's bacgkround color property it's not loading 
the background image. I'm not sure why. Maybe my directory path is wrong? Can 
someone please help out. 

TIA,

Elli Vizcaino
Helping entrepreneurs and businesses build 
a brand that helps them engage, delight and 
interact more profitably with their customers. 
http://www.e7flux.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] background shorthand definition

[Isabel Santos]

:)
ok Alan,

Philippe has already provided reasons why this is and a possible solution
but this could also be solved by creating a SVG with no intrinsic size or
ratio. Like so.
http://css-class.com/test/svg/ellipse/intrinsic-none.svg


I'm not sure about my sintax, its a lot easier to make svgs in a vector
graphics application,
but I took out the entity references and the viewbox and style definitions
and converted every measure to relative units.
It does work on Opera, and on the rest of the recent browsers, looks the
same and gives me no errors!

no url for now, but it follows the working intrinsic-test.svg for one of
the images:


http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
http://www.w3.org/2000/svg";
  x="0px" y="0px" width="100%" height="100%" xml:space="preserve"
preserveAspectRatio="none">
 
  
   
   
   
  
 
 
 
  
   
   
  
 
 
 
  
   
   
  
 
 


:)
Thank you all,
best,
isabel
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background shorthand definition

[Isabel Santos]

(It seams I keep doing the same mistake:
Clicking on reply instead of reply to all,
so I'll repeat my previous answer to Philippe at the end of this one.)


Alan,

Philippe was right, and his suggestion is handy and makes a lot of sense.
Yet it doesn't feel right to me to use the media queries in this way,
it probably has no unintended consequences, and it is certainly valid,
but it feels kind of funny, bad memmories from dead old hacks, I don't know,
so I just decided to take out the corner from the pngs and address opera
mini directly.
Anyway, your suggestion comes really handy for another reason:

Opera isn't behaving properly after all:
On really wide resolutions it cuts the background, it only stretches so
much,
no matter the backgrounds real aspect ratio in relation to the element or
even real width.
And give it a prefixed background just for opera (cover)
only works if there is no other unprefixed declaration, before or after.
(They say on google that Opera 12 solved it, but I'll keep 11.64 untill I
fix this.)

I had previously added the
' preserveAspectRatio="none" '
for webkits sake, but it has no effect on Opera.
(Opera actually reports an error on this svg 1.1 files,
and it didn't report errors on svg tiny ones:
enable-background:new 0 0 1600 64;)

So I'll try svgs with no dimensions,
I'll let you know if it works :)

Thank you so much,
isabel


previous reply, sent to Philippe but not to the list:

Philippe,

thank you so much.

Strange that they decided to wait.
I gess for that, this browsers probably
do deserve the media queries,
but for some reason it just doesn't feel right.
I decided to take out the corner from the pngs
and deal with opera-mini separatly
(doesn't feel right too,
I'm detecting opera mini and serving it the cornerd png,
I'll probably make a proper cornerd svg just for omini).
Anyway seams desktop opera has trouble
calcutating the stretch on wider windows after all,
(seems to interpret 100% 100% as cover based on height),
so its back to vector editing.

Thank you again,
best

isabel
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background shorthand definition

[Alan Gresley]

On 17/06/2012 9:32 AM, Isabel Santos wrote:


so if I do:

#minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}

Ie9 and Opera 11.64 both get it pretty right,
but Google Chrome 0.3.1, Safari 5.1.7
and most notably Firefox 12 all give me the background:#bab9a9;


Philippe has already provided reasons why this is and a possible 
solution but this could also be solved by creating a SVG with no 
intrinsic size or ratio. Like so.


http://css-class.com/test/svg/ellipse/intrinsic-none.svg

This would allow you to the SVG is possibly more browsers. It will work 
in Firefox but WebKit (Safari and Chrome) does have a bug with SVGs with 
no intrinsic size or ratio with background-size that are not auto.


I believe you are attempting to use the slash shorthand as a filter for 
browsers that don't support it. Maybe wrong. :-)



I'm getting kind of confused, does this mean the new shorthand only applies
to multiple backgrounds?


No. The can be single backgrounds. Here is one test with multiple 
background layers that shows the potential of CSS. Working in IE9 and 
Opera 11.64.


http://css-class.com/test/css/3/backgrounds/background-slash-shorthand.htm


--
Alan Gresley
http://css-3d.org/
http://css-class.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] background shorthand definition

[Philippe Wittenbergh]

Le 17 juin 2012 à 08:32, Isabel Santos a écrit :

> #minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}

That is the correct way of writing css3 background-shorthand

> 
> Ie9 and Opera 11.64 both get it pretty right,

Yes.

> but Google Chrome 0.3.1, Safari 5.1.7
> and most notably Firefox 12 all give me the background:#bab9a9;

Right. The background-size part is not yet hooked up to the background 
shorthand in Firefox. You're looking at this bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=570326

As for Webkit based browsers: Safari 5.1.7 doesn't support it yet (it already 
works in nightly builds, so Safari next will support it. It is a pretty recent 
addition to the WebKit code; I think Google Chrome 19.x should support it (or 
else Chrome 20).

> I'm getting kind of confused, does this mean the new shorthand only applies
> to multiple backgrounds?

No, it works just as well with only one background-layer, it is just that those 
browsers haven't implemented it. Yet.

You can do something like this, in addition to the code you have:
@media screen and (-webkit-min-device-pixel-ratio: 1),
screen and (min--moz-device-pixel-ratio: 1) {
E { background: url(path/to/image.svg) top right no repeat; 
background-size: 100% 100%; }
}

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] background shorthand definition

[Isabel Santos]

Hi all,

I seem to have come accross a strange problem in gecko and webkit browsers,
and I cannot find info on this anywhere, so I'm turning to your infinit
wisdom :)

I'm using an svg on a background, and providing a fallback png element for
older browsers.
(I'm treating ie versions lower then 9 via conditional comments for extra
css files).

Since svg background support is way better then rounded corners,
(kind of cutting corners to save code)
the fallback .png has the top right corder already rounded.
The background images are subtle overlayed gradients,
so I prefere to see them cut in older browsers then to see them stretched.

But for newer browsers I need the svg backgrounds to behave accordingly.
Also, opera mini reports support for background features that doesn't
support,
so I'm opting to ignore modernizr classes on background features.

Because I need the background to be sized auto for the pngs and 100% 100%
for the svgs,
in subsequent rules, I need to use the shorthand definition, and thats
where it breaks:

I'm doing:

#encontra, #minuto, #estendal {background:#bab9a9;}
for good practice sake,
#minuto {background:url(img/bgtopnavPlanoMedio.png) right top no-repeat;}
for less capable browsers
and trying options on the svg.

It seams I cannot use background size if I give no position
(the spec is kind of ambiguos on it, it does not work with nothing before
the slash,
and giving no slash with percentages or auto is interpreted as position)

so if I do:

#minuto {background:url(img/bgtopnavPlanoMedio.svg) top right / 100% 100%;}

Ie9 and Opera 11.64 both get it pretty right,
but Google Chrome 0.3.1, Safari 5.1.7
and most notably Firefox 12 all give me the background:#bab9a9;

When I say notably for firefox, it is because they have the shorthand
defined at
https://developer.mozilla.org/en/CSS/background
as:
[  ||  [ /  ]? ||
 ||  ||  ]
so it really should work!

Also, I can find tons of css shorthand background exemples googling for it,
but nothing that includes a background size with only one background.

I'm getting kind of confused, does this mean the new shorthand only applies
to multiple backgrounds?

Sorry for the extension, I cannot provide an url for the time being.
Thank you,

isabel
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background color for 3 column layout

[David Laakso]

On Thu, Mar 8, 2012 at 11:57 AM, J.C. Berry  wrote:

  I need the
 longest of the three columns (2 or 3) to determine how high the containing
div is.

 J.C. Berry, M.A.

---

There are a number of ways to do that. One is a CSS Table [looks like
a table but its not].
Please see:

Best,
~d
-- 
Chelsea Creek Studio
http://ccstudi.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] Background color for 3 column layout

[John D]

> I have a three-column layout, all three of which have a white background.
> The page background is black and I need the div containing the three
> columns to expand with its white background down the page. I need the
> longest of the three columns (2 or 3) to determine how high the containing
> div is. I also have footer that clears the three columns fine. How can I do
> this? Thanks!

By using the technique discussed here:







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/

[css-d] Background color for 3 column layout

[J.C. Berry]

Hi all,
I have a three-column layout, all three of which have a white background.
The page background is black and I need the div containing the three
columns to expand with its white background down the page. I need the
longest of the three columns (2 or 3) to determine how high the containing
div is. I also have footer that clears the three columns fine. How can I do
this? Thanks!

-- 
J.C. Berry, M.A.
UI Developer
619.306.1712(m)
jcharlesbe...@gmail.com
portfolio: http://www.mindarc.com


This E-mail is covered by the Electronic Communications Privacy Act, 18
U.S.C. ?? 2510-2521 and is legally privileged. This information is
confidential information and is intended only for the use of the individual
or entity named above. If the reader of this message is not the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] Background image not displaying in correct position

[Erica Cavin]

On Thu, 2012-03-01 at 20:56 -0800, David Hucklesby wrote:
> On 3/1/12 11:36 AM, Erica Cavin wrote:
> > On this page:  http://www.risingstarquilters.org/join_update.html
> >
> > the small arrow that should appear next to "Back to questions"
> > displays far to the left in Chrome and Safari.  It displays properly
> > in Firefox and IE.  Any thoughts as to why?
> >
> 
> I think that it does not display correctly in Firefox and IE. :\
> 
> You are applying the image to the list marker, which I'd expect to be to
> the left of the list item and hanging off the edge, as any other list
> marker. For some odd reason, Firefox and IE seem to apply the list
> marker to the enclosed anchor/link!
> 
> I suggest a quick fix:
> 
> 1. Add "float: right;" to the rule for li.backquestions
> 2. Add "overflow: hidden;" to a rule that targets the enclosing UL.
> 
> Example:
> #answers > ul { overflow: hidden; }
> 
> This second step will enclose the floated LI, preserving the spacing.

First, thanks to those who replied.  Vince's suggestion to set
list-style-position:inside worked!  So I didn't move on to the floating.
But why would floating be used when what I was trying to do is align the
text to the right, not place it next to something else?

Thanks again.  It was a small thing but it was really bothering me.

Erica

-- 
Attic Windows Web Design
http://atticwindowswebdesign.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] Background image not displaying in correct position

[Ghodmode]

This bug was reported in January 2000:

  https://bugzilla.mozilla.org/show_bug.cgi?id=25291

After twelve years and only 13 comments, I'd guess that no one cares
enough to fix it :(

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


On Fri, Mar 2, 2012 at 12:17 PM, Ghodmode  wrote:
> On Fri, Mar 2, 2012 at 3:36 AM, Erica Cavin  wrote:
>> On this page:  http://www.risingstarquilters.org/join_update.html
>>
>> the small arrow that should appear next to "Back to questions" displays
>> far to the left in Chrome and Safari.  It displays properly in Firefox
>> and IE.  Any thoughts as to why?
>
> It looks like IE9 displays the same as Chrome and Safari, but IE8 displays the
> same as Firefox
>
> For starters, it's not a background-image.  It's a list-style-image, so the
> background-position property doesn't have any affect.
>
> The list-item is as wide as the block and the text is aligned to the right.  
> It
> looks like Firefox puts the bullet to the left of the text and the others put 
> it
> to the left of the block.
>
> I hate to say it, but I think Firefox's presentation is wrong in this case.
>
> The spec says "The marker box is outside the principal block box.".  Since the
> left of the list item's principal block box is all the way over on the left,
> that's where the bullet should be.
>
> For the desired effect, you should set list-style-position:inside.  This will
> have no effect in Firefox, but the others will render the bullet "as the first
> inline box in the principal block box" as defined in the spec.
>
> Ref: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position
>
> --
> Vince Aggrippino
> Ghodmode Development
> http://www.ghodmode.com
>
>
>> CSS here:  http://www.risingstarquilters.org/styles2.css
>>
>> Thanks!
>>
>> Erica
>> --
>> Attic Windows Web Design
>> http://atticwindowswebdesign.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] Background image not displaying in correct position

[David Hucklesby]

On 3/1/12 11:36 AM, Erica Cavin wrote:

On this page:  http://www.risingstarquilters.org/join_update.html

the small arrow that should appear next to "Back to questions"
displays far to the left in Chrome and Safari.  It displays properly
in Firefox and IE.  Any thoughts as to why?



I think that it does not display correctly in Firefox and IE. :\

You are applying the image to the list marker, which I'd expect to be to
the left of the list item and hanging off the edge, as any other list
marker. For some odd reason, Firefox and IE seem to apply the list
marker to the enclosed anchor/link!

I suggest a quick fix:

1. Add "float: right;" to the rule for li.backquestions
2. Add "overflow: hidden;" to a rule that targets the enclosing UL.

Example:
#answers > ul { overflow: hidden; }

This second step will enclose the floated LI, preserving the spacing.

HTH
--
Cordially,
David
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background image not displaying in correct position

[Ghodmode]

On Fri, Mar 2, 2012 at 3:36 AM, Erica Cavin  wrote:
> On this page:  http://www.risingstarquilters.org/join_update.html
>
> the small arrow that should appear next to "Back to questions" displays
> far to the left in Chrome and Safari.  It displays properly in Firefox
> and IE.  Any thoughts as to why?

It looks like IE9 displays the same as Chrome and Safari, but IE8 displays the
same as Firefox

For starters, it's not a background-image.  It's a list-style-image, so the
background-position property doesn't have any affect.

The list-item is as wide as the block and the text is aligned to the right.  It
looks like Firefox puts the bullet to the left of the text and the others put it
to the left of the block.

I hate to say it, but I think Firefox's presentation is wrong in this case.

The spec says "The marker box is outside the principal block box.".  Since the
left of the list item's principal block box is all the way over on the left,
that's where the bullet should be.

For the desired effect, you should set list-style-position:inside.  This will
have no effect in Firefox, but the others will render the bullet "as the first
inline box in the principal block box" as defined in the spec.

Ref: http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-position

--
Vince Aggrippino
Ghodmode Development
http://www.ghodmode.com


> CSS here:  http://www.risingstarquilters.org/styles2.css
>
> Thanks!
>
> Erica
> --
> Attic Windows Web Design
> http://atticwindowswebdesign.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] Background image not displaying in correct position

[Erica Cavin]

On this page:  http://www.risingstarquilters.org/join_update.html  

the small arrow that should appear next to "Back to questions" displays
far to the left in Chrome and Safari.  It displays properly in Firefox
and IE.  Any thoughts as to why? 

CSS here:  http://www.risingstarquilters.org/styles2.css

Thanks! 

Erica
-- 
Attic Windows Web Design
http://atticwindowswebdesign.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] background color changes with comment on blog

[Eva Moon]

I tracked it down to a plug in. Thanks anyway!

Eva

On Dec 8, 2011, at 12:23 PM, Eva Moon wrote:

> I can't track this down!
> 
> My blog is here: http://evamoon.net/blog/
> 
> It's fine except that when someone leaves a comment on a post, the background 
> of the whole post area goes white. I can't figure out where this is coming 
> from!
> 
> Here's an example: http://evamoon.net/blog/2011/09/04/clamhenge/
> 
> Thank you!
> 
> Eva
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] background color changes with comment on blog

[Eva Moon]

I can't track this down!

My blog is here: http://evamoon.net/blog/

It's fine except that when someone leaves a comment on a post, the background 
of the whole post area goes white. I can't figure out where this is coming from!

Here's an example: http://evamoon.net/blog/2011/09/04/clamhenge/

Thank you!

Eva
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background fix...

[Michael Beaudoin]

On Nov 3, 2011, at 9:38 PM, Ed Goodson wrote:

I am working up a site that has different backgrounds/color per   
section. I have a background here that runs short. What am I  
missing  to get the color to fill the rest? Do I have to put the  
container in  another container? Check here: http://www.sdainteractive.com/davinci_test/school_camp.html



Answer: I think you can actually just get rid of height and width in  
#bkgdSchool

#containerSchool

Ed



Sorry, been out of the loop for a few days.

These worked great.

Thanks again for everyone's 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] background fix...

[Ed Goodson]

I am working up a site that has different backgrounds/color per  section. 
I have a background here that runs short. What am I missing  to get the 
color to fill the rest? Do I have to put the container in  another 
container? Check here: 
http://www.sdainteractive.com/davinci_test/school_camp.html



Answer: I think you can actually just get rid of height and width in 
#bkgdSchool

#containerSchool

Ed

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background fix...

[Ed Goodson]

I am working up a site that has different backgrounds/color per  
section. I have a background here that runs short. What am I missing  
to get the color to fill the rest? Do I have to put the container in  
another container?


Check here: http://www.sdainteractive.com/davinci_test/school_camp.html



Hi Michael
This seems to work, cheers Ed


#containerSchool {
   background-image: url("images/davinci_bkgd_school.gif");
   height: 1000px;
   margin: auto;
   width: 100%;
}

#containerSchool {
   background-image: url("images/davinci_bkgd_school.gif");
   height: 100%;
   margin: auto;
   width: 100%;
}




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background fix...

[Michael Beaudoin]

Hi all.

I am working up a site that has different backgrounds/color per  
section. I have a background here that runs short. What am I missing  
to get the color to fill the rest? Do I have to put the container in  
another container?


Check here: http://www.sdainteractive.com/davinci_test/school_camp.html

Thanks,
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] background-image needs to display when there is no content

[Norman Fournier]

Thank you Phillipe! that worked beautifully.

Norman

On 2011-09-12, at 6:00 PM, Philippe Wittenbergh wrote:

> 
> On Sep 13, 2011, at 5:50 AM, Norman Fournier wrote:
> 
>>> Here is the affected page with the background image broken:
>>> http://www.thehalcyoncore.com/thc-audios.html
>> 
>> Thanks for looking at that for me. What I would like is for the paint drips 
>> to display when there is no text or graphic content in the main div, not to 
>> remove them entirely. With a transparent.gif at 10px wide by 400px high the 
>> drips display but I don't want to use a transparent.gif at all.
> 
> Your image is attached to div#main. That div is empty and has a height of 
> 10px or so (padding-top: 10px) - you specify a height of 100% but that 
> doesn't work as percentage height on static elements only works if the parent 
> element has a know height.
> 
> If you specify a min-height for that div, your paint-drips will display 
> correctly.
> 
> #main { min-height: 500px; } /* adjust to taste or need*/
> 
> 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/

---
www: http://www.normanfournier.com
facebook: http://www.facebook.com/normanfournierdotcom
linkedin: http://www.linkedin.com/profile/view?id=18127460
youtube: http://www.youtube.com/user/normanfournier


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] background-image needs to display when there is no content

[Philippe Wittenbergh]

On Sep 13, 2011, at 5:50 AM, Norman Fournier wrote:

>> Here is the affected page with the background image broken:
>> http://www.thehalcyoncore.com/thc-audios.html
> 
> Thanks for looking at that for me. What I would like is for the paint drips 
> to display when there is no text or graphic content in the main div, not to 
> remove them entirely. With a transparent.gif at 10px wide by 400px high the 
> drips display but I don't want to use a transparent.gif at all.

Your image is attached to div#main. That div is empty and has a height of 10px 
or so (padding-top: 10px) - you specify a height of 100% but that doesn't work 
as percentage height on static elements only works if the parent element has a 
know height.

If you specify a min-height for that div, your paint-drips will display 
correctly.

#main { min-height: 500px; } /* adjust to taste or need*/

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/