Re: [css-d] Responsive Design Issue

[Robert A. Rosenberg]

At 23:41 +0200 on 04/24/2012, Gabriele Romanato wrote about Re: 
[css-d] Responsive Design Issue:



Why should we get rid of a piece of design when you have a CSS3 property
for that? Use background-size. It works.


Maybe since use of background-size assumes/requires that the device's 
browser supports the property. Attempting to use it with a non-CSS3 
Supporting Browser causes the background image to display. You need 
to use a solution that works with all browsers.

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

[Philippe Wittenbergh]

Le Apr 25, 2012 à 3:14 AM, Carol Swinehart a écrit :

> How do you get rid of a background image or multiple background images in
> resolutions for handheld less then 768?

Only specify background images for devices / or better - windows / wider than 
768px ?

div { background: lime; }
@media all and (min-width:768px) {
div { background: url(path/to/image) repeat-x orange; }
}

It is always more easy to work from the minimal to the more complex, with the 
added benefit that devices with minimal styling won't need to download the 
resources they'll never use.

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



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

[css-d] Multiple, evenly split, fluid columns inside fixed-width parent container?

[Micky Hulse]

Hello,

Could anyone point me towards an example of an evenly split
multi-column (4+) fluid layout?

I have a fixed-width container that varies its width using media
queries... I would like to see if I can put a row with multiple
columns inside this container and have the row/columns expand to fit
the area (evenly).

Is there a simple way to do this? I would prefer to use CSS2 for the
sake of older browsers.

Is this a pipe dream? I can't seem to find many good examples of
multiple, evenly split, fluid columns on the net.

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/

Re: [css-d] Responsive Design Issue

[Rob Emenecker]

> Why should we get rid of a piece of design when you have a CSS3 property
> for that? Use background-size. It works. :-)

I would advocate setting it to background-image: none, because you save some
bandwidth and cache for the small device.


Rob Emenecker @ Hairy Dog Digital
www.hairydogdigital.com
 
Please note: Return e-mail messages are only accepted from discussion groups
that this e-mail address subscribes to. All other messages are automatically
deleted.


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

[Gabriele Romanato]

Why should we get rid of a piece of design when you have a CSS3 property
for that? Use background-size. It works. :-)

On Tuesday, April 24, 2012, Carol Swinehart 
wrote:
> How do you get rid of a background image or multiple background images in
> resolutions for handheld less then 768?
>
> Thanks
>
> Carol
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>

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

Re: [css-d] Responsive Design Issue

[Tom Livingston]

On Tue, Apr 24, 2012 at 2:14 PM, Carol Swinehart
 wrote:
> How do you get rid of a background image or multiple background images in
> resolutions for handheld less then 768?
>
> Thanks
>
> Carol



With no other info, I'll suggest using background-image: none;

A link showing your problem is preferred as it's easier to see what
the issue(s) are.

HTH

-- 

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] Responsive Design Issue

[Carol Swinehart]

How do you get rid of a background image or multiple background images in
resolutions for handheld less then 768?

Thanks

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

Re: [css-d] Internet Explorer

[Ted Rolle, Jr.]

I'm retired.  You've made it all come back.

> FWIW, my employer (large insurance company) recently upgraded it's
> official corporate browser ... from IE6 to IE7. What is this IE8 you
> speak of? ;-)
>

-- 
GPG/PGP public key: B07F9AAE

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

Re: [css-d] respond.js vs ie7 and ie8 (correction)

[Ellen Herzfeld]

On 24 Apr 2012, at 11:49, Duncan Hill wrote:

> On Mon, 23 Apr 2012 16:11:58 +0100, Ellen Herzfeld  wrote:
> 
>> My previous message points to the wrong file without the media queries : it 
>> should be
>> 
>> http://qd.xlii.org/2012/content_modules-ie8.html
>> 
>> By the way, I checked without selectivizr and it doesn't change the problem.
>> 
>> Ellen
> 
> Both this page and the one you posted previously are having problems, I 
> suspect it is your conditional comments that are preventing load.
> Check the syntax, and maybe the logic of how the IE versions are targeted.
> 
> 
>   
>   
>   
>   
> 
> 
> if I read this one correctly, the 'not' operator ! should be directly in 
> front of the lt, '!lt', however there is a closing of that conditional which 
> feeds the linked sheets to everything (correctly I guess), then it is 
> followed by the real closing statement for the conditional.
> Perhaps the slight mish-mash is upsetting IE, and isn't [if !lt IE 6] the 
> equivalent of [if gte IE 6], but in a slightly more convoluted way.

I changed the "! lt IE 6" to "gte IE 6" (you are right, it was a bit 
convoluted), but it did not resolve the problem.

> Similar coding applies for your language declaration, maybe those classes 
> appear at some stage (class="lt-ie9 lt-ie8 lt-ie7" etc.) but the section:
> 
>   
> 
> surely just ends up serving  to everything.


The top conditional comments have nothing to do with the language. They apply 
classes to the html tag so that fixes can be targeted to specific browsers with 
these classes. See 


I'm not sure I'll stick with this scheme. Previously I was putting the fixes in 
a separate stylesheet for each IE.


> on XP
> IE8 'sometimes' shows the page, but with little styling, into IE7 mode and no 
> content is visible.
> FF 11.0 will not let me switch away from a 'Handheld' media type for the CSS 
> and is not showing anything like the styling that appeared on your first 
> posted link.
> 
> on Win7
> IE9 shows as FF, IE8 and IE7 modes show content but move your image from the 
> right to the left of the page.


Yes, I'm sorry but another error creeped in somewhere and really messed 
everything up. I must have been tired when I did this, but it's now fixed. 
However this doesn't change my problem with IE7/8. Could you look again, please?

The page  should now show styling 
everywhere (headers and dls centered, image to the right), but in IE 7/8 the 
spacing between paragraphs is gone and fonts are not correct. In IE7 the 
headers are bold and sans-serif but too small. In IE8 the headers are not bold, 
too small and set in a serif font instead of sans-serif. The line-height and 
top and bottom margins are gone in both. In all other browsers including IE9 
there is no problem.

On the other page , I removed 
the media queries and respond.js. This way in all browsers (even IE 7/8), what 
I see is the page styled correctly for wide viewports. Fonts and spacing are 
good in IE 7 and 8. So the problem has nothing to do with the css itself.

With respond.js, the styles in the media queries are obviously seen by IE, but 
I can't figure out why, in this specific page, there is a problem with 
typography and spacing. And it really is a very simple page.

I'm thinking of just serving a specific desktop stylesheet to IE with a 
conditional comment if I can't find where the problem is.

Or maybe, if this problem is confirmed by others (on this list for example), 
I'll file a bug for respond.js.

Thanks for your help.

Ellen








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

Re: [css-d] respond.js vs ie7 and ie8 (correction)

[Ellen Herzfeld]

On 23 Apr 2012, at 17:43, Tom Livingston wrote:

> On Mon, Apr 23, 2012 at 11:11 AM, Ellen Herzfeld  wrote:
>> 
>>> 
>>> I am trying to use respond.js for media queries. My first tests went fine 
>>> in ie7/8.
>>> 
>>> But I am now stumped by a problem in both ie7 and ie8 although it seems 
>>> worse in ie8.
>>> 
>>> On one particular test page, if I use respond.js (and media queries) the 
>>> fonts and the spacing of elements are not correct. If I remove respond.js 
>>> and the media queries, all is well.
>>> 
>>> 
> 
> I use jquery.mediaqueries.js instead of respond. I had a lot of issues
> with respond in a couple layouts.
> 
> HTH



jquery.mediaqueries.js can only use pixels. I need to use ems. I'll consider 
pixels if I really can't find any other solution.

I see respond.js suggested in so many places (in HTML5 Boilerplate for 
instance) I have a hard time believing it doesn't work. My test pages are 
really very very simple, so I can't but think it must be something obvious that 
create the problem. Unfortunately, sometimes obvious is quite invisible to the 
person making the obvious mistake; me in this case.

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

Re: [css-d] respond.js vs ie7 and ie8 (correction)

[Duncan Hill]

On Mon, 23 Apr 2012 16:11:58 +0100, Ellen Herzfeld  wrote:

My previous message points to the wrong file without the media queries :  
it should be


http://qd.xlii.org/2012/content_modules-ie8.html

By the way, I checked without selectivizr and it doesn't change the  
problem.


Ellen


Both this page and the one you posted previously are having problems, I  
suspect it is your conditional comments that are preventing load.

Check the syntax, and maybe the logic of how the IE versions are targeted.








if I read this one correctly, the 'not' operator ! should be directly in  
front of the lt, '!lt', however there is a closing of that conditional  
which feeds the linked sheets to everything (correctly I guess), then it  
is followed by the real closing statement for the conditional.
Perhaps the slight mish-mash is upsetting IE, and isn't [if !lt IE 6] the  
equivalent of [if gte IE 6], but in a slightly more convoluted way.
Similar coding applies for your language declaration, maybe those classes  
appear at some stage (class="lt-ie9 lt-ie8 lt-ie7" etc.) but the section:




surely just ends up serving  to everything.

on XP
IE8 'sometimes' shows the page, but with little styling, into IE7 mode and  
no content is visible.
FF 11.0 will not let me switch away from a 'Handheld' media type for the  
CSS and is not showing anything like the styling that appeared on your  
first posted link.


on Win7
IE9 shows as FF, IE8 and IE7 modes show content but move your image from  
the right to the left of the page.


Best wishes

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

Re: [css-d] Internet Explorer

[Tomasz Borek]

My employer (offers mostly HR software) last December dropped support of
IE6.

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

Re: [css-d] Internet Explorer

[Tomasz Borek]

Forgot to add: when I can, I do what the original email here suggested. But
that is mostly for private and non-commercial work. Still - would be good
to know how many corporate browsers are IE.

W dniu 24 kwietnia 2012 10:28 użytkownik Tomasz Borek <
tomasz.bo...@gmail.com> napisał:

> My employer (offers mostly HR software) last December dropped support of
> IE6.
>
> pozdrawiam,
> Tomasz Borek
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Internet Explorer

[david]

On 04/23/2012 10:56 AM, John D wrote:


I know that in some cases this not possible, but if someone
reports issues with IE, I'd politely ask whether they have tried
late versions of Firefox or Chrome :-)



Yes but Ie8 is still widely used in XP systems and about 48% of the
people are still using XPs.  It is not easy to ignore all these
people especially if you are selling something.


FWIW, my employer (large insurance company) recently upgraded it's
official corporate browser ... from IE6 to IE7. What is this IE8 you 
speak of? ;-)


--
David
gn...@hawaii.rr.com
authenticity, honesty, community
http://clanjones.org/david/
http://dancing-treefrog.deviantart.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/