Re: [css-d] Container Div
On Tue, Oct 1, 2013 at 1:38 PM, MiB wrote: (snip) > This is still only of value when the height is known beforehand so is of > limited value. What you normally want is rules that always center content > vertically regardless of the actual height that needs to vary with content. > __ It's always going to depend on the context surrounding the centered div. This is a viable solution under the right circumstances. -- 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] Container Div
Did you try David Hucklesby's solution of changing the margin to
margin: auto; instead of margin: 0 auto; ?
On Tue, Oct 1, 2013 at 1:29 PM, MiB wrote:
>
> 1 okt 2013 15.10 Chris Rockwell:
>
>> If absolute positioning is an option, a simple, clean way is:
>>
>> .centeredElement {
>> position: absolute;
>> margin: 0 auto;
>> left: 0;
>> right: 0;
>> top: 0;
>> bottom: 0;
>> height: 300px;
>> width: 300px;
>> }
>
>
> Ok, so now I tried this with only the rules above and only one element in a
> HTML5 document, a div with the class "centeredElement" and it's not working
> in Firefox 23 either. The div is simply rendered at the top of the page at 0
> position and goes exactly 300px down. Perhaps not very surprising.
>
> A similar technique that does work is to replace with these rules:
>
> margin-top:-150px;
> top: 50%;
>
> which works fine if the height isn't unknown. Usually height of an element
> isn't known so this is still of limited value.
>
> Clearly you left out something in your first post as your online example does
> seem to center vertically in Firefox. Please analyze this example of yours
> and repost what you think is the real solution.
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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] Where do you cut-off your browser support?
I believe they meant only external users on the stats. Sent from my iPhone > On Sep 22, 2013, at 11:13 PM, "Robert A. Rosenberg" > wrote: > > At 10:51 -0400 on 09/22/2013, Tom Livingston wrote about Re: [css-d] Where do > you cut-off your browser support?: > >> But >> we recently had a client ask (tell) us to support IE7 as that's what >> they use internally still and, according to their own stats, have a >> significant user base on 7. > > Of course if they use it internally, they are going to show a "significant > user base on 7" - or are they talking about only external users and not > counting their internal users? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Where do you cut-off your browser support?
Our basic policy where I work is for support of IE8 and up for IE. But we recently had a client ask (tell) us to support IE7 as that's what they use internally still and, according to their own stats, have a significant user base on 7. I'm leaning towards "we still use it so you have to support it" as the real reason, so there's this type of situation in the mix as well. On Fri, Sep 20, 2013 at 11:25 PM, Chris Rockwell wrote: > This list has been incredibly useful to me, especially people pointing out > some flaws in things that I do. That led me to, tonight, pulling the IE > stats for the past year from Google Analytics: > > 10: 3.03% > 9: 22.05% > 8: 17.74% > 7: 2.03% > 6: 0.21% > > IE as a whole made up just over 45%. To put it into perspective, the site > had over 400,000 visitors in this time frame. 2% is over 9000 visitors! > > My question is, how would you all approach this? Right now I'm thinking IE > 7 can't be ignored, but I'd have to consider time/value when deciding what > is acceptable. > > Thoughts? > > -- > 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/ -- 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-d] Fwd: center container with variable-width children
List,
I had sent this to Chris Rockwell, but wanted to ask the list as well.
I was trying to implement Chris' method mentioned below and it isnt
working in 7, 8 and 9. The link is not on top of the other elements in
the wrapper. The HREF works if you put your cursor BETWEEN the other
elements, so it's in the background. I'm drawing a blank on it. Any
thoughts? Working fine in Mac Chrome/FF (latest).
Foo
View
SCSS Styles:
.entry{
position: relative;
width: 133px;
margin-right: 45px;
text-align: center;
text-transform: uppercase;
float: left;
cursor: pointer;
.thumbwrap{
margin-bottom: 8px;
@include box-shadow(#000 2px 2px 5px);
border: 2px solid $grey;
overflow: hidden;
img{
float: left;
}
}
p{
position: relative;
@include gotham-bold;
}
a{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -em;
z-index: 50;
}
&:last-of-type{
margin-right: 0;
}
&:hover p{
color: #fff;
}
&:hover .thumbwrap{
border: 2px solid #fff;
}
}
Thanks in advance.
On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston wrote:
> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell
> wrote:
>> is an inline element and cannot contain block level elements (such as
>> ).
>>
>> One way is:
>>
>> .container {
>> position: relative;
>> }
>> a {
>> display: block;
>> position: absolute;
>> left:0;
>> top: 0;
>> width: 100%;
>> height: 100%;
>> text-indent: -em;
>> z-index: 1 /* or higher if necessary */
>> }
>>
>>
>> Some content here
>> Link
>>
>>
>>
>
> This is nice. I'll have to remember this one.
>
> I will say though, that I have wrapped other elements such as div in
> an href with success in IE8+ and other "normal" browsers.
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
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] responsive video
div#content div appears to be over riding styles on .video-container
On Wed, Sep 18, 2013 at 4:40 PM, Ron Zisman wrote:
> guys, thanks, but i'm pretty thick
> i've tried a few times with no success.
>
> here's the page: http://decal-bone.com/lab_stories.html
>
> the video lives in the center column under the text
>
> html for the vid:
>
>
> src="//www.youtube.com/embed/wbIe9tXo5wM" frameborder="0"
> allowfullscreen="">
>
>
> css in the style sheet:
>
> .video-container {
> position: relative;
> padding-bottom: 56.25%;
> padding-top: 30px; height: 0; overflow: hidden;
> }
>
> .video-container iframe,
> .video-container object,
> .video-container embed {
> position: absolute;
> top: 0;
> left: 0;
> width: 100%;
> height: 100%;
> }
>
>
> don't see where i'm messing up. insight appreciated
>
> ron
>
>
>
> On Sep 18, 2013, at 3:10 PM, Chris Rockwell wrote:
>
> Fitvids is a good solution if you're not worried about whether JavaScript is
> available and/or you are trying to retrofit an old site with lots of videos
> and don't want to mess with the markup. It just automates Thierry's
> solution (i.e., it wraps your tags and applies necessary styles)
>
>
> On Wed, Sep 18, 2013 at 2:53 PM, Nate Turnage wrote:
>>
>> I know this list is CSS-centered, but you could always use:
>> http://fitvidsjs.com/
>>
>>
>> On Wed, Sep 18, 2013 at 12:43 PM, Tom Livingston wrote:
>>>
>>> I'm not seeing the css in the head as having any effect on the video
>>> or it's wrapper for some reason. FireBug in FF 23.0.1.
>>>
>>> On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell
>>> wrote:
>>> > I use the last solution here:
>>> >
>>> > http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
>>> > which
>>> > is taken from Thierry Koblentz' solution here:
>>> > http://alistapart.com/article/creating-intrinsic-ratios-for-video
>>> >
>>> >
>>> > On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman wrote:
>>> >
>>> >> http://decal-bone.com/lab_stories.html
>>> >>
>>> >> i'm trying to embed a video from youtube and make it responsive. i'd
>>> >> like
>>> >> to make 100% of the center column; but i'm getting a miniature
>>> >> version.
>>> >>
>>> >> css is in the head of the document.
>>> >>
>>> >> any help would be appreciated
>>> >>
>>> >> --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/
>>> >>
>>> >
>>> >
>>> >
>>> > --
>>> > 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/
>>>
>>>
>>>
>>> --
>>>
>>> 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/
>>
>>
>
>
>
> --
> Chris Rockwell
>
>
--
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] responsive video
I'm not seeing the css in the head as having any effect on the video or it's wrapper for some reason. FireBug in FF 23.0.1. On Wed, Sep 18, 2013 at 1:41 PM, Chris Rockwell wrote: > I use the last solution here: > http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php which > is taken from Thierry Koblentz' solution here: > http://alistapart.com/article/creating-intrinsic-ratios-for-video > > > On Wed, Sep 18, 2013 at 1:37 PM, Ron Zisman wrote: > >> http://decal-bone.com/lab_stories.html >> >> i'm trying to embed a video from youtube and make it responsive. i'd like >> to make 100% of the center column; but i'm getting a miniature version. >> >> css is in the head of the document. >> >> any help would be appreciated >> >> --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/ >> > > > > -- > 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/ -- 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] center container with variable-width children
On Tuesday, September 17, 2013, David Hucklesby wrote: > On 9/17/13 9:02 AM, Tom Livingston wrote: > >> On Tuesday, September 17, 2013, Chris Rockwell wrote: >> >> Seems to work for me. At full width I get a navigation with hover, at >>> narrow it's just stacked navigation items (no hover action). >>> >>> Seems like a nice responsive site Tom, good work. >>> >>> >>> On Sun, Sep 15, 2013 at 1:08 PM, Tom Livingston >>> >>> >>>> wrote: >>>> >>> >>> Can you tell me the browser, version and OS you were using? I'd like to >>>> look into it. >>>> >>>> On Sat, Sep 14, 2013 at 9:10 PM, David Hucklesby >>>> >>> ');>> >>>> wrote: >>>> >>>>> On 9/14/13 9:30 AM, Tom Livingston wrote: >>>>> >>>>>> >>>>>> Fair point. >>>>>> >>>>>> This one works with JS disabled: >>>>>> >>>>>> http://www.discovermvp.com/**employers/<http://www.discovermvp.com/employers/> >>>>>> >>>>>> On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby >>>>>> >>>>> 'huckle...@gmail.com');> >>>>>> >>>>> >>>>> wrote: >>>>>> >>>>>>> >>>>>>> On 9/14/13 5:30 AM, Tom Livingston wrote: >>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> I personally wouldn't want the main function of my navigation, >>>>>>>> on a responsive site intended for many devices of varying >>>>>>>> ability, to be dependent on JS. Added effects, progressively >>>>>>>> enhanced, maybe, but >>>>>>>> >>>>>>> not >>>> >>>>> the main base function of navigating the site. >>>>>>>> >>>>>>>> >>>>>>> That raises an interesting question - how to make a drop-down or >>>>>>> >>>>>> flyout >>>> >>>>> menu accessible to keyboard and touchscreen users? Is there a >>>>>>> CSS-only solution? >>>>>>> >>>>>> >>>>> >>>>> Hmm. I can't get it to work even _without_ disabling JavaScript. ??? -- >>>>> Cordially, David >>>>> >>>>> >>> -- Chris Rockwell >>> >>> >> Thanks. However David's comment was about keyboard access to the nav which >> is lacking. >> >> I will say that activating the main nav buttons that have a drop down will >> take u to a page of links that are the same as the drop down. We did this >> as >> a 'just in case' safety net. >> >> >> > Thanks, Tom. Yes, the issue is access without a mouse. Your solution is > the one > I use, and think it is the best method, as there seems to be no "pure" CSS > solution. But I did not find a way to access the FAQs via the keyboard. ??? > -- > Cordially, > David > Thanks David. I'll take a look. -- 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] website dimensions
On Tuesday, September 17, 2013, John wrote: > On 9/16/13 7:01 PM, JAY TANNA wrote: > >> Dreamweaver's standard window sizes for Fluid Grid Layout is as follows: >> >> <http://content.screencast.**com/users/JT19560819/folders/** >> Jing/media/9a00744d-e655-4960-**9616-ddf7ca858a8b/2013-09-17_**0258.png<http://content.screencast.com/users/JT19560819/folders/Jing/media/9a00744d-e655-4960-9616-ddf7ca858a8b/2013-09-17_0258.png>> >> >> >> Hope this helps. >> > Jay...that does look very helpful, however the dims given in that > chart...are those the actual pixels we get to work with? IOW, if we set a > break at, say, 480 wide, do we actually get 480 pixels of width, or is some > of that consumed by browser or OS chrome? > > I don't have a smart phone or iPad, so I'm shooting blind on this topic. > > Thank you > > John > __**__**__ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/**mailman/listinfo/css-d<http://www.css-discuss.org/mailman/listinfo/css-d> > List wiki/FAQ -- > http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/> > List policies -- > http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html> > Supported by evolt.org -- > http://www.evolt.org/help_**support_evolt/<http://www.evolt.org/help_support_evolt/> > In my experience, yes it is 320 or 480 etc. You can test this yourself. Make a div 320 wide, and see what fits. -- 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] center container with variable-width children
On Tuesday, September 17, 2013, Chris Rockwell wrote: > Seems to work for me. At full width I get a navigation with hover, at > narrow it's just stacked navigation items (no hover action). > > Seems like a nice responsive site Tom, good work. > > > On Sun, Sep 15, 2013 at 1:08 PM, Tom Livingston > > > wrote: > >> Can you tell me the browser, version and OS you were using? I'd like >> to look into it. >> >> On Sat, Sep 14, 2013 at 9:10 PM, David Hucklesby >> > >> wrote: >> > On 9/14/13 9:30 AM, Tom Livingston wrote: >> >> >> >> Fair point. >> >> >> >> This one works with JS disabled: >> >> >> >> http://www.discovermvp.com/employers/ >> >> >> >> On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby >> >> >> > >> >> wrote: >> >>> >> >>> On 9/14/13 5:30 AM, Tom Livingston wrote: >> >>>> >> >>>> >> >>>> I personally wouldn't want the main function of my navigation, on a >> >>>> responsive site intended for many devices of varying ability, to be >> >>>> dependent on JS. Added effects, progressively enhanced, maybe, but >> not >> >>>> the >> >>>> main base function of navigating the site. >> >>>> >> >>> >> >>> That raises an interesting question - how to make a drop-down or >> flyout >> >>> menu >> >>> accessible to keyboard and touchscreen users? Is there a CSS-only >> >>> solution? >> > >> > >> > Hmm. I can't get it to work even _without_ disabling JavaScript. ??? >> > -- >> > Cordially, >> > David >> > >> >> >> >> -- >> >> 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 > 'css-d@lists.css-discuss.org');>] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- 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 > Thanks. However David's comment was about keyboard access to the nav which is lacking. I will say that activating the main nav buttons that have a drop down will take u to a page of links that are the same as the drop down. We did this as a 'just in case' safety net. -- 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] center container with variable-width children
Can you tell me the browser, version and OS you were using? I'd like to look into it. On Sat, Sep 14, 2013 at 9:10 PM, David Hucklesby wrote: > On 9/14/13 9:30 AM, Tom Livingston wrote: >> >> Fair point. >> >> This one works with JS disabled: >> >> http://www.discovermvp.com/employers/ >> >> On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby >> wrote: >>> >>> On 9/14/13 5:30 AM, Tom Livingston wrote: >>>> >>>> >>>> I personally wouldn't want the main function of my navigation, on a >>>> responsive site intended for many devices of varying ability, to be >>>> dependent on JS. Added effects, progressively enhanced, maybe, but not >>>> the >>>> main base function of navigating the site. >>>> >>> >>> That raises an interesting question - how to make a drop-down or flyout >>> menu >>> accessible to keyboard and touchscreen users? Is there a CSS-only >>> solution? > > > Hmm. I can't get it to work even _without_ disabling JavaScript. ??? > -- > Cordially, > David > -- 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] center container with variable-width children
What browser/version? On Saturday, September 14, 2013, David Hucklesby wrote: > On 9/14/13 9:30 AM, Tom Livingston wrote: > >> Fair point. >> >> This one works with JS disabled: >> >> http://www.discovermvp.com/**employers/<http://www.discovermvp.com/employers/> >> >> On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby >> wrote: >> >>> On 9/14/13 5:30 AM, Tom Livingston wrote: >>> >>>> >>>> I personally wouldn't want the main function of my navigation, on a >>>> responsive site intended for many devices of varying ability, to be >>>> dependent on JS. Added effects, progressively enhanced, maybe, but not >>>> the >>>> main base function of navigating the site. >>>> >>>> >>> That raises an interesting question - how to make a drop-down or flyout >>> menu >>> accessible to keyboard and touchscreen users? Is there a CSS-only >>> solution? >>> >> > Hmm. I can't get it to work even _without_ disabling JavaScript. ??? > -- > Cordially, > David > > -- 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] center container with variable-width children
Nice Micky. I'll have to dig into this when I get a chance. Thanks! On Sat, Sep 14, 2013 at 4:08 PM, Micky Hulse wrote: > For inline style approaches using preprocessors, there's: > > http://jakearchibald.github.io/sass-ie/ > > and: > > https://github.com/himedlooff/media-query-to-type > > For the less technique, there's a discussion here with some details: > > https://github.com/himedlooff/media-query-to-type/issues/1 > > Just saw that @himedlooff linked to: > > https://github.com/jtangelder/grunt-stripmq > > Nice! > > I personally prefer the inline style of writing MQs. > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] center container with variable-width children
To clarify, I'm delivering desktop only to old IE.
On Sat, Sep 14, 2013 at 3:59 PM, Tom Livingston wrote:
> I prefer to deliver desktop only to older browsers, so your "inline"
> MQs would make this more difficult as you would need to make/write a
> separate sheet to pull this off. While my method uses a second sheet
> for IE, i'm not actually writing another sheet because I am just
> importing my main sheets a second time. No extra work.
>
> I've picked up a project that someone else did, and they used the
> method you describe. I found it harder to work with. But that's just
> me. It was also desktop down as opposed to mobile first, which REALLY
> messed with my head.
>
> On Sat, Sep 14, 2013 at 3:54 PM, Chris Rockwell
> wrote:
>> Touche`…
>>
>> Id be interested in learning more about your workflow Tom (and anyone else
>> that cares to discuss). I'm torn between a method similar to what you
>> descibed and doing something with sass where you media queries are "inline"
>> with all CSS, like:
>>
>> body {
>> ...declarations
>> @media min-width {}
>> }
>>
>> Recently I've been leaning more towards this way because it gives me the
>> ability to see the whole picture without moving from file to file. However,
>> I'm constantly questioning whether its the best way or not.
>>
>> On Sep 14, 2013 3:46 PM, "Tom Livingston" wrote:
>>>
>>> At it's simplest, it's a page of text, but who's gonna really want
>>> just that! ;-)
>>>
>>> On Sat, Sep 14, 2013 at 3:33 PM, Chris Rockwell
>>> wrote:
>>> > Karl,
>>> >
>>> > Responsiveness should definitely not rely on JavaScript. At its simplest
>>> > form, responsiveness could be floated or inline-block elements set with
>>> > widths that are relative (e.g not pixel). Then again, with extensive
>>> > media
>>> > queries you could use fixed widths.
>>> > On Sep 14, 2013 3:22 PM, "Karl DeSaulniers"
>>> > wrote:
>>> >
>>> >> @Tom
>>> >> Thanks for the response. So how does it react with say IE7, safari 1,
>>> >> firefox 3, etc?
>>> >> Or javascript disabled browsers? I guess my point is that to have a
>>> >> responsive website, "normally" the responsiveness is dependent on a
>>> >> javascript framework, like bootstrap for example. No javascript no
>>> >> responsive.
>>> >>
>>> >> Hence the navigation wouldn't matter if it relied on javascript or not
>>> >> because the basis of your website does. The responsiveness.
>>> >> Unless I am just totally out of the loop (this is not an impossible
>>> >> assumption =) and there is a non-javascript responsive design... ?
>>> >> If so, I am all ears/eyes.
>>> >>
>>> >> Best,
>>> >>
>>> >> Karl DeSaulniers
>>> >> Design Drumm
>>> >> http://designdrumm.com
>>> >>
>>> >>
>>> >>
>>> >> On Sep 14, 2013, at 2:07 PM, Tom Livingston wrote:
>>> >>
>>> >> > The responsiveness does work with IE9 and above as well as the usual
>>> >> > good browsers. Carousels and the like won't, obviously.
>>> >> >
>>> >> > On Sat, Sep 14, 2013 at 2:54 PM, Karl DeSaulniers
>>> >> >
>>> >> wrote:
>>> >> >> @Tom: Does your responsive site work with javascript disabled?
>>> >> >> Is it responsive without it?
>>> >> >>
>>> >> >> Best,
>>> >> >>
>>> >> >> Karl DeSaulniers
>>> >> >> Design Drumm
>>> >> >> http://designdrumm.com
>>> >> >>
>>> >> >>
>>> >> >>
>>> >> >> On Sep 14, 2013, at 10:36 AM, Philip Taylor wrote:
>>> >> >>
>>> >> >>>
>>> >> >>>
>>> >> >>> Tom Livingston wrote:
>>> >> >>>
>>> >> >>>> I personally wouldn't want the main function of my navigation, on
>>> >> >>>> a
>>> >> >>>> responsive site intended for many devices of varying ability, to
>>> >> >>>> be
>>> >> >>>>
Re: [css-d] center container with variable-width children
I prefer to deliver desktop only to older browsers, so your "inline"
MQs would make this more difficult as you would need to make/write a
separate sheet to pull this off. While my method uses a second sheet
for IE, i'm not actually writing another sheet because I am just
importing my main sheets a second time. No extra work.
I've picked up a project that someone else did, and they used the
method you describe. I found it harder to work with. But that's just
me. It was also desktop down as opposed to mobile first, which REALLY
messed with my head.
On Sat, Sep 14, 2013 at 3:54 PM, Chris Rockwell wrote:
> Touche`…
>
> Id be interested in learning more about your workflow Tom (and anyone else
> that cares to discuss). I'm torn between a method similar to what you
> descibed and doing something with sass where you media queries are "inline"
> with all CSS, like:
>
> body {
> ...declarations
> @media min-width {}
> }
>
> Recently I've been leaning more towards this way because it gives me the
> ability to see the whole picture without moving from file to file. However,
> I'm constantly questioning whether its the best way or not.
>
> On Sep 14, 2013 3:46 PM, "Tom Livingston" wrote:
>>
>> At it's simplest, it's a page of text, but who's gonna really want
>> just that! ;-)
>>
>> On Sat, Sep 14, 2013 at 3:33 PM, Chris Rockwell
>> wrote:
>> > Karl,
>> >
>> > Responsiveness should definitely not rely on JavaScript. At its simplest
>> > form, responsiveness could be floated or inline-block elements set with
>> > widths that are relative (e.g not pixel). Then again, with extensive
>> > media
>> > queries you could use fixed widths.
>> > On Sep 14, 2013 3:22 PM, "Karl DeSaulniers"
>> > wrote:
>> >
>> >> @Tom
>> >> Thanks for the response. So how does it react with say IE7, safari 1,
>> >> firefox 3, etc?
>> >> Or javascript disabled browsers? I guess my point is that to have a
>> >> responsive website, "normally" the responsiveness is dependent on a
>> >> javascript framework, like bootstrap for example. No javascript no
>> >> responsive.
>> >>
>> >> Hence the navigation wouldn't matter if it relied on javascript or not
>> >> because the basis of your website does. The responsiveness.
>> >> Unless I am just totally out of the loop (this is not an impossible
>> >> assumption =) and there is a non-javascript responsive design... ?
>> >> If so, I am all ears/eyes.
>> >>
>> >> Best,
>> >>
>> >> Karl DeSaulniers
>> >> Design Drumm
>> >> http://designdrumm.com
>> >>
>> >>
>> >>
>> >> On Sep 14, 2013, at 2:07 PM, Tom Livingston wrote:
>> >>
>> >> > The responsiveness does work with IE9 and above as well as the usual
>> >> > good browsers. Carousels and the like won't, obviously.
>> >> >
>> >> > On Sat, Sep 14, 2013 at 2:54 PM, Karl DeSaulniers
>> >> >
>> >> wrote:
>> >> >> @Tom: Does your responsive site work with javascript disabled?
>> >> >> Is it responsive without it?
>> >> >>
>> >> >> Best,
>> >> >>
>> >> >> Karl DeSaulniers
>> >> >> Design Drumm
>> >> >> http://designdrumm.com
>> >> >>
>> >> >>
>> >> >>
>> >> >> On Sep 14, 2013, at 10:36 AM, Philip Taylor wrote:
>> >> >>
>> >> >>>
>> >> >>>
>> >> >>> Tom Livingston wrote:
>> >> >>>
>> >> >>>> I personally wouldn't want the main function of my navigation, on
>> >> >>>> a
>> >> >>>> responsive site intended for many devices of varying ability, to
>> >> >>>> be
>> >> >>>> dependent on JS. Added effects, progressively enhanced, maybe, but
>> >> not the
>> >> >>>> main base function of navigating the site.
>> >> >>>
>> >> >>> 100% agreement.
>> >> >>> Philip Taylor
>> >> >>>
>> >> >>> __
>> >> >>> css
Re: [css-d] center container with variable-width children
At it's simplest, it's a page of text, but who's gonna really want just that! ;-) On Sat, Sep 14, 2013 at 3:33 PM, Chris Rockwell wrote: > Karl, > > Responsiveness should definitely not rely on JavaScript. At its simplest > form, responsiveness could be floated or inline-block elements set with > widths that are relative (e.g not pixel). Then again, with extensive media > queries you could use fixed widths. > On Sep 14, 2013 3:22 PM, "Karl DeSaulniers" wrote: > >> @Tom >> Thanks for the response. So how does it react with say IE7, safari 1, >> firefox 3, etc? >> Or javascript disabled browsers? I guess my point is that to have a >> responsive website, "normally" the responsiveness is dependent on a >> javascript framework, like bootstrap for example. No javascript no >> responsive. >> >> Hence the navigation wouldn't matter if it relied on javascript or not >> because the basis of your website does. The responsiveness. >> Unless I am just totally out of the loop (this is not an impossible >> assumption =) and there is a non-javascript responsive design... ? >> If so, I am all ears/eyes. >> >> Best, >> >> Karl DeSaulniers >> Design Drumm >> http://designdrumm.com >> >> >> >> On Sep 14, 2013, at 2:07 PM, Tom Livingston wrote: >> >> > The responsiveness does work with IE9 and above as well as the usual >> > good browsers. Carousels and the like won't, obviously. >> > >> > On Sat, Sep 14, 2013 at 2:54 PM, Karl DeSaulniers >> wrote: >> >> @Tom: Does your responsive site work with javascript disabled? >> >> Is it responsive without it? >> >> >> >> Best, >> >> >> >> Karl DeSaulniers >> >> Design Drumm >> >> http://designdrumm.com >> >> >> >> >> >> >> >> On Sep 14, 2013, at 10:36 AM, Philip Taylor wrote: >> >> >> >>> >> >>> >> >>> Tom Livingston wrote: >> >>> >> >>>> I personally wouldn't want the main function of my navigation, on a >> >>>> responsive site intended for many devices of varying ability, to be >> >>>> dependent on JS. Added effects, progressively enhanced, maybe, but >> not the >> >>>> main base function of navigating the site. >> >>> >> >>> 100% agreement. >> >>> 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/ >> > >> > >> > >> > -- >> > >> > 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/ >> > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] center container with variable-width children
I code mostly from scratch without a major framework. I guess you
could call my base "starting point" of a pre-made typical blank html
document a framework of sorts, but that's it. The responsiveness is
the result of a mobile-first approach using media queries. That's it.
There is a polyfill for IE 7/8 called respond.js (and maybe others)
but my experience with it wasn't that good. Generally I don't like
polyfilling everything under the sun and avoid them if possible, but
I'm not "in charge" where I work, so sometimes I get over ruled.
I use .scss and use it to import my different style sheets based on
break points, each one wrapped in an MQ, like this:
@media only screen and (min-width: 480px) {
@import "480.scss";
}
@media only screen and (min-width: 600px) {
@import "600.scss";
}
etc...
Then in a conditional comment for wrote:
> @Tom
> Thanks for the response. So how does it react with say IE7, safari 1, firefox
> 3, etc?
> Or javascript disabled browsers? I guess my point is that to have a
> responsive website, "normally" the responsiveness is dependent on a
> javascript framework, like bootstrap for example. No javascript no responsive.
>
> Hence the navigation wouldn't matter if it relied on javascript or not
> because the basis of your website does. The responsiveness.
> Unless I am just totally out of the loop (this is not an impossible
> assumption =) and there is a non-javascript responsive design... ?
> If so, I am all ears/eyes.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
> On Sep 14, 2013, at 2:07 PM, Tom Livingston wrote:
>
>> The responsiveness does work with IE9 and above as well as the usual
>> good browsers. Carousels and the like won't, obviously.
>>
>> On Sat, Sep 14, 2013 at 2:54 PM, Karl DeSaulniers
>> wrote:
>>> @Tom: Does your responsive site work with javascript disabled?
>>> Is it responsive without it?
>>>
>>> Best,
>>>
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>>
>>>
>>>
>>> On Sep 14, 2013, at 10:36 AM, Philip Taylor wrote:
>>>
>>>>
>>>>
>>>> Tom Livingston wrote:
>>>>
>>>>> I personally wouldn't want the main function of my navigation, on a
>>>>> responsive site intended for many devices of varying ability, to be
>>>>> dependent on JS. Added effects, progressively enhanced, maybe, but not the
>>>>> main base function of navigating the site.
>>>>
>>>> 100% agreement.
>>>> 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/
>>
>>
>>
>> --
>>
>> 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/
--
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] center container with variable-width children
The responsiveness does work with IE9 and above as well as the usual good browsers. Carousels and the like won't, obviously. On Sat, Sep 14, 2013 at 2:54 PM, Karl DeSaulniers wrote: > @Tom: Does your responsive site work with javascript disabled? > Is it responsive without it? > > Best, > > Karl DeSaulniers > Design Drumm > http://designdrumm.com > > > > On Sep 14, 2013, at 10:36 AM, Philip Taylor wrote: > >> >> >> Tom Livingston wrote: >> >>> I personally wouldn't want the main function of my navigation, on a >>> responsive site intended for many devices of varying ability, to be >>> dependent on JS. Added effects, progressively enhanced, maybe, but not the >>> main base function of navigating the site. >> >> 100% agreement. >> 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/ -- 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] center container with variable-width children
Fair point. This one works with JS disabled: http://www.discovermvp.com/employers/ On Sat, Sep 14, 2013 at 12:19 PM, David Hucklesby wrote: > On 9/14/13 5:30 AM, Tom Livingston wrote: >> >> I personally wouldn't want the main function of my navigation, on a >> responsive site intended for many devices of varying ability, to be >> dependent on JS. Added effects, progressively enhanced, maybe, but not the >> main base function of navigating the site. >> > > That raises an interesting question - how to make a drop-down or flyout menu > accessible to keyboard and touchscreen users? Is there a CSS-only solution? > -- > 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/ -- 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] center container with variable-width children
I personally wouldn't want the main function of my navigation, on a
responsive site intended for many devices of varying ability, to be
dependent on JS. Added effects, progressively enhanced, maybe, but not the
main base function of navigating the site.
On Saturday, September 14, 2013, Karl DeSaulniers wrote:
> Just curious, but why would you wrap a div in an anchor tag when you can
> just use the onclick handler?
>
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> http://www.w3.org/1999/xhtml";>
>
>
> Untitled Document
>
> function getURL() {
> window.location.href = "<a rel="nofollow" href="http://somewebsite.com"">http://somewebsite.com"</a>;;
> }
>
>
>
>
>
>
> Header
>
> This is some text!
>
>
>
>
> Everything in the div is linked and no tag throwing off any layout. :)
> Only thing I can think of is if you are building a site that does not use
> javascript for instance?
> But other then that...
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
> On Sep 13, 2013, at 1:39 PM, Chris Rockwell wrote:
>
> > Hey John - you understand correctly. Tom pointed that out earlier in the
> > thread.
> >
> >
> > On Fri, Sep 13, 2013 at 2:36 PM, john petroshius >wrote:
> >
> >> my understanding is that with HTML5 it IS now correct to wrap blocks
> with
> >> an tag...
> >>
> >> "...• Block-level links—Links can now be placed around block-level
> >> elements. So if you need to link an image, headline, and paragraph text
> to
> >> the same place you can do it with just one link.
> >> Here's an example. In HTML4 you had to write:
> >>
> >> Headline
> >>
> >>
> >> Text about the site. Read More...
> >>
> >> But with HTML5, you need only one link around the entire block of HTML:
> >>
> >>
> >> Headline
> >>
> >>
> >> Text about the site. Read More...
> >>
> >>
> >> ..."
> >>
> >> above code example from
> >> http://webdesign.about.com/od/html5tags/qt/html5-links.htm
> >>
> >> -john petroshius
> >>
> >>
> >> On Sep 12, 2013, at 2:28 PM, Chris Rockwell wrote:
> >>
> >>> Yeah, I don't think I've ever seen/notice it failing, I just prefer to
> do
> >>> it this way. Putting aside the fact that it's not correct, it just
> looks
> >>> funny, to me, to see an around a bunch of content :)
> >>>
> >>>
> >>> On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston
> >> wrote:
> >>>
> >>>> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell <
> >> ch...@chrisrockwell.com>
> >>>> wrote:
> >>>>> is an inline element and cannot contain block level elements
> (such
> >> as
> >>>>> ).
> >>>>>
> >>>>> One way is:
> >>>>>
> >>>>> .container {
> >>>>> position: relative;
> >>>>> }
> >>>>> a {
> >>>>> display: block;
> >>>>> position: absolute;
> >>>>> left:0;
> >>>>> top: 0;
> >>>>> width: 100%;
> >>>>> height: 100%;
> >>>>> text-indent: -em;
> >>>>> z-index: 1 /* or higher if necessary */
> >>>>> }
> >>>>>
> >>>>>
> >>>>> Some content here
> >>>>> Link
> >>>>>
> >>>>>
> >>>>>
> >>>>
> >>>> This is nice. I'll have to remember this one.
> >>>>
> >>>> I will say though, that I have wrapped other elements such as div in
> >>>> an href with success in IE8+ and other "normal" browsers.
> >>>>
> >>>> --
> >>>>
> >>>> Tom Livingston | Senior Front-End Developer | Media Logic |
> >>>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> >>>>
> >>>
> >>>
> >>>
> >>> --
> >>> 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/<<http://css-discuss.incutio.com/>
--
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] center container with variable-width children
On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell wrote:
> is an inline element and cannot contain block level elements (such as
> ).
>
> One way is:
>
> .container {
> position: relative;
> }
> a {
> display: block;
> position: absolute;
> left:0;
> top: 0;
> width: 100%;
> height: 100%;
> text-indent: -em;
> z-index: 1 /* or higher if necessary */
> }
>
>
> Some content here
> Link
>
>
>
This is nice. I'll have to remember this one.
I will say though, that I have wrapped other elements such as div in
an href with success in IE8+ and other "normal" browsers.
--
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] center container with variable-width children
Slightly aged article, but relevant...
http://html5doctor.com/block-level-links-in-html-5/
On Thu, Sep 12, 2013 at 3:28 PM, Chris Rockwell wrote:
> Yeah, I don't think I've ever seen/notice it failing, I just prefer to do it
> this way. Putting aside the fact that it's not correct, it just looks
> funny, to me, to see an around a bunch of content :)
>
>
> On Thu, Sep 12, 2013 at 3:24 PM, Tom Livingston wrote:
>>
>> On Thu, Sep 12, 2013 at 3:19 PM, Chris Rockwell
>> wrote:
>> > is an inline element and cannot contain block level elements (such
>> > as
>> > ).
>> >
>> > One way is:
>> >
>> > .container {
>> > position: relative;
>> > }
>> > a {
>> > display: block;
>> > position: absolute;
>> > left:0;
>> > top: 0;
>> > width: 100%;
>> > height: 100%;
>> > text-indent: -em;
>> > z-index: 1 /* or higher if necessary */
>> > }
>> >
>> >
>> > Some content here
>> > Link
>> >
>> >
>> >
>>
>> This is nice. I'll have to remember this one.
>>
>> I will say though, that I have wrapped other elements such as div in
>> an href with success in IE8+ and other "normal" browsers.
>>
>> --
>>
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
>
>
>
> --
> Chris Rockwell
--
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] center container with variable-width children
They are also floating left at narrow width. On Thu, Sep 12, 2013 at 2:04 PM, Chip at Caliber Communications wrote: > http://www.csbnow.com/mobile/index.html > > http://www.csbnow.com/mobile/css/style-mobile.css > > I am trying to get the grey boxes (Online Banking, Online Bill Pay, etc.) > to center on the page so that when the viewport gets too small to > accommodate 2 columns, the remaining single column is centered. Seems like > I must be missing something obvious, but I cannot see it. > > Thanks for any help... > > Chip > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] center container with variable-width children
Maybe add margin: 0 auto 0 auto; ? Just did a quick look... On Thu, Sep 12, 2013 at 2:04 PM, Chip at Caliber Communications wrote: > http://www.csbnow.com/mobile/index.html > > http://www.csbnow.com/mobile/css/style-mobile.css > > I am trying to get the grey boxes (Online Banking, Online Bill Pay, etc.) > to center on the page so that when the viewport gets too small to > accommodate 2 columns, the remaining single column is centered. Seems like > I must be missing something obvious, but I cannot see it. > > Thanks for any help... > > Chip > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] center container with variable-width children
Don't forget the good 'ol clearfix:
/* CLEARING */
/* For modern browsers */
.clear:before, .clear:after {content:""; display:block;}
.clear:after {clear:both;}
.clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */
On Thu, Sep 12, 2013 at 2:25 PM, Chris Rockwell wrote:
> Tom's suggestion may work as well, but you will need to fix your container.
> Due to all of the child elements being floated, you will need "height:
> 100%;overflow:auto" so that your container wraps the children
>
>
> On Thu, Sep 12, 2013 at 2:21 PM, Tom Livingston wrote:
>>
>> They are also floating left at narrow width.
>>
>> On Thu, Sep 12, 2013 at 2:04 PM, Chip at Caliber Communications
>> wrote:
>> > http://www.csbnow.com/mobile/index.html
>> >
>> > http://www.csbnow.com/mobile/css/style-mobile.css
>> >
>> > I am trying to get the grey boxes (Online Banking, Online Bill Pay,
>> > etc.)
>> > to center on the page so that when the viewport gets too small to
>> > accommodate 2 columns, the remaining single column is centered. Seems
>> > like
>> > I must be missing something obvious, but I cannot see it.
>> >
>> > Thanks for any help...
>> >
>> > Chip
>> > __
>> > css-discuss [css-d@lists.css-discuss.org]
>> > http://www.css-discuss.org/mailman/listinfo/css-d
>> > List wiki/FAQ -- 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/
>
>
>
>
> --
> Chris Rockwell
--
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] html email with css
Speak of the devil: https://twitter.com/meyerweb/status/376053792749268993 On Fri, Sep 6, 2013 at 2:29 PM, Felix Miata wrote: > On 2013-09-06 14:11 (GMT-0400) Tom Livingston composed: > > >> Services I've used, like MailChimp, Campaign Monitor and Marketo force >> a text version to be made. If you don't do it, the system will do it >> for you (so make sure you check it!). > > >> Would this cover what you speak of Felix? > > > I suppose. I rarely investigate why any email displays no content. I usually > assume the few I ever see any more are from incompetent sources and/or > spammers. If it happens with expected email, I report the problem to the > sender, temporarily enabling display as HTML instead of plain text, or > viewing the raw email file, or calling sender's 800 number if necessary. > > -- > "The wise are known for their understanding, and pleasant > words are persuasive." Proverbs 16:21 (New Living Translation) > > Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! > > Felix Miata *** http://fm.no-ip.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] html email with css
On Fri, Sep 6, 2013 at 1:18 PM, Felix Miata wrote: > On 2013-09-06 11:50 (GMT-0400) vi...@graymatterstudios.ca composed: > > >> Thanks everyone for all the helpful info and links. I have a lot to >> read over now. > > > A bit more to consider: > > 1-Some people set their email readers to force display of message body as > plain text. If not sent as MIME to include a plain text version, it might be > displaying some formatting as content, likely leading to it not being read > at all, or otherwise not leading a result you're hoping for. Or, its content > might not be displayed at all, which might be interpreted as incompetence of > the sender. > > 2-A link alone instead, or accompanied by a brief plain text summary, would > be opened in a web browser with a click. Absent application of the usual > defense mechanisms to force legibility, it would more likely be displayed as > you expect. Better that click than a click on the delete button. > > 3-If your email results from subscription, the subscription itself needs an > option for plain text only. Email sent by the sub needs to include a link to > a page that enables this option to be readily accessed. > -- > "The wise are known for their understanding, and pleasant > words are persuasive." Proverbs 16:21 (New Living Translation) > > Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! > > Felix Miata *** http://fm.no-ip.com/ > > ___ Services I've used, like MailChimp, Campaign Monitor and Marketo force a text version to be made. If you don't do it, the system will do it for you (so make sure you check it!). Would this cover what you speak of Felix? -- 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] html email with css
On Fri, Sep 6, 2013 at 10:28 AM, Philip Taylor wrote: > > > Chris Rockwell wrote: > >> If my boss' wife (or one of my freelance clients husbands) views one of >> our sites on a 2005 laptop and shows him what it looks like in IE7 I >> don't think "You'll have to file a bug report with Microsoft to get that >> fixed" is going to fly. > > But that is exactly the opposite scenario to the one I was discussing, > Chris. You are arguing "it may be necessary to hack in order to > support legacy browsers"; I am arguing "it should not be necessary to > hack, nor should we be prepared to hack, to support the leading-edge > hardware (and related firmware) that is being forcefully marketed > today". > > Philip Taylor We're sliding OT for the list quickly, but I'll add that my biggest pain point is having clients ask that I support IE7. Leading-edge devices (including desktop browsers) are beginning to support things that barely have vendor prefixed support. I'm much more OK with that than the former. -- 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] html email with css
Well, now there I definitely agree with you! But, I think, in the mean time, if you want the control of CSS (inline styles), you have to put up with the downsides. I will say to me repeating on s is the same as having to repeat on s for nested tables, which, if I remember right, you had to do with tags too. And for me, the ups out-weight the downs. Tom On Fri, Sep 6, 2013 at 9:52 AM, Philip Taylor wrote: > > > Tom Livingston wrote: > >> If I misread your post's intent, then I apologize for my tone. > > Your tone was absolutely fine, Tom, and no offense was clearly intended, > nor was any taken. But I do think you may have misunderstood my > message. I am not advocating eschewing media queries, or any similar > technology that allows a page to customise itself to the target device > and/or viewport. What I do think is "pandering to the manufacturers" > is using inline styles because they are too lazy to parse styles found > in the region, repeating styles in inner elements because they > are too lazy to implement inheritance properly, and so on. > > ** Phil. -- 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] html email with css
On Fri, Sep 6, 2013 at 9:13 AM, Philip Taylor wrote: > > > Tom Livingston wrote: > >> I should have mentioned that the inline font styling we do is >> generally set on the tag. With the possible need to repeat on >> elements inside the such as s, but it's been a bit since I >> was in an email so I'm not remembering it all. >> >> Above all, test, test, and then test. >> >> We use emailonacid.com, and I know there are other similar tools. > > Tom, you have a living to earn, and I am sure that many will sympathise > with your wish to keep your clients happy by fiddling and faffing with > the HTML and CSS until it render perfectly in every so-called > smart'phone, tablet, and whatever the next generation of chip-based > must haves will be called. But do you not also feel that by so doing, > you are making life easier for the manufacturer's at the expense of your > own time, and everybody else's ? All the while developers such as > your good self are prepared to pander to and mollycoddle half-baked > immature technology, there is no pressure at all on the manufacturers > to get their acts together and design their toys so that they are > standards-compliant. Would we (the HTML/CSS authoring community) not > do far better to stand together and to say to the manufacturers > "We code to W3C standards; if your toys can't render it properly, > employ /real/ programmers and get them fixed" ? > > Philip Taylor Wow. OK. Well, I don't know what information that I mentioned or linked to that would be considered bad or something the w3c would balk at as I believe they talk about MQs on their site as well. I'm just offering a way to use them in a new place. But if you don't think responsive emails aren't a good idea, that's certainly your right and I don't think you - or anyone else - has to build them. I believe I mentioned that the articles have information relative to the OP's question whether or not he's doing responsive emails. I posted an option, and possibly some help for the OP. That's all. If you don't agree, I'm OK with that. I agree it would be great for manufactures to get together and do it right, and in the same way, but I can't wait around for that and must deliver what is expected and asked of me and I don't think I'm the only one in that position. This can't be the first time on this list someone offered help that may be "edgy". If you are in a position to say no to clients or pick and choose clients and projects then I'm a bit envious. I, however, am not. I stated that I agree certain methods are safer and more stable, but there are other options that are working. Email clients are not progressing at the same rate as browsers, in my opinion, so I think it's fair to find ways to get around limits to keep up with all these devices you mention that are out there now. Maybe, by pushing our methods, we can push the manufactures to do what you are saying. If I misread your post's intent, then I apologize for my tone. -- 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] html email with css
On Fri, Sep 6, 2013 at 8:55 AM, Chris Rockwell wrote: > Thanks for sharing the links Tom, I see some good stuff there. I have found > (we run seasonal campaigns so it's been a few months) that we still need to > use the tag, especially for Outlook. I look forward to trying it > without though. > > > On Fri, Sep 6, 2013 at 8:27 AM, Tom Livingston wrote: >> >> On Thu, Sep 5, 2013 at 10:09 PM, wrote: >> > Hi. I have been lurking in this forum for a few years and have learned >> > quite a bit from reading the posts. Now I have a question to ask. >> > >> > I am coding an html eBlast and have most of the CSS as inline but I also >> > have quite a bit of css in the head. It seems MailChimp strips out the css >> > in the head. Does anyone know how to get around this? >> > >> > Thank you in advance. >> > >> > Vince Mendella >> > graymatter studios >> > >> >> Here is the other page I mentioned: >> >> >> http://www.campaignmonitor.com/blog/post/3442/mobile-email-design-in-practice/ >> >> We use this method for *some* of our emails. Our own and for clients >> interested in responsive benefits (which, frankly, they all should >> be). You may not be looking for responsive emails - though it's a >> pretty good idea - however they talk alot about what clients will do >> with CSS in the head and inline. >> >> That said, I agree that inline styles are the safest way to go. We >> generally do all text styling with inline styles and have since >> dropped old school tags and the like. Watch out for spacing >> methods. Margin and padding have flaky support. >> >> Here are some other good resources: >> >> http://www.email-standards.org/ >> http://www.campaignmonitor.com/css/ >> >> Hope this helps! >> >> >> -- >> I should have mentioned that the inline font styling we do is generally set on the tag. With the possible need to repeat on elements inside the such as s, but it's been a bit since I was in an email so I'm not remembering it all. Above all, test, test, and then test. We use emailonacid.com, and I know there are other similar tools. -- 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] html email with css
On Thu, Sep 5, 2013 at 10:09 PM, wrote: > Hi. I have been lurking in this forum for a few years and have learned quite > a bit from reading the posts. Now I have a question to ask. > > I am coding an html eBlast and have most of the CSS as inline but I also have > quite a bit of css in the head. It seems MailChimp strips out the css in the > head. Does anyone know how to get around this? > > Thank you in advance. > > Vince Mendella > graymatter studios > Here is the other page I mentioned: http://www.campaignmonitor.com/blog/post/3442/mobile-email-design-in-practice/ We use this method for *some* of our emails. Our own and for clients interested in responsive benefits (which, frankly, they all should be). You may not be looking for responsive emails - though it's a pretty good idea - however they talk alot about what clients will do with CSS in the head and inline. That said, I agree that inline styles are the safest way to go. We generally do all text styling with inline styles and have since dropped old school tags and the like. Watch out for spacing methods. Margin and padding have flaky support. Here are some other good resources: http://www.email-standards.org/ http://www.campaignmonitor.com/css/ Hope this helps! -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] html email with css
This might help: http://www.campaignmonitor.com/guides/mobile I believe they talk about client support, even if you aren't doing responsive. I have another page bookmarked and will pass it on when I get in the office. T Sent from my iPhone On Sep 5, 2013, at 10:09 PM, vi...@graymatterstudios.ca wrote: > Hi. I have been lurking in this forum for a few years and have learned quite > a bit from reading the posts. Now I have a question to ask. > > I am coding an html eBlast and have most of the CSS as inline but I also have > quite a bit of css in the head. It seems MailChimp strips out the css in the > head. Does anyone know how to get around this? > > Thank you in advance. > > Vince Mendella > graymatter studios > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] IE10 Compatibility mode
I support it because I have to. If a client wants us to support it or
stats indicate it should, then we do.
On Wed, Sep 4, 2013 at 7:07 PM, Eric wrote:
> I do have a here. With IE7 having a 0.6% share right nowwhy bother with
> it at all? Many of the big name pros in the Web Design/Dev industry no long
> check for UA versions. Most don't even support the ancient UAs at all.
>
> Just wondering.
>
>> On September 4, 2013 at 3:19 PM Tom Livingston wrote:
>>
>>
>> Terrific! This just keeps getting better! LOL.
>>
>> I have multiple VMs running XP, Vista and 8. One XP is 7, one is 8.
>> That 7 looks fine, while my 10 VM in compatibility mode breaks...
>>
>> On Wed, Sep 4, 2013 at 3:15 PM, Chris Rockwell
>> wrote:
>> > It renders the same for me using IE7 or IE10CM
>> >
>> >
>> > On Wed, Sep 4, 2013 at 3:12 PM, Tom Livingston wrote:
>> >>
>> >> On Wed, Sep 4, 2013 at 3:11 PM, Chris Rockwell
>> >>
>> >> wrote:
>> >> > And it looks like "box-sizing: border-box" is the ultimate culprit,
>> >> > maybe
>> >> > IE7 doesn't handle it well?? Was the box-sizing property added in
>> >> > later
>> >> > maybe?
>> >> >
>> >> >
>> >> > On Wed, Sep 4, 2013 at 3:08 PM, Chris Rockwell
>> >> >
>> >> > wrote:
>> >> >>
>> >> >> I see ".ie7 .wrapper {width: 940px}"
>> >> >>
>> >>
>> >> Thing is, as I mentioned, it renders correctly in IE7. I need to
>> >> distinguish IE10CM from IE7 apparently...
>> >>
>> >>
>> >> --
>> >>
>> >> Tom Livingston | Senior Front-End Developer | Media Logic |
>> >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>> >
>> >
>> >
>> >
>> > --
>> > Chris Rockwell
>>
>>
>>
>> --
>>
>> 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] IE10 Compatibility mode
Thanks for all the help everyone. I'll file that one under 'weird'.
On Wed, Sep 4, 2013 at 3:40 PM, Tom Livingston wrote:
> The wrapper width was the issue. Thanks for that.
>
> For some reason, in my 7, that wasnt causing an issue, but in 10CM it
> was. Removing it, however, didnt cause any bad things to happen
> either. Go figure.
>
> Ah, IE
>
> On Wed, Sep 4, 2013 at 3:30 PM, Chris Rockwell
> wrote:
>> I'm having trouble understanding why the width of wrapper is explicitly set
>> to anything other than 100% anyways. as your main wrapper (#page, I believe)
>> has a pixel width set. I would first look at something that doesn't have
>> issues, namely #gHcontainer and #llb-footer, both are not styled by the IE7
>> specific stylesheet.
>>
>> Correct me if I'm wrong: isn't compatibility mode in IE10 supposed to be the
>> same as IE7?
>>
>> Also, are you using a polyfill for box-sizing?
>>
>>
>> On Wed, Sep 4, 2013 at 3:19 PM, Tom Livingston wrote:
>>>
>>> Terrific! This just keeps getting better! LOL.
>>>
>>> I have multiple VMs running XP, Vista and 8. One XP is 7, one is 8.
>>> That 7 looks fine, while my 10 VM in compatibility mode breaks...
>>>
>>> On Wed, Sep 4, 2013 at 3:15 PM, Chris Rockwell
>>> wrote:
>>> > It renders the same for me using IE7 or IE10CM
>>> >
>>> >
>>> > On Wed, Sep 4, 2013 at 3:12 PM, Tom Livingston wrote:
>>> >>
>>> >> On Wed, Sep 4, 2013 at 3:11 PM, Chris Rockwell
>>> >>
>>> >> wrote:
>>> >> > And it looks like "box-sizing: border-box" is the ultimate culprit,
>>> >> > maybe
>>> >> > IE7 doesn't handle it well?? Was the box-sizing property added in
>>> >> > later
>>> >> > maybe?
>>> >> >
>>> >> >
>>> >> > On Wed, Sep 4, 2013 at 3:08 PM, Chris Rockwell
>>> >> >
>>> >> > wrote:
>>> >> >>
>>> >> >> I see ".ie7 .wrapper {width: 940px}"
>>> >> >>
>>> >>
>>> >> Thing is, as I mentioned, it renders correctly in IE7. I need to
>>> >> distinguish IE10CM from IE7 apparently...
>>> >>
>>> >>
>>> >> --
>>> >>
>>> >> Tom Livingston | Senior Front-End Developer | Media Logic |
>>> >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>>> >
>>> >
>>> >
>>> >
>>> > --
>>> > Chris Rockwell
>>>
>>>
>>>
>>> --
>>>
>>> Tom Livingston | Senior Front-End Developer | Media Logic |
>>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>>
>>
>>
>>
>> --
>> Chris Rockwell
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
--
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] IE10 Compatibility mode
The wrapper width was the issue. Thanks for that.
For some reason, in my 7, that wasnt causing an issue, but in 10CM it
was. Removing it, however, didnt cause any bad things to happen
either. Go figure.
Ah, IE
On Wed, Sep 4, 2013 at 3:30 PM, Chris Rockwell wrote:
> I'm having trouble understanding why the width of wrapper is explicitly set
> to anything other than 100% anyways. as your main wrapper (#page, I believe)
> has a pixel width set. I would first look at something that doesn't have
> issues, namely #gHcontainer and #llb-footer, both are not styled by the IE7
> specific stylesheet.
>
> Correct me if I'm wrong: isn't compatibility mode in IE10 supposed to be the
> same as IE7?
>
> Also, are you using a polyfill for box-sizing?
>
>
> On Wed, Sep 4, 2013 at 3:19 PM, Tom Livingston wrote:
>>
>> Terrific! This just keeps getting better! LOL.
>>
>> I have multiple VMs running XP, Vista and 8. One XP is 7, one is 8.
>> That 7 looks fine, while my 10 VM in compatibility mode breaks...
>>
>> On Wed, Sep 4, 2013 at 3:15 PM, Chris Rockwell
>> wrote:
>> > It renders the same for me using IE7 or IE10CM
>> >
>> >
>> > On Wed, Sep 4, 2013 at 3:12 PM, Tom Livingston wrote:
>> >>
>> >> On Wed, Sep 4, 2013 at 3:11 PM, Chris Rockwell
>> >>
>> >> wrote:
>> >> > And it looks like "box-sizing: border-box" is the ultimate culprit,
>> >> > maybe
>> >> > IE7 doesn't handle it well?? Was the box-sizing property added in
>> >> > later
>> >> > maybe?
>> >> >
>> >> >
>> >> > On Wed, Sep 4, 2013 at 3:08 PM, Chris Rockwell
>> >> >
>> >> > wrote:
>> >> >>
>> >> >> I see ".ie7 .wrapper {width: 940px}"
>> >> >>
>> >>
>> >> Thing is, as I mentioned, it renders correctly in IE7. I need to
>> >> distinguish IE10CM from IE7 apparently...
>> >>
>> >>
>> >> --
>> >>
>> >> Tom Livingston | Senior Front-End Developer | Media Logic |
>> >> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>> >
>> >
>> >
>> >
>> > --
>> > Chris Rockwell
>>
>>
>>
>> --
>>
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
>
>
>
> --
> Chris Rockwell
--
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] IE10 Compatibility mode
Terrific! This just keeps getting better! LOL.
I have multiple VMs running XP, Vista and 8. One XP is 7, one is 8.
That 7 looks fine, while my 10 VM in compatibility mode breaks...
On Wed, Sep 4, 2013 at 3:15 PM, Chris Rockwell wrote:
> It renders the same for me using IE7 or IE10CM
>
>
> On Wed, Sep 4, 2013 at 3:12 PM, Tom Livingston wrote:
>>
>> On Wed, Sep 4, 2013 at 3:11 PM, Chris Rockwell
>> wrote:
>> > And it looks like "box-sizing: border-box" is the ultimate culprit,
>> > maybe
>> > IE7 doesn't handle it well?? Was the box-sizing property added in later
>> > maybe?
>> >
>> >
>> > On Wed, Sep 4, 2013 at 3:08 PM, Chris Rockwell
>> > wrote:
>> >>
>> >> I see ".ie7 .wrapper {width: 940px}"
>> >>
>>
>> Thing is, as I mentioned, it renders correctly in IE7. I need to
>> distinguish IE10CM from IE7 apparently...
>>
>>
>> --
>>
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
>
>
>
> --
> Chris Rockwell
--
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] IE10 Compatibility mode
FYI, I know about the validation errors, however they occur in content injected into my page that I have no control over. On Wed, Sep 4, 2013 at 2:55 PM, Tom Livingston wrote: > On Wed, Sep 4, 2013 at 2:52 PM, Philip Taylor wrote: >> >> >> Tom Livingston wrote: >> >>> Can anyone point me in the right direction for trouble shooting this? >> >> As always, and with apologies for Raising My Voice : Post a URL ! >> Philip Taylor > > Apologies. I was going for philosophical help as opposed to digging > into the code, but here it is: > > http://everywhere.llbean.com/ > > -- > > Tom Livingston | Senior Front-End Developer | Media Logic | > ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- 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] IE10 Compatibility mode
> Tom Livingston wrote: > >> Apologies. I was going for philosophical help as opposed to digging >> into the code, but here it is: >> >> http://everywhere.llbean.com/ > > OK, I have viewed it in IE9 and IE10 and have not spotted any obvious > problems in the latter; what problems should I expect to encounter ? > > Philip Taylor Turn on IE10 Compatibility Mode in the F12 tools in 10. Sidebar drops down below the main column for me... -- 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] IE10 Compatibility mode
On Wed, Sep 4, 2013 at 2:52 PM, Philip Taylor wrote: > > > Tom Livingston wrote: > >> Can anyone point me in the right direction for trouble shooting this? > > As always, and with apologies for Raising My Voice : Post a URL ! > Philip Taylor Apologies. I was going for philosophical help as opposed to digging into the code, but here it is: http://everywhere.llbean.com/ -- 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] IE10 Compatibility mode
On Wed, Sep 4, 2013 at 3:11 PM, Chris Rockwell wrote:
> And it looks like "box-sizing: border-box" is the ultimate culprit, maybe
> IE7 doesn't handle it well?? Was the box-sizing property added in later
> maybe?
>
>
> On Wed, Sep 4, 2013 at 3:08 PM, Chris Rockwell
> wrote:
>>
>> I see ".ie7 .wrapper {width: 940px}"
>>
Thing is, as I mentioned, it renders correctly in IE7. I need to
distinguish IE10CM from IE7 apparently...
--
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-d] IE10 Compatibility mode
List, I have a request to fix some layout issues in IE10 Compatibility Mode. Everything I've googled says IE10 CM should render like IE7. When I view my page in IE10 CM, it breaks. When I view it in IE7, it's fine. Can anyone point me in the right direction for trouble shooting this? -- 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] How can I use position fixed in IE?
On Fri, Aug 30, 2013 at 9:02 AM, Barney Carroll wrote: > On Friday, 30 August 2013, Tom Livingston wrote: >> >> jsfiddle doesn't seem to work in 8 it seems though :-P > > > Yes, sorry — codepen.io wasn't saving for me plus I like to keep all my > snippets in one place for future reference. You'll have to use another > browser, then copy and paste the code locally to test :P > Oh yes. Just thought the irony was humorous. :-D -- 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] How can I use position fixed in IE?
On Fri, Aug 30, 2013 at 7:39 AM, Barney Carroll wrote: > Oops — forgot to reply all. Here we go: > > Hi Marie-Ange, > > If you can change the CSS but can't change the markup, and real position: > fixed is impossible, you can still achieve the same effect with the > following hack. This assumes that the element you want to fix is nested > _outside_ the main document content, as follows: > > > > content you want to stay fixed > > > the rest of the page content > > > > The trick is then to remove scrolling overflow from the body, and apply it > to the main document container: this way position absolute is the same as > position fixed for elements immediately inside the body, since the body > never scrolls. > > I've written up a fiddle to demonstrate: > http://jsfiddle.net/barney/zY8h8/ > I'll have to remember this myself. jsfiddle doesn't seem to work in 8 it seems though :-P __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] How can I use position fixed in IE?
Sent from my iPhone
On Aug 30, 2013, at 5:50 AM,
wrote:
>
>
>
> Tom,
> Thank you for you code.
> However this code doesn’t work in IE8 neither in IE9 and IE10.
> When you scroll your page, you’ll see that this test block will scroll too.
> I’d like that this block stays at the bottom of the page.
> I have a bad feeling. This will not work in Quirks mode.
>
> Regards,
>
> MarieAnge
My apologies. I only did a quick test on a page without enough content to
scroll. Sorry for the goose-chase.
> -Original Message-
> From: Tom Livingston [mailto:tom...@gmail.com]
> Sent: Thursday, August 29, 2013 5:28 PM
> To: Eric
> Cc: DEMEULEMEESTER Marie-Ange; CSS Discussion Group
> Subject: Re: [css-d] How can I use position fixed in IE?
>
> I was able to get this to work in 8:
>
>
> *{margin: 0; padding: 0;}
> body{position: relative;}
> .test{
>position:fixed;
>_position: absolute;
>bottom:0;
>left:0;
>z-index:2147483647;
> }
>
>
> Not sure if this will work in your case...
>
>
> On Thu, Aug 29, 2013 at 11:26 AM, Eric wrote:
>> Hello Again,
>>
>> It works in IE10 also.
>>
>> Eric
>>> On August 29, 2013 at 10:43 AM
>>> marie-ange.demeulemees...@bnpparibasfortis.com
>>> wrote:
>>>
>>>
>>>
>>> Hi,
>>> How can I use position fixed in IE 8+ without changing the doctype:
>>> >> html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >, and without using
>>> jQuery?
>>> This code doesn't work:
>>> .test{
>>> z-index:2147483647;
>>> position:fixed;
>>> bottom:0;
>>> left:0;
>>> }
>>> Thanks a lot.
>>>
>>> Regards,
>>>
>>> Marie-Ange
>>> ==
>>> BNP Paribas Fortis disclaimer:
>>> http://www.bnpparibasfortis.com/e-mail-disclaimer.html
>>>
>>> BNP Paribas Fortis privacy policy:
>>> http://www.bnpparibasfortis.com/privacy-policy.html
>>>
>>> ==
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | 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] media queries issues
I would not be able to sleep tonight if I didn't bring up 'mobile first' again. It's been my experience with both methods, that it's easier to go from mobile up and usually requires less CSS. I've had some break point sheets with only a few lines of CSS. I usually only use min-width MQs. Just a thought, since you are just starting. Might be a good time to try it. OK, I'll sleep better now. Good luck. On Thu, Aug 29, 2013 at 7:15 PM, John A. Johnson wrote: > > On Aug 29, 2013, at 4:11 PM, "Tom Livingston" wrote: > >> If you use the right MQs, you can still do that. Same concept, different >> widths and adjustments. > > > OK, wait..the lightbulb just went off..you're saying, whatever the "starting > point" is, requires no MQ; only the breaks do, and those are whatever needs > to change. I guess I'm visualizing my code from the top toward the bottom, > going from larger to smaller, but it dun matter at all to the browser! > > just tried your previous suggestion; worked swimmingly! > > 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/ -- 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] media queries issues
If you use the right MQs, you can still do that. Same concept, different widths and adjustments. — Sent from Mailbox for iPhone On Thu, Aug 29, 2013 at 7:10 PM, John A. Johnson wrote: > On Aug 29, 2013, at 4:06 PM, "Tom Livingston" wrote: >> Might be simpler to not have an MQ around your desktop since in this case >> it's your base. And just make adjustments in the other MQs. No need to >> repeat everything. > well that is a very good idea, Tom. Right now, my Desktop is 960, but I am > thinking that as I hone and develop this thing, I might want to do a set for > wider viewports, up to 1920, with break points at maybe 1024, 1280, and 1920. > Think I'm going to play with your suggestion… > 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/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] media queries issues
Might be simpler to not have an MQ around your desktop since in this case it's your base. And just make adjustments in the other MQs. No need to repeat everything. — Sent from Mailbox for iPhone On Thu, Aug 29, 2013 at 7:01 PM, John A. Johnson wrote: > OK..I may have solved at least part of it… > for my desktop query, I either deleted or failed to type the closing } for > the media query! > watch this space… > 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] media queries issues
Try using min-width instead. On Thu, Aug 29, 2013 at 6:30 PM, John A. Johnson wrote: > I am working desktop down (I know about "mobile first") and I am copying the > desktop css into "tablet" which is my first break so far, and modifying as > needed to suit tablet (max 768px) > > Thanks! > > John > > > > > On Aug 29, 2013, at 3:28 PM, "Tom Livingston" wrote: > >> Can't look right now but are you adding to or changing desktop styles or >> replacing them. Are you working desktop down? >> — >> Sent from Mailbox for iPhone >> >> >> On Thu, Aug 29, 2013 at 6:20 PM, John A. Johnson >> wrote: >> >> I am trying to get solid on basic media queries with the simple site, link >> below. When narrow the viewport to "tablet" which I have set at >> max-width:768px, the desktop styles vanish, but tablet styles don't take >> their place. I've been wracking my brain over this and I am not seeing the >> problem. >> >> Any suggestions? Thank you in advance! >> >> John >> >> >> http://coffeeonmars.com/new/ >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | 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] media queries issues
Can't look right now but are you adding to or changing desktop styles or replacing them. Are you working desktop down? — Sent from Mailbox for iPhone On Thu, Aug 29, 2013 at 6:20 PM, John A. Johnson wrote: > I am trying to get solid on basic media queries with the simple site, link > below. When narrow the viewport to "tablet" which I have set at > max-width:768px, the desktop styles vanish, but tablet styles don't take > their place. I've been wracking my brain over this and I am not seeing the > problem. > Any suggestions? Thank you in advance! > John > http://coffeeonmars.com/new/ > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] How can I use position fixed in IE?
I was able to get this to work in 8:
*{margin: 0; padding: 0;}
body{position: relative;}
.test{
position:fixed;
_position: absolute;
bottom:0;
left:0;
z-index:2147483647;
}
Not sure if this will work in your case...
On Thu, Aug 29, 2013 at 11:26 AM, Eric wrote:
> Hello Again,
>
> It works in IE10 also.
>
> Eric
>> On August 29, 2013 at 10:43 AM marie-ange.demeulemees...@bnpparibasfortis.com
>> wrote:
>>
>>
>>
>> Hi,
>> How can I use position fixed in IE 8+ without changing the doctype: > html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >, and without using
>> jQuery?
>> This code doesn't work:
>> .test{
>> z-index:2147483647;
>> position:fixed;
>> bottom:0;
>> left:0;
>> }
>> Thanks a lot.
>>
>> Regards,
>>
>> Marie-Ange
>> ==
>> BNP Paribas Fortis disclaimer:
>> http://www.bnpparibasfortis.com/e-mail-disclaimer.html
>>
>> BNP Paribas Fortis privacy policy:
>> http://www.bnpparibasfortis.com/privacy-policy.html
>>
>> ==
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | 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-d] Custom fonts on mobile
Hello list, I'm working on a new project that involves custom fonts. The total weight is coming in around 380k for the fonts. My question is, would you consider this too heavy to deliver to mobile users or would this be ok. In other words should I use an MQ to load these at larger screen sizes, say 600 or 768 and up for example? The MQ route was what I have done in the past, but designers here would prefer the fonts on mobile as well. Looking for some consensus on whether it's too much for mobile. Thoughts? -- 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] Selectivizr
Thank you Yucca — Sent from Mailbox for iPhone On Tue, Aug 27, 2013 at 2:37 AM, Jukka K. Korpela wrote: > 2013-08-26 22:18, Tom Livingston wrote: >> Anyone (still) use this? Is there something better? >> >> http://selectivizr.com/ >> >> I use it regularly as nth-of type and first/last-of-type is so handy >> and I have to support back to IE7 usually. > Since Selectivzr handles such things nicely (and I think it adds support > down to IE 5), I don't see why you would need anything else for the > purpose of supporting CSS3 selectors. > If you want to use even more advanced CSS features, like new selectors > that are still experimental and not commonly implemented in popular > browsers, then you need something else. Perhaps the best place to start > with is > "HTML5 Cross Browser Polyfills", > https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills > which is about "HTML5" in a broad sense that covers advanced CSS (link > to CSS polyfills are near the end of the document). > 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/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- 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] Selectivizr
List, Anyone (still) use this? Is there something better? http://selectivizr.com/ I use it regularly as nth-of type and first/last-of-type is so handy and I have to support back to IE7 usually. TIA -- 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] Window widths and responsive design
On Mon, Aug 26, 2013 at 1:30 PM, David Hucklesby wrote: > Working on my first "responsive" website, I discovered something useful. > Dragging a browser window to different sizes has limitations, but I can see > how > a page reacts to different widths by using browser "zoom" as well. > > The good news is that both Firebug and Chrome tools reflect the "adjusted" > element sizes. By zooming out (smaller) I can emulate a 1920 pixel wide > screen > on my 1280 pixel wide laptop. Conversely, while Chrome won't narrow below > 400 > "real" pixels, zooming in lets me go well below that. > > It's likely many of you know this already. But I hope it is useful news to > some > of you. > -- > Cordially, > David > __ Somewhat related, has everyone checked out FF's new "responsive design view" under the Web Developer menu? Tools > Web Developer > Responsive Design View. Command-Option-M on Mac. Handy! -- 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] Implementing Responsive Design
On Fri, Aug 23, 2013 at 1:02 PM, Norman Fournier
wrote:
> If you're in a sharing mood, Tom, it would be great if you would post your
> solutions to this mailing list, and we could all benefit from your hard work
> ;-)
>
> On 2013-08-23, at 10:24 AM, Tom Livingston wrote:
Like I said, this is low-tech. But it's quick, requires less effort
and so far has not caused any pain that I'm aware of.
Also, I certainly didn't think this up. I read about this technique
and it made sense to me. Possibly from Andy Clarke. I will say that I
hardly ever hear about so it's either common place, or unpopular.
Either way, it works for me. YMMV. I am allergic to polyfils and use
very few of them. The only one I can think of that I use regularly is
selectivizr (http://selectivizr.com/).
So...
I have a main scss file that looks like:
@import "normalize.scss";
@import "forms.scss";
@import "fonts.scss";
@import "base.scss";
@media only all and (min-width: 480px){
@import "480.scss";
}
@media only all and (min-width: 600px){
@import "600.scss";
}
@media only all and (min-width: 768px){
@import "768.scss";
}
@media only all and (min-width: 960px){
@import "960.scss";
}
/* CLEARING */
/* For modern browsers */
.clear:before, .clear:after {content:""; display:block;}
.clear:after {clear:both;}
.clear {zoom:1;}/* For IE 6/7 (trigger hasLayout) */
And an IE sheet that looks like:
/*480*/
@import "480.scss";
/*600*/
@import "600.scss";
/*768*/
@import "768.scss";
/*992*/
@import "960.scss";
The IE sheet is importing the same styles as the main sheet, minus the
MQs, inside a conditional for IE < 9. Sheets outside of the MQs in the
main sheet still work for IE. The cascade then builds the desktop-only
page for old IE, in my case 7 and 8.
These are scss imports which happen in preprocessing and are not
causing multiple server calls. The result is only 2 sheets, main and
ie < 9.
The base sheet is my mobile starting point, with usually only
typographic styles and such with little or no layout styles. This is
the base a "dumb" phone will get. Sheets build up from there as the
width gets wider.
I have conditionals around my element, adding classes for 7 and
8, and I add specific 7/8 styles as needed in the individual break
point sheets. Yes, this causes good browsers to also download
ie-specific styles as well, but they are usually only a few lines and
I can live with that. It's one less server call. I find it much easier
to just keep all the element styles together, rather than to jump out
to another sheet to do a style related to the element I'm working on
in the main sheet. But that's just me. Feel free to create an
IE-specific sheet and tack in on the end of the above IE scss file.
I'm no guru. This is just what works for me.
HTH
--
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] Implementing Responsive Design
FWIW, what I do is repeat my styles without MQ's inside a conditional comment. Lo-fi, I know, but if you don't want to load a polyfil, this is another option. I use sass imports to do this in a neat way. Email me if you want any more info. — Sent from Mailbox for iPhone On Fri, Aug 23, 2013 at 10:59 AM, Tim Arnold wrote: > On Fri, Aug 23, 2013 at 12:47 AM, Mike O'Toole wrote: >> >> FYI only recently has the 'smart phone' (all MQ capable) sales passed the >> 'feature phone' in sales percentage. >> >> Many present day low end 'feature phones' and most older (sold in 2009-2012) >> 'feature phones' lack the MQ support. >> >> As of mid 2013 many high end 'feature phones' are MQ capable. FWIW they are >> much more powerful than the 'smart phones' of 2011 and before. >> > Keep in mind, if doing a mobile first approach, that IE8 (not exactly > an ancient browser) does not support media queries at all without a > polyfill. > 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/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Implementing Responsive Design
IMHO, mobile-first is the right way to go. My experience in desktop-down has been unpleasant to say the least. To me, mobile-first makes sense. If a mobile device doesn't understand MQ's, then you're in trouble with a desktop-down site. If you're going to spend the effort to do a responsive site, you should make sure as many devices have a good experience as possible. 2¢ On Fri, Aug 23, 2013 at 8:38 AM, Adam Ambrus wrote: > i think it's a good way of thinking, the limited space does force you to go > minimal and abstract as much as possible with your content and how you > present it. > > on the topic of mobile-first vs desktop-first, there is an alternative - the > goldilocks approach[1], which sits right in the middle, i'd say. > > ~Adam > > [1] - http://goldilocksapproach.com/demo/ > > Dne 23. 8. 2013 3:10, Colin (Sandy) Pittendrigh napsal(a): > >> Been reading Implementing Responsive Design by Tim Kadlec--which is >> surprisingly well-written for an IT book. >> >> Kadlec seems to recommend building a site's CSS from the cell phone >> up--because some phones still don't handle media queries. In other words >> he starts off by making his sites look good at the smallest resolution, >> and >> then uses media queries (and sometimes Javascript) to add floats and what >> ever else is needed to make the site look right as the view port >> increases. >> >> This came as a surprise to me. I assumed everybody did the opposite: still >> build for the desktop, then fiddle with media queries and viewport widths >> to make the site acceptable for pads and phones too. >> >> His approach does sometimes require Javascript, to loop through all the >> block elements of a certain class and then add to add CSS as needed. >> >> What are the group's thoughts about this approach? Do you build from the >> desktop down, or from the cell phone up? >> > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] Label Wrap
If I'm following you, I'd float:left both the input and label. Adjust as needed. HTH — Sent from Mailbox for iPhone On Mon, Aug 12, 2013 at 7:16 PM, Karl DeSaulniers wrote: > So this check box is in a responsive layout and when the page is shrunk width > wise, the text wraps. This is good, except the text wraps under the check > box. I want it to be flush with the right side of the check box and not to go > under it. > Karl DeSaulniers > Design Drumm > http://designdrumm.com > On Aug 12, 2013, at 6:14 PM, Karl DeSaulniers wrote: >> Sure.. sry. >> >> I wkerjle >> lkejlweljljgguu poopgpjaljtlek lksskskkjglsl alkejehhwgkejlwjtj >> wllkjelkjwljjt llwllwlelwlrjlwkelke wllkewlkelkjjlkjrtjtjwiiirein >> pgapogd. >> >> Best, >> Karl >> >> >> On Aug 12, 2013, at 6:08 PM, Joergen Lang wrote: >> >>> Could we see some code, please? >>> >>> Jørgen >>> >>> Am 13.08.13 01:05, schrieb Karl DeSaulniers: Hello all, I have a input check box and a label to the right of it. I want it so that the text in the label does not wrap below the check box but still wraps to the side. How can I do this? TIA. Best, >>> >>> __ >>> css-discuss [css-d@lists.css-discuss.org] >>> http://www.css-discuss.org/mailman/listinfo/css-d >>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>> List policies -- http://css-discuss.org/policies.html >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Testing
OK thanks everyone. Sorry for the noise. I had bothered Mr. Meyer enough about this and was wondering if it was just me. Seems ok now! ;-) On Mon, Aug 12, 2013 at 2:53 PM, Mike Zeidler wrote: > Yes :-) > > On Aug 12, 2013 1:47 PM, "Tom Livingston" wrote: >> >> Is this getting through? Haven't gotten anything from the list since >> July 10th... >> >> -- >> >> 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-d] Testing
Is this getting through? Haven't gotten anything from the list since July 10th... -- 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] Sprite Menu - Hover Issue for Newly-Added Item
Can we have a link to the actual site with the issue? On Fri, Jul 26, 2013 at 5:27 PM, Peter Ankelein wrote: > Hi All, > > I've a sprite menu that I just updated by adding another menu item, "C-MUG" > to it. I've re-calculated all the numbers and everything seems to be set up > correctly. It's working correctly on jsfiddle (http://jsfiddle.net/gPNF4/) > but for some reason, on my development server and on the production server > the hover state is only being triggered for the original five items, not > C-MUG. If I check in firebug, I can see > the "nav-cmug" class and surrounding div isn't being generated on hover on > my servers. (Current page state works, just not hover). I've tried clearing > browser caches, renaming the sprite image, etc. but no dice. Anyone have > any idea as to what could be causing this or how to fix? > > Thx, > Pete > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] what should go in html{ } ?
On Thu, Jun 27, 2013 at 8:23 AM, Jukka K. Korpela wrote:
> 2013-06-27 9:52, Philippe Wittenbergh wrote:
>
>> Consider this snippet:
>>
>> html { /* nothing set here, just the initial values set by the UA */}
>> body { font: .8em/1.5 sans-serif; }
>
>
> Whenever you use the em unit or the % unit on font-size, you need to take
> into consideration that it is relative to the parent font size. This has
> nothing to do with inheritance. Here you *prevent* from inheriting
> font size from its parent, .
No snark here. Tell me what I am missing where 'preventing from
inheriting font size from ' is a problem? What would the benefit
be? I see nothing to gain.
--
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] what should go in html{ } ?
On Wed, Jun 26, 2013 at 5:29 PM, COM wrote:
> my css all begin like what's pasted below. I have no idea what things ought
> to be inside the html selector. Any thoughts on what the best practices are?
>
> Thank you!
>
> John
>
>
>
> *{
> margin:0;
> padding:0;
> }
> html{
> }
> body{
> font-size:16px;
> color:rgb(0,0,0);
> font-family:helvetica-neue, Verdana, Arial, sans-serif;
> }
>
The Normalize reset includes the following:
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
Meyer Reset may be different.
http://necolas.github.io/normalize.css/
http://meyerweb.com/eric/tools/css/reset/
HTH
--
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] 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/
Re: [css-d] background image AND background color?
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/
Re: [css-d] display:table-cell;
On Mon, Jun 17, 2013 at 1:36 PM, Jukka K. Korpela wrote: > 2013-06-17 19:25, Tom Livingston wrote: > >> Given this structure: >> >> >> Infographics >> Tax Credit Calculator >> Frequently Asked Questions >> > > > It's not really much of a structure: a element (which is semantically > empty by definition) containing three elements separated only by > whitespace (violating accessibility guidelines). > > Thanks Yucca. I have since changed the structure and address the accessibility issue you mentioned. Thanks to others as well. -- 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-d] display:table-cell;
Given this structure: Infographics Tax Credit Calculator Frequently Asked Questions I have the hrefs set to display:table-cell; so as to use vertical-align:middle; but they are appearing next to each other in the browser. I understand why and expect this, but what would be the proper way to get them each on their own line? Wrap them each in a P for example, or is there a way to do it within the CSS? Thanks -- 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] Any layout gotchas?
> Normally the layouts I do have a main content container and an aside > or "sidebar" container which, on mobile, would completely stack one > under the other. A typical scenario I think. > > I am trying a different approach where there is no actual "sidebar" > container element separate from a main container element, but at > desktop width, the page would appear to have main area/sidebar area > structure. Also, the content areas would "shuffle" together like a > desk of cards (for lack of a better analogy). > > Here's my sample: > > http://tomliv.com/shuffle/ > > I haven't done a layout like this on a production site. > > My questions are: > > Are there any big 'gotchas' with this type of layout? > Am I doing this correctly/the best way? > > TIA. > I should mention to narrow up your browser window to see the layout change. Thanks! -- 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-d] Any layout gotchas?
List, Normally the layouts I do have a main content container and an aside or "sidebar" container which, on mobile, would completely stack one under the other. A typical scenario I think. I am trying a different approach where there is no actual "sidebar" container element separate from a main container element, but at desktop width, the page would appear to have main area/sidebar area structure. Also, the content areas would "shuffle" together like a desk of cards (for lack of a better analogy). Here's my sample: http://tomliv.com/shuffle/ I haven't done a layout like this on a production site. My questions are: Are there any big 'gotchas' with this type of layout? Am I doing this correctly/the best way? TIA. -- 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] CSS3 Selectors
On Wed, Jun 12, 2013 at 4:50 PM, Frank Taylor wrote:
> In your exact use case,I've solved the problem by using the adjacent sibling
> selector. More than three items and I consider things a little too messy;
> I'll revert to JS or helper classes for more than three items:
>
>
>>
>> .wrap div{width: 32%;margin-right:2%;float:left}
>> .wrap div + div + div {margin-right:0;}
>>
>>
>>
>>
>>
>>
>>
I like it. That idea never occurred to me, sadly.
--
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] CSS3 Selectors
On Wed, Jun 12, 2013 at 4:31 PM, Frank Taylor wrote:
> So far I've only had to really use the :nth-type selectors for tables, and
> for creating some demos on layouts.
>
> When it comes to tables, I'd created an html table-maker that optionally
> generates helper classes.
>
> Outside of tables, I really haven't had projects that required :nth-child
> support in older browsers on any other html elements.
>
>
>
>
>
>
> On Jun 12, 2013, at 2:11 PM, Tom Livingston wrote:
>
>> List,
>>
>> I use selectivizr frequently. Do you use this or something like it?
>> What's your method for dealing with, for example, a lack of support
>> for:
>>
>> p:nth-of-type(3n){
>> color: red;
>> }
>>
>> TIA!
>>
>> --
I should add that I wrap selectivizr in a conditional for IE less than
8, so not everyone has to load it.
Here's a typical use case:
.wrap div{width: 32%;margin-right:2%;float:left}
.wrap div:last-of-type{margin-right:0;}
I prefer this over adding additional classes. Yes, here it's only one
additional class, but you get the idea. In IE 8 the 3rd inner div
would wrap below.
--
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-d] CSS3 Selectors
List,
I use selectivizr frequently. Do you use this or something like it?
What's your method for dealing with, for example, a lack of support
for:
p:nth-of-type(3n){
color: red;
}
TIA!
--
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] How best to revise my style sheet? Reverse it?
I would recommend a mobile-first approach, yes. It's considered best practice. mediaqueri.es is a good gallery of responsive sites. — Sent from Mailbox for iPhone On Sat, Jun 8, 2013 at 12:08 AM, Keith Purtell wrote: > I recently looked at the style sheet for my long-neglected hobby site. > It's a train wreck. I started thinking about the best way to rebuild it > from scratch. Remembered some comments I may have heard here about > building first for mobile devices, then adding any CSS necessary for > computers/laptops. Is that good practice? Didn't find any discussion of > this via Google. Tips? > -Keith > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] unfamiliar url reference
On Thu, Jun 6, 2013 at 9:54 AM, Chip at Caliber Communications
wrote:
> I'm picking up someone else's code and found this unfamiliar thing:
>
> background: url("#") 100px 50px no-repeat;
>
> Can someone tell me what 'url("#")' means?
>
> Thanks much.
>
> Chip
To me, it is a placeholder character to later be replaced with an
actual URL to an image.
--
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] Simple Floats on Multiple Rows Getting "Stuck"
On Thu, May 30, 2013 at 3:02 PM, Christopher Akins wrote: > I'm almost embarrassed to admit I don't know why this is happening since > I've worked with CSS for a number of years now. I don't claim to be a CSS > master, though! :-) > > On this page: > > www.springfieldmo.gov/logos/ > > I have several floated items that look fine until the page is made > narrower. Then I want the floats to fall nicely to the next line and slide > all the way to the left, but they get "stuck" and won't slide all the way > over to the left until the page is pulled way in to be at it's minimum > width. > > I have a similar structure on a couple other pages, with similar results, > and I've never been able to quite figure out what the issue is. I would > guess it has something to do with conflicting heights on the elements or > something. But I can't just put a "clear" rule on the floats, cause that > would kill the float, right? I basically want something like a clearing > element to kick in ONLY when the float needs to fall to the next row. > > Does that make sense? > > Christopher Akins > City of Springfield, MO > The green Enviromental Services logo is taller than the others. The li's enclosing the images aren't wrapping the images (according to Chrome inspector). WHen the last one wraps, it is stopped by the taller image. I was able to get what you are after by adding a height to the LIs so they are all the same. Probably other ways to achieve this. HTH -- 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] Fwd: Can't get rid of horizontal scrollbars in 320x480
Hmm. 3D view in FF. I'll have to remember that one! On Fri, May 24, 2013 at 3:30 PM, John D wrote: > Perhaps a line of css like this might cure it: > > overflow: hidden; > > There are disadvantages of this but try anyway. > > > >> Date: Fri, 24 May 2013 13:01:05 -0400 >> From: jemmin...@gmail.com >> To: css-d@lists.css-discuss.org >> Subject: [css-d] Fwd: Can't get rid of horizontal scrollbars in 320x480 >> >> I've been rolling out responsive layouts for my site, but iPhone is giving >> me trouble. My iPhone 4 reports its portrait resolution as 320 x 480px. >> At this size I'm getting horizontal scrollbars. This also happens in >> Chrome if I resize the browser to these dimensions. >> >> I've spent hours in the Chrome inspector mucking with my widths and margins >> and I can't find where it's coming from. >> >> Site in question: http://quibble.it/ >> >> Can anyone help with this? >> >> Thanks, >> Jeff >> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | 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-d] Supporting Retina Images
List, Does anyone have any good resources on supporting 2x images (Retina)? A 'how-to' would be good as well as I have not yet done this. Also, DO YOU support Retina/2x images in your web work?? Thanks! -- 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] Fwd: Can't get rid of horizontal scrollbars in 320x480
On Fri, May 24, 2013 at 1:01 PM, Jeff Emminger wrote:
> I've been rolling out responsive layouts for my site, but iPhone is giving
> me trouble. My iPhone 4 reports its portrait resolution as 320 x 480px.
> At this size I'm getting horizontal scrollbars. This also happens in
> Chrome if I resize the browser to these dimensions.
>
> I've spent hours in the Chrome inspector mucking with my widths and margins
> and I can't find where it's coming from.
>
> Site in question: http://quibble.it/
>
> Can anyone help with this?
>
> Thanks,
> Jeff
> __
Hi Jeff,
I have encountered this a few times. It's a pain.
I see on #hero>.container item you have a fixed width specified of
300px (@max-width 400px). This may be causing a "math" issue where
things inside are adding up to more than 300px.
Also, are you using box-sizing anywhere?
div, header, aside, footer, input, textarea {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
This might help with box-model issues.
And, sadly, i've used overflow:hidden; on the body once or twice due
to crazy time constraints and the inability to spend time tracking the
culprit down.
HTH
--
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] @media all {} & @media screen {}: Both ignored (or followed) by IE6-8
> @media { ... }
>
Just thinking out loud, but is the above, without any attributes (?)
like screen or all, valid?
--
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] @media all {} & @media screen {}: Both ignored (or followed) by IE6-8
On Wed, May 22, 2013 at 2:37 PM, Micky Hulse wrote:
> Howdy,
>
> I'm in a situation where I would like to use @media all { ... } and
> @media screen { ... } around blocks of CSS in a large collection of
> style sheets.
>
> Test page using @media all { ... }:
>
> <http://jsbin.com/alugiv/1>
>
> Test page using @media screen { ... }:
>
> <http://jsbin.com/alugiv/2>
>
> I've tested in IE6-8 and it appears that those browsers ignore the
> media queries (or, they follow the rules) and load all styles found
> within the MQ blocks (and, the cascade does not appear to be
> affected).
>
> Question: My test page is simple, so maybe I'm missing something
> obvious (or some sort of corner case) ... Is what I'm seeing actually
> true? Do old IEs not mind @media screen/all { ... } syntax?
>
> Where would I go to find official docs that state weather or not this
> is the case? I'd like to use this on a production site, but I kinda
> want to confirm that what I'm seeing in my tests is really going to
> work for me via a live site. :)
>
> Can anyone confirm or shed light on official documentation somewhere?
>
> Thanks!
> M
What I do is to repeat my styles, without MQs, inside a conditional
for old IE. This allows the cascade to render a desktop-only layout
for old IE. A bit low-fi maybe, but works well for me and have had no
issues other than the usual fixes needed for old IE regardless of MQs.
--
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] "Responsive Design" resources
I recommend "Mobile First" and "Responsive Web Design" from abookapart.com as well as peeking under the hood at sites listed at mediaqueri.es HTH — Sent from Mailbox for iPhone On Mon, May 20, 2013 at 11:46 AM, Colin (Sandy) Pittendrigh wrote: > I'm a retired and slightly obsolete programmer who wants to jump back into > the game. There seems to be a lot of work remodeling websites so they work > well with cell phones, and also a lot of work moving toward cloud-based > everything. I've got a good handle on the cloud based stuff. > But I'm clueless about cell phone CSS strategies. I learn quickly. > *What are some good online "responsive design" resources? * (my first > attempts to find good resources yielded poorly-written jargon) > -- > /* Colin (Sandy) Pittendrigh >--oO0> */ > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] responsive css
On Mon, May 20, 2013 at 10:30 AM, Dave Solko wrote:
> I'm having a couple of issues with my attempt at adding responsive aspects to
> an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
>
> 1. How do I target both mobile and skinny browser windows: I've tried:
> @media screen and (max-device-width: 480px) {
>
> @media (max-width: 480px) {
>
> The first works for a mobile device, and the second OMM when I'm developing,
> but neither works for both.
>
> 2. Why is everything so small on a mobile device (iOS specifically)?
>
>
>
> Dave Solko
> Pixel Alchemy
> d...@pixelalchemy.com
> 513.300.2165
>
>
>
I generally use @media only screen and (min-width: [breakpoint]){}
with a mobile-first layout. As far as size go, it may be the 13px font
size on the body.
--
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] Top gap
Clear the floats. I added clear: left; to the h3 and got the gap. On Mon, May 13, 2013 at 5:01 PM, Brian M. Curran wrote: > Hi! > I can't get the last sentence -"More project samples can be found here" - on > my portfolio page here: > > http://www.draftingservices.com/portfolio.html > > to have a gap between it and the table that is above it. Can anyone tell me > why my padding css isn't working as I thought it should? > > Thanks, > Brian > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] Image and background colour changes on hover.
On Mon, May 13, 2013 at 8:11 AM, Barney Carroll wrote: > There are all sorts of ways of achieving this. The tersest is probably > using pseudo-elements CSS: > > http://jsfiddle.net/barney/wBUsa/ > > If you need to target older browsers that don't support pseudo-elements, > you can add extra markup into your list items instead: > > http://jsfiddle.net/barney/PQhVn/ > > Regards, > Barney Carroll > > barney.carr...@gmail.com > +44 7429 177278 > > barneycarroll.com > > > On 8 May 2013 03:44, Anna Gav wrote: > >> Hi all >> >> Re: http://imageshack.us/scaled/landing/703/sdfdsf.png >> >> I need to reproduce the functionality demonstrated in this image. The >> requirements are: >> >> When the menu items are hovered over >> -the image on the left needs to change. >> -the colour behind the menu item has to change (eg. green for the last >> menu item, as demonstrated in the image) >> >> Ideally, I'd like to do this using CSS, but to be honest it looks way >> too complicated with all the sharp angles. >> >> How would you do this? >> >> Anna This can help with pseudo-element support, if you need it. I wrap this (and I also include mootools lib as well as it gives the most support) in a conditional comment. http://selectivizr.com/ HTH -- 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] Best practices in only targeting only Styles needed for a page in an external style sheet?
On Thu, May 9, 2013 at 1:46 PM, Nancy Johnson wrote: > I have a question in the best practices for style sheet use and > targeting only the styles needed for a specific page. > @import? Less.js? mulitple stylesheets? > > Example: > There are : > 3 themed pages A B C, > Two image sprites 1 2, > one stylesheet, > > All pages utilize image sprite 1 > page C only utilizes image sprite 2 > > With one stylesheet, Image sprite 2 is being called on page A B and C > even though the image is only displayed on page C > > Thanks > Nancy Johnson This may be low-tech but I'd class a main container or even body for C and use that hook. HTH -- 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] Need Excellent Resources for Responsive Design
> Hello CSS Discuss, > > Looking for some great resources on how I can create responsive designs. I am > attempting with one site but the it's not exactly working. From my > understanding, there are ways to make images and videos resizeable. I'm also > wondering if floated elements have an effect on scalability? > > Awesome resources, tips, etc welcome! > > Thanks in Advance! > I recommend: http://www.abookapart.com/products/responsive-web-design http://www.abookapart.com/products/mobile-first http://mediaqueri.es -- 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] background image not appearing
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
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] font-sizing bug in generated content in IE 10 ?
On Fri, Apr 26, 2013 at 2:35 PM, Philip TAYLOR wrote: > > > Georg wrote: > >> This IE bug makes me break the convention not to use fixed font-size on >> web pages, applying font-size in "px" on the generated content in IE9+ >> only - hacked in. Seems to work reasonably well. > > Better than "rem", Georg ? Having been forced to use "rem" for this > fix, I am now considering adopting them more widely. > > Philip Taylor Support isn't too bad for rem. What's best practice fall back for using rem? -- 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] font-size in body selector?
You can spec font-size of 100% on the body. This respects the users preference settings in their browser. You can then spec element font size in ems. The 16px is usually the default size set in browsers upon install. — Sent from Mailbox for iPhone On Thu, Apr 18, 2013 at 5:54 PM, COM wrote: > My understanding of font-size spec is: 100% = 1 em = the size of an "M" and > that this is 16px high. > What I am not clear is: where do you tell the browser how large the "M" is? > Is it universally understood that 1 "M" is 16 pixels high? > 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] Question regarding the use of
On Thu, Apr 18, 2013 at 12:12 PM, John D wrote: > I would change it to: > > You are using correct doctype right? > > Hope this helps. > > >> When I first went live with a website a few months ago, the following >> code validated and now it doesn't. Why? >> >> >> > I admit to still being confused by the proper use of section and article. I was waiting for the dust to settle on them (which it probably has by now) and in the meantime, I use: 2¢ -- 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] ul bullets: change color?
What I usually see for this is wrapping the li text in spans and styling that to over ride the styling of the ul. — Sent from Mailbox for iPhone On Sun, Apr 14, 2013 at 6:46 PM, COM wrote: > I am having a tough time finding online (google, w3schools) the correct way > to change the color of bullets in an unordered list, *independently* from the > color of the bullet text.There seem to be what the authors refer to as hacks, > and some techniques where the bullet is a .gif. > I'd like to keep the bullets all code, but have control of their color AND > the color of the bullet text. > can someone point me in the right direction? > 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] "desktop first" tutorial
In response to your issue #2 below, I have had good luck with putting MQs on link elements, and then repeating the link elements without MQs inside a conditional comment for 7 & 8, allowing the cascade work to deliver a desktop-only layout for old IE. I hate poly filling everything and also had bad luck with respond.js. I'm playing with sass now to use its import method to get all the above to work with only 2 http requests instead of several, but using the same concept. HTH — Sent from Mailbox for iPhone On Tue, Apr 2, 2013 at 11:42 PM, Micky Hulse wrote: > Thanks to everyone for the replies, I really appreciate it! :) > @jon: Thanks for pointing me towards Bootstrap. That's an area of > Bootstrap I have not explored (I've mostly studied Bootstrap in terms > of the LESS setup). I'll take the time to look into the MQs used there > and the docs/philosophy/thinking behind their setup. > @tom: Thank you for your feedback! I experiment with your suggestion > of undoing the desktop styles. > @david: Thanks for the code example, that's helpful. > @philippe: Thanks for help! I appreciate the examples as well. :) > My main reason for wanting to learn more about (primarily) using > max-width is that I'd like to see if it helps me solve (or, come close > to solving) these two problems: > 1. Allowing desktop styles to print by default. > 2. Allowing old IE to load desktop layout by default. > In reference to #2 above, for my latest project we're using respond.js > as a polyfill for older IEs (IE < 8) and it's a huge headache to > manage due to our CSS assets being on multiple servers. The respond.js > overhead is just to much of a burden. I'm wanting to explore a desktop > first approach to see if that technique gets us any closer to having a > manageable solutions for the items listed above. > Thanks again folks! I owe ya'll an Oregon microbrew. :) > Cheers, > M > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] "desktop first" tutorial
I would assume the base styles are the desktop, and as break points decrease, you would undo the desktop layout. My experience with a site I took over that was done this way is that desktop first seems to require a lot more code to over-ride the desktop layout than it does to build mobile-first. My 2 cents... — Sent from Mailbox for iPhone On Tue, Apr 2, 2013 at 7:42 PM, Micky Hulse wrote: > Actually, my main question: > When designing desktop first MQs, how should the MQs stack? > Fake breakpoint numbers follow: > Global styles, 545px, 845px, 1045px, Desktop > OR > Desktop & global styles, 1045px, 845px, 545px > In other words, what's the optimal way to order breakpoints and > global/desktop styles so that I can take advantage of the cascade? > Let me know if I need to clarify my question. > Thanks! > M > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- 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] Fwd: Centering contained div with unknown width.
On Tue, Apr 2, 2013 at 12:24 PM, J.C. Berry wrote:
> I have a problem. I have to vertically center (middle) my nav items. See
> http://mindarc.com/capture2_(1).JPG
>
> This is my HTML snippet:
>
>
>
>
>
>href="/solutions/xifin-inet/web-services">Web Services class="menu-mlid-2318">Business Is
> Better in the Cloud
>
>
>
>
> And my CSS:
>
> div#secmidpagenavcontainer{width:100%;border:0;height:59px;clear:both;}
> div#secmidpagenavcontainer
>
> div#secmidpagenavbkgdimg{position:absolute;width:1194px;margin-left:-597px;left:50%;padding-top:0;background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd.png')
> no-repeat;height:59px;}
> div#secmidpagenavcontainer
>
> div#secmidpagenav{position:absolute;width:1170px;margin-left:-594px;left:50%;height:59px;text-align:center;margin-top:1px;}
> div#secmidpagenavcontainer div#secmidpagenav
>
> ul{/*margin-top:0;text-align:center;top:7px;*/margin-top:-3px;position:relative;display:inline-block;height:59px;vertical-align:middle;}
> div#secmidpagenavcontainer div#secmidpagenav ul
> li{list-style-type:none;margin:15px 0 0
> 0;display:inline;padding:0;vertical-align:top;height:20px;border-right:1px
> solid #ebebeb;}
> div#secmidpagenavcontainer div#secmidpagenav ul
> li:last-child{list-style-type:none;display:inline;border:none;margin:15px 0
> 0 0;vertical-align:top;height:20px;}
> div#secmidpagenavcontainer div#secmidpagenav ul li
> a{float:none;display:block;vertical-align:middle;padding:10px 5px 10px
>
> 5px;margin-top:-13px;min-width:120px;max-width:160px;height:59px;overflow:visible;text-decoration:none;font-size:14px;color:#fff;font-weight:normal;}
> div#secmidpagenavcontainer div#secmidpagenav ul li
>
> a.active{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
> 0 0 repeat-x;font-weight:bold;}
> /*div#secmidpagenavcontainer div#secmidpagenav ul
>
> li:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
> 0 0 repeat-x;}*/
> div#secmidpagenavcontainer div#secmidpagenav ul li
>
> a:hover{background:url('/sites/all/themes/xifin/ui/img/midpagenavbkgd-active.png')
> 0 0 repeat-x;}
>
> Any ideas? Thank you!
>
>
Maybe:
#secmidpagenav{background: grey; padding:1em;}
#subnav li{display: table-cell; width: 100px; vertical-align: middle;
text-align: center;}
Web Services
Business Is Better in the Cloud
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop down menu pushing content down
On Tue, Mar 19, 2013 at 10:51 AM, Mike wrote:
> On 19/03/13 13:55, Laura Valentino wrote:
>
>> On Tue, Mar 19, 2013 at 12:17 PM, Mike
>> wrote:
>>
>> Hi guys,
>>>
>>> I hope someone can help with a little problem. A new website I am
>>> designing looks perfect in Firefox 18 on Linux and in Safari. But it's
>>> not
>>> right in Opera on Linux, Chrome on Windows and probably several others.
>>> URL
>>> -
>>> www.integra-server.co.uk/lnp/wb/<http://www.integra-server.co.uk/lnp/**wb/>
>>> <http://www.integra-server.co.**uk/lnp/wb/<http://www.integra-server.co.uk/lnp/wb/>
>>> >
>>>
>>
>>
>> On my windows desktop computer it looks ok in Chrome but not in IE 9.
>>
>> Could it be something to do with how different browsers interpret the box
>> model? (some count the padding as part of the width and some don't). If
>> floated content is too wide for the container it gets pushed down.
>>
>> Someone helped me with this issue on here recently and gave me this code
>> to
>> put in the css to fix it.
>>
>> * {
>> -webkit-box-sizing: border-box;
>> -moz-box-sizing: border-box;
>> box-sizing: border-box; }
>>
>> Regards,
>> Laura
>>
>> Thanks, Laura, but it doesn't solve the problem. In fact, it reduces the
> widths of the boxes and makes it look worse.
>
>
> Mike
>
> --
>
Im wondering if it might be a float/width issue, maybe? I was only able to
see the issue in IE9. Does adjusting the width/margins of the nav and/or
#content help?
Also, are you telling the browsers what is and how to
render it?
Just some thoughts...
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] SCSS question
List,
I have bolted on my scss training wheels (about time, I know) and am
working on setting up my own little framework for starting new projects. I
am looking to ultimately reduce the number of http requests that I have
been using in the past with regards to css files. Usually, I use multiple
link elements with MQs and am looking into using a single stylesheet now.
Before I get too far, I'm looking to see if the way I am setting this up is
wrong/crazy/insane.
In my main stylesheet, I have this:
@media only screen and (min-width: 480px) {
@import "480.scss";
}
@media only screen and (min-width: 600px) {
@import "600.scss";
}
@media only screen and (min-width: 768px) {
@import "768.scss";
}
@media only screen and (min-width: 992px) {
@import "992.scss";
}
I then plan to repeat the imports, without the MQs, in another single sheet
to serve IE <9 a desktop only layout. This would be inside conditional
comments.
Is this off base, or am I ok?
Off-list replies are requested if this is leaning off-topic for this list.
Thanks!
--
Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Media query syntax when a separate style sheet is included
—
Sent from Mailbox for iPhone
On Sat, Mar 16, 2013 at 8:32 AM, Tom Livingston
mailto:tom...@gmail.com";>> wrote:
FWIW, I use MQs on link elements to load sheets. Then, for IE less than 9, I
repeat the link elements without MQs inside a conditional comment to serve the
desktop only layout to those browsers. This may be a little low-tech and it is
a few more http requests, but I am not a fan of poly-filling everything under
the sun and I don't have to write additional whole sheets for wrote:
> FWIW, I use MQs on link elements to load sheets. Then, for IE less than 9, I
> repeat the link elements without MQs inside a conditional comment to serve
> the desktop only layout to those browsers. This may be a little low-tech and
> it is a few more http requests, but I am not a fan of poly-filling everything
> under the sun and I don't have to write additional whole sheets for It's been working well for me. I'm sure some will not like this method though.
> HTH
> —
> Sent from Mailbox for iPhone
> On Sat, Mar 16, 2013 at 1:09 AM, Micky Hulse
> wrote:
>> On Fri, Mar 15, 2013 at 11:38 AM, Micky Hulse
>> wrote:
>>> Oh, that's good to know. I did not realize that this was the case. I
>>> probably read some misinformation somewhere (or I did not fully
>>> understand one of the articles I read) saying that @media print {} was
>>> IE9+ thing.
>> Ah, I think this is the site where I read that "@media print` was an IE9+
>> thing:
>> "CSS Print Media Query"
>> <http://www.joshuawinn.com/css-print-media-query/>
>> "@media print is supported in the following browsers: FireFox 3.5,
>> Internet Explorer 9, Chrome 14, Safari 3.2, Opera 11"
>> Also, based on some really rough tests, I think my thinking was flawed:
>>> Is it just me, or wouldn't it seem more prudent to feed printers the
>>> desktop look/feel (as a default, if you didn't have a print-specific
>>> style sheet)? I like the desktop view because it eats up fewer paper
>>> pages.
>> Looks like the print previews I'm seeing load whatever media query
>> fits based on the printed page size. In other words, I've been getting
>> the "tablet" view instead of the "desktop" view to print. I assumed
>> using "@media" only would make the print load the desktop styles.
>> Enough talk, here's a demo:
>> <http://jsbin.com/izowol/1>
>> When doing a print preview, only the "tablet" media query loads. I
>> assume it's because the printed page matches the dimensions of the
>> tablet MQ (and there's no media type restriction).
>> In this example:
>> <http://jsbin.com/izowol/2>
>> I've modified the last query to say:
>> @media print, (min-width: 1045px) { ... }
>> When doing a print preview, the H1 from the "tablet" MQ shows, and so
>> does the "desktop" H1 (both are colored orange).
>> This throws a wrench into my wanting to print the full desktop view.
>> Adding "print, " to the front of media queries will probably get me to
>> that goal, but it feels a little hackish.
>> Back to drawing board. :)
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- 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] Media query syntax when a separate style sheet is included
FWIW, I use MQs on link elements to load sheets. Then, for IE less than 9, I
repeat the link elements without MQs inside a conditional comment to serve the
desktop only layout to those browsers. This may be a little low-tech and it is
a few more http requests, but I am not a fan of poly-filling everything under
the sun and I don't have to write additional whole sheets for
wrote:
> On Fri, Mar 15, 2013 at 11:38 AM, Micky Hulse
> wrote:
>> Oh, that's good to know. I did not realize that this was the case. I
>> probably read some misinformation somewhere (or I did not fully
>> understand one of the articles I read) saying that @media print {} was
>> IE9+ thing.
> Ah, I think this is the site where I read that "@media print` was an IE9+
> thing:
> "CSS Print Media Query"
>
> When doing a print preview, only the "tablet" media query loads. I
> assume it's because the printed page matches the dimensions of the
> tablet MQ (and there's no media type restriction).
> In this example:
>
> I've modified the last query to say:
> @media print, (min-width: 1045px) { ... }
> When doing a print preview, the H1 from the "tablet" MQ shows, and so
> does the "desktop" H1 (both are colored orange).
> This throws a wrench into my wanting to print the full desktop view.
> Adding "print, " to the front of media queries will probably get me to
> that goal, but it feels a little hackish.
> Back to drawing board. :)
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- 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/
