Re: [css-d] Rendering issues
On Monday, June 23, 2014, Jon Reece wrote: > On Mon, Jun 23, 2014 at 8:32 PM, Philippe Wittenbergh > > wrote: > > > Le 24 juin 2014 à 04:05, Tom Livingston > > a écrit : > > > > > We found an errant z-index which was putting the content > > > behind the blue background wrapper. :-P > > > > > > Le 24 juin 2014 à 04:08, Norman Fournier > a > > écrit : > > > > > ...in that case it is interesting to see which browsers rendered that > > z-index property correctly... > > > > Most modern browsers do. However there are more properties that affect > the > > stacking / layering of content, independently of z-index. Opacity comes > to > > mind, as do some of the CSS-transform properties (and in the latter case, > > this *may* vary between browsers…). > > > > > For those interested here's a good explanation of z-index stacking order > and context, prefaced with a challenge to solve a problem rooted in what > Philippe mentioned about other properties effects on positioning. > > http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ > > Learn something new everyday! -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Mon, Jun 23, 2014 at 8:32 PM, Philippe Wittenbergh wrote: > Le 24 juin 2014 à 04:05, Tom Livingston a écrit : > > > We found an errant z-index which was putting the content > > behind the blue background wrapper. :-P > > > Le 24 juin 2014 à 04:08, Norman Fournier a > écrit : > > > ...in that case it is interesting to see which browsers rendered that > z-index property correctly... > > Most modern browsers do. However there are more properties that affect the > stacking / layering of content, independently of z-index. Opacity comes to > mind, as do some of the CSS-transform properties (and in the latter case, > this *may* vary between browsers…). > For those interested here's a good explanation of z-index stacking order and context, prefaced with a challenge to solve a problem rooted in what Philippe mentioned about other properties effects on positioning. http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ -- 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] Rendering issues
On Monday, June 23, 2014, Philippe Wittenbergh wrote: > > Le 24 juin 2014 à 04:05, Tom Livingston > > a écrit : > > > We found an errant z-index which was putting the content > > behind the blue background wrapper. :-P > > > Le 24 juin 2014 à 04:08, Norman Fournier > a écrit : > > > ...in that case it is interesting to see which browsers rendered that > z-index property correctly... > > Most modern browsers do. However there are more properties that affect the > stacking / layering of content, independently of z-index. Opacity comes to > mind, as do some of the CSS-transform properties (and in the latter case, > this *may* vary between browsers…). > > > Philippe > -- > Philippe Wittenbergh > http://l-c-n.com > > > There are transform going on so perhaps that's what was causing the odd behavior (odd as far as I'm concerned)... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
Le 24 juin 2014 à 04:05, Tom Livingston a écrit : > We found an errant z-index which was putting the content > behind the blue background wrapper. :-P Le 24 juin 2014 à 04:08, Norman Fournier a écrit : > ...in that case it is interesting to see which browsers rendered that z-index > property correctly... Most modern browsers do. However there are more properties that affect the stacking / layering of content, independently of z-index. Opacity comes to mind, as do some of the CSS-transform properties (and in the latter case, this *may* vary between browsers…). Philippe -- Philippe Wittenbergh http://l-c-n.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
On Monday, June 23, 2014, Rick Gordon wrote:
> I didn't search too deeply, but I suspect it's because the element
> is classed as js, and there are a significant number of styles in the CSS
> that are like this:
>
> .js .inner{background:#1d335c;left:0;width:175%}
>
> This is a commonly used approach, in which is initially classed as
> .no-js, and then a script is run to change the class to .js. If it fails,
> you can assume that JavaScript is not enabled, and style with the
> possibility of either .js or .no-js as an ancestor.
>
> Rick Gordon
>
>
> On 6/23/14 12:10 PM, "Tom Livingston" wrote:
>
>
Understood. But turning off js did not allow me to replicate the issue.
Regardless, you would think if a negative z index put the content behind a
solid blue div with js enabled - as is the case with the rule in the CSS -
why did anyone see any content at any time!?!?
Like I said, odd one.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
I didn't search too deeply, but I suspect it's because the
element is classed as js, and there are a significant number of styles
in the CSS that are like this:
.js .inner{background:#1d335c;left:0;width:175%}
This is a commonly used approach, in which is initially classed
as .no-js, and then a script is run to change the class to .js. If it
fails, you can assume that JavaScript is not enabled, and style with the
possibility of either .js or .no-js as an ancestor.
Rick Gordon
On 6/23/14 12:10 PM, "Tom Livingston" wrote:
On Mon, Jun 23, 2014 at 3:08 PM, Norman Fournier
I don't understand why any browser showed any content at all.
The selector needed JS to be active, but I tried my browser with and
without JS and I still saw the content...
Odd one.
___
RICK GORDON
EMERALD VALLEY GRAPHICS AND CONSULTING
___
WWW: http://www.shelterpub.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] Rendering issues
On Mon, Jun 23, 2014 at 3:08 PM, Norman Fournier wrote: > ...in that case it is interesting to see which browsers rendered that z-index > property correctly... > Agreed. I don't understand why any browser showed any content at all. The selector needed JS to be active, but I tried my browser with and without JS and I still saw the content... Odd one. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
...in that case it is interesting to see which browsers rendered that z-index property correctly... On 2014-06-23, at 1:05 PM, Tom Livingston wrote: > Solved. > > Thanks all. We found an errant z-index which was putting the content > behind the blue background wrapper. :-P > > On Mon, Jun 23, 2014 at 10:09 AM, Hahnel, Fred (DET-MRM) > wrote: >> That screen flashes then the normal page renders on my Chrome 35.0.1916.153 >> on a laptop >> >> -Original Message- >> From: css-d-boun...@lists.css-discuss.org >> [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston >> Sent: Friday, June 20, 2014 2:43 PM >> To: CSS Discussion Group >> Subject: [css-d] Rendering issues >> >> List, >> >> We've had a report of a rendering issue on this site: >> >> http://www.mlmic.com >> >> The user saw a blank, blue screen ( a brand color) in current Chrome and >> Opera (Mac, I believe). Also, Google Webmaster Tools "Fetch As Google" also >> renders it blank blue. We have not been able to recreate the issue except >> for in Google Webmaster Tools and that doesn't give much help in >> troubleshooting it. >> >> Do any of you see this issue, and if so, can you help track it down? >> >> Thanks in advance... >> >> >> -- >> >> Tom Livingston | Senior Front-End Developer | Media Logic | >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- >> http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
Solved. Thanks all. We found an errant z-index which was putting the content behind the blue background wrapper. :-P On Mon, Jun 23, 2014 at 10:09 AM, Hahnel, Fred (DET-MRM) wrote: > That screen flashes then the normal page renders on my Chrome 35.0.1916.153 > on a laptop > > -Original Message- > From: css-d-boun...@lists.css-discuss.org > [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston > Sent: Friday, June 20, 2014 2:43 PM > To: CSS Discussion Group > Subject: [css-d] Rendering issues > > List, > > We've had a report of a rendering issue on this site: > > http://www.mlmic.com > > The user saw a blank, blue screen ( a brand color) in current Chrome and > Opera (Mac, I believe). Also, Google Webmaster Tools "Fetch As Google" also > renders it blank blue. We have not been able to recreate the issue except for > in Google Webmaster Tools and that doesn't give much help in troubleshooting > it. > > Do any of you see this issue, and if so, can you help track it down? > > Thanks in advance... > > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- > http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rendering issues
That screen flashes then the normal page renders on my Chrome 35.0.1916.153 on a laptop -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tom Livingston Sent: Friday, June 20, 2014 2:43 PM To: CSS Discussion Group Subject: [css-d] Rendering issues List, We've had a report of a rendering issue on this site: http://www.mlmic.com The user saw a blank, blue screen ( a brand color) in current Chrome and Opera (Mac, I believe). Also, Google Webmaster Tools "Fetch As Google" also renders it blank blue. We have not been able to recreate the issue except for in Google Webmaster Tools and that doesn't give much help in troubleshooting it. Do any of you see this issue, and if so, can you help track it down? Thanks in advance... -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
