Re: [css-d] Viewport vs. device dimensions

2013-03-08 Thread Philippe Wittenbergh 

Le 9 mars 2013 à 00:49, Markus Ernst  a écrit :

> In the www-style list, there is a discussion going on about handling media 
> queries on rotatable devices. Some is about width/height/aspect radio vs. 
> device-width/device-height/device-aspect-ratio.

Are you talking about this thread:
http://lists.w3.org/Archives/Public/www-style/2013Mar/thread.html#msg165
(I've yet to read that thread fully, so I may be missing something in your 
question)

> Is there any useful thing about knowing device-* values? I understand how to 
> use media queries to adapt the layout to the viewport width, but what useful 
> thing can I do with knowing the device width, if it may differ from the 
> viewport width?

For generic html pages (things that are viewed inside a browser window), I 
don't think device-* MQ are very useful. However, html content can also be 
viewed inside a 'web view', inside apps, where device-* MQ can prove more 
useful: think the difference between the iPhone 4 and the iPhone 5 (basically 
same device-width but different device-height and -aspect-ratio). A designer 
may want to serve different spacing in order to make optimal use of the 
available height.

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




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

Re: [css-d] Viewport vs. device dimensions

2013-03-08 Thread Philippe Wittenbergh 

Le 9 mars 2013 à 00:49, Markus Ernst  a écrit :

> In the www-style list, there is a discussion going on about handling media 
> queries on rotatable devices. Some is about width/height/aspect radio vs. 
> device-width/device-height/device-aspect-ratio.

Are you talking about this thread:
http://lists.w3.org/Archives/Public/www-style/2013Mar/thread.html#msg165
(I've yet to read that thread fully, so I may be missing something in your 
question)

> Is there any useful thing about knowing device-* values? I understand how to 
> use media queries to adapt the layout to the viewport width, but what useful 
> thing can I do with knowing the device width, if it may differ from the 
> viewport width?

For generic html pages (things that are viewed inside a browser window), I 
don't think device-* MQ are very useful. However, html content can also be 
viewed inside a 'web view', inside apps, where device-* MQ can prove more 
useful: think the difference between the iPhone 4 and the iPhone 5 (basically 
same device-width but different device-height and -aspect-ratio). A designer 
may want to serve different spacing in order to make optimal use of the 
available height.

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




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

Re: [css-d] gap between image and background

2013-03-08 Thread Philippe Wittenbergh 

Le 9 mars 2013 à 01:54, Angela French  a écrit :

> At full viewport everything is fine, but at around 906px a light colored line 
> appears at the bottom edge of the colored background area of the image where 
> it meets the background color of the div that the image is in (they are both 
> the same color.   The bottom area of the png is transparent so that the leaf 
> appears to be floating over the nav bar below it.  This line appears in IE 9, 
> FF 19.0, Chrome 25, Safari.

After much trying I could finally reproduce it in Chrome dev channel (not in 
Safari). I think it is a side effect of the scaling of the image that happens 
at smaller sizes. Why don't you make it completely transparent ?

> I also see in Safari that the colour used in my image does not match the 
> background color of the div even though they are both  # c7b619.

I don't see that mismatch on my side, however the image appears to have a sRGB 
profile. Removing it should fix it. In general the image could be better 
optimised (Imageoptim does wonders - it slashed about 30% out of the file size; 
the sRGB colour profile accounts for about 5k)

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




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

Re: [css-d] gap between image and background

2013-03-08 Thread Chris F.A. Johnson 

On Fri, 8 Mar 2013, Angela French wrote:


I'm working on my first Twitter Bootstrap site.  Here is my link:  
http://168.156.9.250/WELA/ .
At full viewport everything is fine, but at around 906px a light colored line 
appears at the bottom edge of the colored background area of the image where it 
meets the background color of the div that the image is in (they are both the 
same color.   The bottom area of the png is transparent so that the leaf 
appears to be floating over the nav bar below it.  This line appears in IE 9, 
FF 19.0, Chrome 25, Safari.  I also see in Safari that the color used in my 
image does not match the background color of the div even though they are both  
# c7b619.

Any ideas as to the origin of the line and how to get rid of it?


   Remove all CSS and add it back a bit (or one file) at a time until
   the problem appears.

--
   Chris F.A. Johnson, 
   Author:
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] fluid image inside div puts extra padding below

2013-03-08 Thread Laura Valentino 
On Fri, Mar 8, 2013 at 4:57 PM, Jon Reece  wrote:

>
> Because images, like text, are inline by default, there is extra space
> added below for descenders. The 2 easiest ways to prevent this from
> happening are 1) apply display: block to the image, or 2) add
> vertical-align: top/bottom/middle.
>
>
Thanks for explaining this! I had no idea :)

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

Re: [css-d] fluid image inside div puts extra padding below

2013-03-08 Thread Jon Reece 
On Fri, Mar 8, 2013 at 11:08 AM, Laura Valentino  wrote:

> I have a fluid image inside a div and it is putting some padding below the
> image (the div is colored blue so you can see it in the example). How can I
> remove it? I've tried various things with the margins and padding of the
> image and the div, but to no avail.
>
> The example is here, and I've stripped the page and code down to the
> minimum if you view the source:
>
> http://kvikna.com/testing/ieeg/slideshow.html
>

Because images, like text, are inline by default, there is extra space
added below for descenders. The 2 easiest ways to prevent this from
happening are 1) apply display: block to the image, or 2) add
vertical-align: top/bottom/middle.


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

[css-d] gap between image and background

2013-03-08 Thread Angela French 
I'm working on my first Twitter Bootstrap site.  Here is my link:  
http://168.156.9.250/WELA/ .
At full viewport everything is fine, but at around 906px a light colored line 
appears at the bottom edge of the colored background area of the image where it 
meets the background color of the div that the image is in (they are both the 
same color.   The bottom area of the png is transparent so that the leaf 
appears to be floating over the nav bar below it.  This line appears in IE 9, 
FF 19.0, Chrome 25, Safari.  I also see in Safari that the color used in my 
image does not match the background color of the div even though they are both  
# c7b619.

Any ideas as to the origin of the line and how to get rid of it?

Thank you


Angela French
Internet Specialist
State Board for Community and Technical Colleges
360-704-4316
afre...@sbctc.edu
http://www.checkoutacollege.com/

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

[css-d] fluid image inside div puts extra padding below

2013-03-08 Thread Laura Valentino 
Hi,
I have a fluid image inside a div and it is putting some padding below the
image (the div is colored blue so you can see it in the example). How can I
remove it? I've tried various things with the margins and padding of the
image and the div, but to no avail.

The example is here, and I've stripped the page and code down to the
minimum if you view the source:

http://kvikna.com/testing/ieeg/slideshow.html

Thanks!

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

2013-03-08 Thread Markus Ernst 

Hello

In the www-style list, there is a discussion going on about handling 
media queries on rotatable devices. Some is about width/height/aspect 
radio vs. device-width/device-height/device-aspect-ratio.


Is there any useful thing about knowing device-* values? I understand 
how to use media queries to adapt the layout to the viewport width, but 
what useful thing can I do with knowing the device width, if it may 
differ from the viewport width?


Just something that puzzles me...

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