date:20120716

Re: [css-d] A few question about this media query (for retina display)...

2012-07-16 Thread Micky Hulse

Hi Georg! Thanks again for the help! Much appreciated. :)

On Sun, Jul 15, 2012 at 10:24 PM, Georg gunla...@c2i.net wrote:
 IE8 and older don't support @mediaqueries with min/max arguments in any
 form, so they are shut out anyway and will need a backdoor entry or other
 workaround.

Cool! Thanks for the confirmation on this.

By backdoor entry, I assume you mean something like respond.js
and/or IE conditional style sheet that loads the desktop styles (as a
work around to the whole mobile first approach/technique)?

 The 'only' keyword will shut out IE8 if used in an @import, and @media I
 think (haven't tested), and I have unintentionally shut out some low-end
 android browsers using the 'only' keyword in an SSR stylesheet. '@media
 screen ..' will do nicely.

Interesting!

I have not heard of SSRs before... Is that SQL Server Reporting Services?

Also, I prefer having my MQs is embedded inside my CSS (i.e. not as a
part of style link in the head); based on what you (and Philippe) are
saying, it sounds like I can ditch only without any huge side
effects... Cool! :)

So, I have one more bit of code to run by ya'll... How does this look:

snip

@media
screen and (min-width: 990px) and (-webkit-min-device-pixel-ratio: 1.5),
screen and (min-width: 990px) and (-o-min-device-pixel-ratio: 3/2),
screen and (min-width: 990px) and (min--moz-device-pixel-ratio: 1.5),
screen and (min-width: 990px) and (min-device-pixel-ratio: 1.5) { ... }

/snip

Goal of above code: Target (screen only) retina display (1.5 device
pixel ratio and above) at = 990 width.

I've tested and it appears to work... I just could not think of a
better way to make that more DRY.

Also, I opted to include the screen property(?), as I will probably
do something different for print in the long run.

Thanks again Georg!

Cheers,
Micky
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] google web font question

2012-07-16 Thread Philip TAYLOR




Gergely Buday wrote:

Hi,

I have chosen Pontano Sans from the Google web font collection. On
their website all Hungarian accents show right, even ő and ű, the two
letter with the long double accent, which causes problems in many
fonts.

Now, I created a simple shell script to generate a sample page with my
selected google fonts and ű and ő displays badly. What can be the
cause? What is missing?


I don't know, but there is a very odd mixture of markup
in your document, and it is also not at all clear to me
what role a shell script has to play in this (f you're
producing HTML, why not either an HTML editor or a text
editor ?).

The oddnesses are the markup are :

1) No DOCTYPE
2) XHTML notation / at meta ... /
3) HTML notation  at link ... 
4) Legacy notation at style ... !--

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

Re: [css-d] google web font question

2012-07-16 Thread Philippe Wittenbergh


Le 16 juil. 2012 à 17:48, Gergely Buday a écrit :

 I have chosen Pontano Sans from the Google web font collection. On
 their website all Hungarian accents show right, even ő and ű, the two
 letter with the long double accent, which causes problems in many
 fonts.
 
 Now, I created a simple shell script to generate a sample page with my
 selected google fonts and ű and ő displays badly. What can be the
 cause? What is missing?

When you created your set on google fonts, did you make sure to check the 
'Latin Extended' checkbox?  (the default is only use the 'latin' subset)
When I do that, your test file works correctly.

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] A few question about this media query (for retina display)...

2012-07-16 Thread David Laakso

 David L. reported that a certain change at a certain width, did not take
 place on his low-end phone. I had 'screen only' in query for that width,
 while only 'screen' for all other widths. I changed that one query to
 'screen' also, and the change took place.

 So ask David what version he has - I Cc'd him.

 Georg


Android/2.3.6 [low-end touch screen]


Best,
David Laakso


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

Re: [css-d] google web font question

2012-07-16 Thread Gergely Buday

 When you created your set on google fonts, did you make sure to check the 
 'Latin Extended' checkbox?  (the default is only use the 'latin' subset)
 When I do that, your test file works correctly.

This is a stand-alone html page along the lines of

https://developers.google.com/webfonts/docs/getting_started#Quick_Start

I did choose the latin extended fonts but afterwards I thought naming
the font would be enough.

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

2012-07-16 Thread Dave J. Holloway

Did you get this fixed? Your link throws a 404.

Dave

Am 06.07.12 04:04, schrieb John:
 At this link:
 http://www.coffeeonmars.com/testing/index.html
 
 IE 6 has 2 major problems, that I can see. 1 is that it won't draw those 
 entire widgets, and 2 is that the Content area crashes into the side menu.
 
 The widgets employ rounded corners, which I believe is HTML5 and therefore 
 unsupported by IE 6..not sure if that's it, or what causes the content to 
 crash into the side menu.
 
 Can anyone offer thoughts on that?
 
 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] Public list archives...

2012-07-16 Thread Micky Hulse

On Sun, Jul 15, 2012 at 6:35 PM, Micky Hulse mickyhulse.li...@gmail.com wrote:
 Yah, kinda looks like something got borked. I'll try to contact
 someone on their end. :)

Awesome! Tim at Incutio got back to me ASAP and they fixed 'er up ASAP:

http://archivist.incutio.com/viewlist/css-discuss/

Big ups to the folks at Incutio! :)

Thanks again Philippe!

Cheers,
Micky
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] google web font question

2012-07-16 Thread Gergely Buday

 I don't know, but there is a very odd mixture of markup
 in your document, and it is also not at all clear to me
 what role a shell script has to play in this (f you're
 producing HTML, why not either an HTML editor or a text
 editor ?).

I wanted to get a list of headlines and paragraphs with selected
Google fonts. Up to my knowledge, it is not possible to do a loop in
html but it is doable in bash.

 The oddnesses are the markup are :

 1) No DOCTYPE
 2) XHTML notation / at meta ... /
 3) HTML notation  at link ... 

I fixed these and validated with the W3C validator, thanks for the reminder.

 4) Legacy notation at style ... !--

What is the up-to-date notation for an inlined style sheet?

The problem was something else, I omitted to tell the Google api to
download latin extended:

subset=latin,latin-ext

should have been used as here:

link rel=stylesheet type=text/css
href=http://fonts.googleapis.com/css?family=Inconsolata|Pontano+Sanssubset=latin,latin-ext

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

2012-07-16 Thread Tedd Sperling


On Jul 15, 2012, at 5:45 PM, Gates, Jeff gat...@si.edu wrote:

 Two images on a page don't seem to be resizing as they should when I reduce 
 the viewport. The page in question is 
 http://www.outtacontext.com/wp2/about/past7/
 
 -nip-
 
 Can someone tell me why the images aren't scaling down? Thanks.
 
 Jeff

Jeff:

The images are scaling for me (Safari 6.0 Mac OS 10.8).

However, when I want to scale images, I use em's like this:

http://sperling.com/examples/zoom/

HTH's

tedd


_
t...@sperling.com
http://sperling.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] float breaks borders

2012-07-16 Thread Gergely Buday

Hi there,

the following html/css code works, a gray line appears on the left and right:

html
 head
  style type=text/css media=screen
   !--

 div#container { width: 800px;
 margin-left: auto;
 margin-right: auto; }

 div#headline  {
 font-size  : 72px;
 text-align : center;
 margin-bottom: 10px; }

 div#subheader {
 width: 740px;
 font-size: 24px;
 text-align: center;
 margin-bottom: 40px;
 margin-left: auto;
 margin-right: auto;
 border-top: 1px solid #000 ;
 border-bottom: 1px solid #000 ; }

 div#main  {
 padding-left: 29px;
 padding-right: 29px;
 font-family: 'Didact Gothic';
 border-left: 1px solid #ccc;
 border-right: 1px solid #ccc;
 margin-bottom: 40px; }

 div#text  { width: 600px; }

 div#sidebar   { width: 120px;
 margin-left: 20px; }

   --
  /style
 /head

 body
  div id=container
   div id=headlineLOREM IPSUM/div
   div id=subheaderIPSUM LOREM/div
   div id=main
div id=text
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

/div
div id=sidebar
 plorem/p
 pipsum/p
 plorem/p
 pipsum/p
 plorem/p
 pipsum/p
 plorem/p
 pipsum/p
/div
   /div
  /div
 /body
/html

Now, if I use float at div#text and div#sidebar the sidebar column
goes to the right of the text colum (good), but the gray borders
disappear (bad):

--- noborder.html   2012-07-16 17:08:06.965217695 +0200
+++ noborder_bad.html   2012-07-16 17:11:06.047341839 +0200
@@ -30,9 +30,11 @@
  border-right: 1px solid #ccc;
  margin-bottom: 40px; }

- div#text  { width: 600px; }
+ div#text  { width: 600px;
+ float: left; }

  div#sidebar   { width: 120px;
+ float: right;
  margin-left: 20px; }

--

1px border + 29px padding + 600px text + 20px margin-left + 120px
sidebar + 29px padding + 1px border is 800px, so in theory it works.
Or is this not the problem?

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

2012-07-16 Thread David Laakso

On Mon, Jul 16, 2012 at 11:15 AM, Gergely Buday gbu...@gmail.com wrote:

 Now, if I use float at div#text and div#sidebar the sidebar column
 goes to the right of the text colum (good), but the gray borders
 disappear (bad):

 - Gergely

Try:
 div#main{overflow:hidden;}/* add to enclose and clear the floats*/
 div#text{ width: 600px;float: left;border:1px solid red }
 div#sidebar{ idth: 120px;border:1px solid red;float: right;
/*margin-left: 20px;delete */}

Best,
David Laakso

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

Re: [css-d] float breaks borders

2012-07-16 Thread David Laakso

On Mon, Jul 16, 2012 at 11:58 AM, David Laakso laakso.davi...@gmail.com wrote:
 On Mon, Jul 16, 2012 at 11:15 AM, Gergely Buday gbu...@gmail.com wrote:

Error correction:
  div#sidebar{ idth: 120px;border:1px solid red;float: right;
 /*margin-left: 20px;delete */}

Should  read:
div#sidebar{width: 120px;border:1px solid red;float:
right;/*margin-left: 20px;delete */}

 Best,
David Laakso

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

Re: [css-d] float breaks borders

2012-07-16 Thread David Laakso

Sorry for the  noise! I am having a bad day:

Should  read:
div#sidebar{width:120px;border:1px solid red;float:right;}

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

Re: [css-d] A few question about this media query (for retina display)...

2012-07-16 Thread Micky Hulse

On Mon, Jul 16, 2012 at 2:39 AM, David Laakso laakso.davi...@gmail.com wrote:
 So ask David what version he has - I Cc'd him.
 Android/2.3.6 [low-end touch screen]

Awesome! Thanks so much David, Philippe and Georg! You folks are life savers. :)

I owe you guys (many) one(s). Hopefully one of these days I can pay ya'll back.

Thanks again!

Cheers,
Micky
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- 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] A few question about this media query (for retina display)...

Re: [css-d] google web font question

Re: [css-d] google web font question

Re: [css-d] A few question about this media query (for retina display)...

Re: [css-d] google web font question

Re: [css-d] IE 6 workaround?

Re: [css-d] Public list archives...

Re: [css-d] google web font question

Re: [css-d] Responsive images not scaling down

[css-d] float breaks borders

Re: [css-d] float breaks borders

Re: [css-d] float breaks borders

Re: [css-d] float breaks borders

Re: [css-d] A few question about this media query (for retina display)...

14 matches

Site Navigation

Mail list logo

Footer information