Re: [css-d] Responsive Images
Crest Christopher wrote: Question is, how many resolutions, one, three,five... ? Why not scale on-the-fly ? Visit : http://photos.for-charity.org/ click on any album thumbnail, then any image thumbnail, and notice that the resulting URL is of the form : http://photos.for-charity.org/Shew/?img=/Flowers/Flower%281%29.jpgheight=720 Replace the final 720 with any realistic value and you will be delivered a new image of exactly that height. The watermarking is added dynamically at the same time. 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] Responsive Images
Howdy Philip,
~~~
Friday, November 7, 2014, 3:56:34 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
The watermarking is added dynamically at the same time.
Philip Taylor
Are you certain that the watermarks are added dynamically?
If so, I would like to see the code that accomplishes that feature. It would
solve some issues for me, and also for some others on another discussion list.
Thanks.
G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com
---
This email is free from viruses and malware because avast! Antivirus protection
is active.
http://www.avast.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 Images
Sent from my iPhone On Nov 6, 2014, at 9:34 PM, Crest Christopher crestchristop...@gmail.com wrote: @media is what you recommend for changing images based on browser size, correct ? Christpher ? Background images, yes. For images coded in the markup, see the polyfill I gave a link to twice before or look up picture element/responsive images. Support is spotty at the moment for the latter. compose-unknown-contact.jpgCrest Christopher Thursday, November 06, 2014 9:11 PM Basically the web is becoming a billboard, if I want to design for 5K I'd need a 5K image, from there I scale it down, or up because I'll be designing for mobile first, then I adjust the page and graphics accordingly for desktop. Christopher postbox-contact.jpgTom Livingston Thursday, November 06, 2014 7:41 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? I have used images for 2x displays. I dont worry about it for photographs. Logos mostly. see picturefill.js http://scottjehl.github.io/picturefill/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 compose-unknown-contact.jpgCrest Christopher Thursday, November 06, 2014 7:32 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. I don't understand ? postbox-contact.jpgTom Livingston Thursday, November 06, 2014 7:17 PM Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com wrote: Why do you recommend building mobile first ? Aside from being best practice, it is much harder and requires more code to achieve a mobile layout from a desktop first build because it requires you to undo a great deal of the desktop layout. It is less code and work to build mobile first as it is a simpler, additive process. I can tell you from experience that desktop first is a nightmare. There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your image Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. compose-unknown-contact.jpgCrest Christopher Thursday, November 06, 2014 6:38 PM Why do you recommend building mobile first ? There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your images. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. Christopher __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ --
Re: [css-d] Responsive Images
nov 7 2014 00:38 Crest Christopher crestchristop...@gmail.com: Why do you recommend building mobile first ? The main reason as I see it, is that mobile first methodology forces you to take a hard look at your content and prioritize it after what the users actually need to see first, second and so on. All fluff has to go for mobile. And if it’s fluff why should it stay there for browsers? When you do this, you typically will realize that content, its structure and presentation is a design problem. Depending on your clients it may also involve teaching your them about their content. It baffles me how little some commercial operations actually know about what content their users actually are looking for and when they need it. Of course, content structure is very much tightly connected to markup, which I find many designers take far too lightly as it influences presentation, where CSS comes in. So far I’ve broken my wows when doing mobile first by using javascript solutions affecting layout and structure. But I have no users on mobile that have javascript inactivated (about 5% on desktop). Anyway, from a CSS design standpoint I too find it more fruitful to do a good mobile design and iteratively build on that when targeting larger displays. __ 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
Mobile first to me is mos logical because simply, it's easier to add
then to take away !
Christopher
MiB mailto:digital.disc...@gmail.com
Friday, November 07, 2014 8:28 AM
The main reason as I see it, is that mobile first methodology forces
you to take a hard look at your content and prioritize it after what
the users actually need to see first, second and so on. All fluff has
to go for mobile. And if it’s fluff why should it stay there for
browsers?
When you do this, you typically will realize that content, its
structure and presentation is a design problem. Depending on your
clients it may also involve teaching your them about their content.
It baffles me how little some commercial operations actually know
about what content their users actually are looking for and when they
need it.
Of course, content structure is very much tightly connected to markup,
which I find many designers take far too lightly as it influences
presentation, where CSS comes in. So far I’ve broken my wows when
doing mobile first by using javascript solutions affecting layout and
structure. But I have no users on mobile that have javascript
inactivated (about 5% on desktop).
Anyway, from a CSS design standpoint I too find it more fruitful to do
a good mobile design and iteratively build on that when targeting
larger displays.
__
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/
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 6:38 PM
Why do you recommend building mobile first ?
There is a pro and a con with swapping images, the pro, you can use
bitmap images, the con, you have to have, as I mentioned earlier,
maybe up to six different resolutions for your images. The CSS may be
the easiest to do, the hardest will be managing your images.
If you don't go the swap images route as suggested by Tom :) You have
to design all in vector. I ask because, unlike previous web
development experiences, I want to export my image assets perfectly,
focus more on markup and styles and hopefully have an end result that
plays well on most, if not all mobile phones and tablets and last but
not least, desktops / laptops.
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many
mobile device browsers will download images within other mqs. There is
an easy way to stop this in most cases.
For example, my base mobile styles (because you build pages
mobile-first, right?) have a bg img. I'll use that img until I hit a
breakpoint of 37em at which point I'll swap to a larger img. As is,
most browsers will download both imgs needlessly. You can easily stop
this by wrapping the base style img in an mq like:
@media screen and ( max-width: 37em){
Background img here
}
Notice the mq is a max-width of the next breakpoint.
Can't put my finger on the article and research that shows this, but
will look later.
HTH
Sent from my iPhone
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 12:48 AM
Swapping will require more page requests from the server. The other
solution mentioned requires by default a 5K image if you go by the
highest screen possible, just so you can scale down appropriately
without blurred images.
I suppose gone are the days I could find an image at 800x600 do photo
magic to the image in Photoshop then merge it with the design.
Christopher
Karl DeSaulniers mailto:k...@designdrumm.com
Thursday, November 06, 2014 12:29 AM
+1
Karl DeSaulniers
Design Drumm
http://designdrumm.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] Responsive Images
What is the technology behind this scaling on the fly ? It's fluid
compared to image replacement.
Christopher
Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 3:56 AM
Crest Christopher wrote:
Why not scale on-the-fly ? Visit :
http://photos.for-charity.org/
click on any album thumbnail, then any image thumbnail, and notice
that the resulting URL is of the form :
http://photos.for-charity.org/Shew/?img=/Flowers/Flower%281%29.jpgheight=720
Replace the final 720 with any realistic value and you will be
delivered a new image of exactly that height. The watermarking is
added dynamically at the same time.
Philip Taylor
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 9:43 AM
I'd like to read the article, when you find the link.
There is only one issue, if I'm doing my own custom design with a
smorgasbord of images etc. I have to find the largest, suppose a 5K
image, then do my design magic in Photoshop, then scale the design at
different resolutions. Question is, how many resolutions, one, three,
five... ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many
mobile device browsers will download images within other mqs. There is
an easy way to stop this in most cases.
For example, my base mobile styles (because you build pages
mobile-first, right?) have a bg img. I'll use that img until I hit a
breakpoint of 37em at which point I'll swap to a larger img. As is,
most browsers will download both imgs needlessly. You can easily stop
this by wrapping the base style img in an mq like:
@media screen and ( max-width: 37em){
Background img here
}
Notice the mq is a max-width of the next breakpoint.
Can't put my finger on the article and research that shows this, but
will look later.
HTH
Sent from my iPhone
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 12:48 AM
Swapping will require more page requests from the server. The other
solution mentioned requires by default a 5K image if you go by the
highest screen possible, just so you can scale down appropriately
without blurred images.
I suppose gone are the days I could find an image at 800x600 do photo
magic to the image in Photoshop then merge it with the design.
Christopher
Karl DeSaulniers mailto:k...@designdrumm.com
Thursday, November 06, 2014 12:29 AM
+1
Karl DeSaulniers
Design Drumm
http://designdrumm.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] Responsive Images
nov 7 2014 14:28 MiB digital.disc...@gmail.com: When you do this, you typically will realize that content, its structure and presentation is a design problem. Depending on your clients it may also involve teaching your them about their content. Talking about fluff, that ”your” wasn’t supposed to be there. Should be Depending on your clients it may also involve teaching them about their content.” I must stop to post before coffee. __ 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
GJim wrote: Are you certain that the watermarks are added dynamically? Completely certain; it is my web site. If so, I would like to see the code that accomplishes that feature. It would solve some issues for me, and also for some others on another discussion list. I will send under separate cover. 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] Responsive Images
On Nov 7, 2014, at 7:41 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Completely certain; it is my web site. Philip Taylor Hey Philip, Have you thought of pointer-events: none; and pointer-events: auto for your images? Noticed you have -webkit-user-select: none. That doesn't work for the mouse. Thinking you already know this though. :) Best, Karl DeSaulniers Design Drumm http://designdrumm.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 Images
Hallo Karl -- Have you thought of pointer-events: none; and pointer-events: auto for your images? The site is /very/ old, and has not been updated for some considerable time. I am not familiar with pointer-events : could you briefly explain what they accomplish and the effects of the two values none and auto ? Noticed you have -webkit-user-select: none. That doesn't work for the mouse. Thinking you already know this though. :) I certainly did not add that myself (I do not use vendor prefixes) and I cannot see it when I view source or look at the style files; where did you see it, please ? ** Phil. __ 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
On Nov 7, 2014, at 7:50 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Hallo Karl -- Have you thought of pointer-events: none; and pointer-events: auto for your images? The site is /very/ old, and has not been updated for some considerable time. I am not familiar with pointer-events : could you briefly explain what they accomplish and the effects of the two values none and auto ? Noticed you have -webkit-user-select: none. That doesn't work for the mouse. Thinking you already know this though. :) I certainly did not add that myself (I do not use vendor prefixes) and I cannot see it when I view source or look at the style files; where did you see it, please ? ** Phil. OH!, I saw it in safari when I viewed your link. Safari 6.2 Mac OS 10.8.5 From what I read, pointer-events: works mostly with SVG but it also controls the click of an object and all its children. So if you put pointer-events:none; on an element, it and all its children are un-clickable. However if you wish for a child to still be clickable but not its parent, then you reset it with pointer-events: auto;. Once you put pointer-events:auto on that child, all children in that child element are clickable and so forth. It has come in handy for me for example, on those curtains I was working on a while ago. I didn't want users to click/drag them but still have things behind them clickable. pointer-events:none in essence, with how I was using it, made a div able to be clicked through. Like it wasn't there. Pretty nifty trick. :) Best, Karl DeSaulniers Design Drumm http://designdrumm.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 Images
Crest Christopher wrote: What is faster for page request from the server, ASP.Net code or image swapping ? I found the ASP.Net code fast, then again my connection may just be fluid, I can't assume all will be like this, unless the ASP.Net code is effective. :-) Bear in mind that that Asp.Net code is being run on a bog-standard home PC, several years old, and uploaded on a slow ADSL link that can manage barely 448kb uploads. If you found it fast even bearing those facts in mind, think how fast it would be on a T1-connected real server. 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] Responsive Images
The only issue is the images hug the border of the browser, but that is
a style issue ;-)
How do you set this up using this Asp.Net code ? I like it better then
image replacements as I don't notice the flicker when the image changes
size.
Christopher
Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 9:08 AM
Crest Christopher wrote:
Bear in mind that that Asp.Net code is being run on a bog-standard
home PC, several years old, and uploaded on a slow ADSL link that can
manage barely 448kb uploads. If you found it fast even bearing those
facts in mind, think how fast it would be on a T1-connected real server.
Philip Taylor
Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 9:00 AM
Crest Christopher wrote:
It uses Asp.Net and is based on the code discussed here :
http://forums.asp.net/post/3495197.aspx
Philip Taylor
Philip Taylor mailto:p.tay...@rhul.ac.uk
Friday, November 07, 2014 3:56 AM
Crest Christopher wrote:
Why not scale on-the-fly ? Visit :
http://photos.for-charity.org/
click on any album thumbnail, then any image thumbnail, and notice
that the resulting URL is of the form :
http://photos.for-charity.org/Shew/?img=/Flowers/Flower%281%29.jpgheight=720
Replace the final 720 with any realistic value and you will be
delivered a new image of exactly that height. The watermarking is
added dynamically at the same time.
Philip Taylor
Crest Christopher mailto:crestchristop...@gmail.com
Thursday, November 06, 2014 9:43 AM
I'd like to read the article, when you find the link.
There is only one issue, if I'm doing my own custom design with a
smorgasbord of images etc. I have to find the largest, suppose a 5K
image, then do my design magic in Photoshop, then scale the design at
different resolutions. Question is, how many resolutions, one, three,
five... ?
Christopher
Tom Livingston mailto:tom...@gmail.com
Thursday, November 06, 2014 7:02 AM
Swapping bg images is easy enough with media queries, however, many
mobile device browsers will download images within other mqs. There is
an easy way to stop this in most cases.
For example, my base mobile styles (because you build pages
mobile-first, right?) have a bg img. I'll use that img until I hit a
breakpoint of 37em at which point I'll swap to a larger img. As is,
most browsers will download both imgs needlessly. You can easily stop
this by wrapping the base style img in an mq like:
@media screen and ( max-width: 37em){
Background img here
}
Notice the mq is a max-width of the next breakpoint.
Can't put my finger on the article and research that shows this, but
will look later.
HTH
Sent from my iPhone
__
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
Crest Christopher wrote: The only issue is the images hug the border of the browser, but that is a style issue ;-) How do you set this up using this Asp.Net code ? I like it better then image replacements as I don't notice the flicker when the image changes size. Well, your server needs to be running IIS (Microsoft Internet Information Server) and then you just drop the .aspx and .aspx.vb or .aspx.js files into the appropriate locations on the server. I imagine that if your server does not run IIS then there may be alternative technologies such as PHP that can accomplish much the same thing, but I personally know nothing about such server-side technologies. 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] Responsive Images
Yes php is one. There are tuts on this all over and example scripts. Best to have an Apache server for this, not Windows from my experience. Depending on your server there may be some php.ini directives that you will need to set, but these tuts usually go over this part with you. Some search terms: php dynamic image from text php dynamic text on image php thumbnail creator Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 7, 2014, at 8:21 AM, Philip Taylor p.tay...@rhul.ac.uk wrote: Crest Christopher wrote: The only issue is the images hug the border of the browser, but that is a style issue ;-) How do you set this up using this Asp.Net code ? I like it better then image replacements as I don't notice the flicker when the image changes size. Well, your server needs to be running IIS (Microsoft Internet Information Server) and then you just drop the .aspx and .aspx.vb or .aspx.js files into the appropriate locations on the server. I imagine that if your server does not run IIS then there may be alternative technologies such as PHP that can accomplish much the same thing, but I personally know nothing about such server-side technologies. 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/
Re: [css-d] Responsive Images
On Nov 7, 2014, at 8:27 AM, Karl DeSaulniers k...@designdrumm.com wrote: Yes php is one. There are tuts on this all over and example scripts. Best to have an Apache server for this, not Windows from my experience. Depending on your server there may be some php.ini directives that you will need to set, but these tuts usually go over this part with you. Some search terms: php dynamic image from text php dynamic text on image php thumbnail creator Best, Karl DeSaulniers Design Drumm http://designdrumm.com You can even get creative and combine two images together. A transparent png (with styled text and drop shadows, etc) and an opaque image (tie-dye background, photo?). Sorry for the OT everyone, just love me some PHP. :P Best, Karl DeSaulniers Design Drumm http://designdrumm.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 Images
On Nov 7, 2014, at 8:32 AM, Karl DeSaulniers k...@designdrumm.com wrote: On Nov 7, 2014, at 8:27 AM, Karl DeSaulniers k...@designdrumm.com wrote: Yes php is one. There are tuts on this all over and example scripts. Best to have an Apache server for this, not Windows from my experience. Depending on your server there may be some php.ini directives that you will need to set, but these tuts usually go over this part with you. Some search terms: php dynamic image from text php dynamic text on image php thumbnail creator Best, Karl DeSaulniers Design Drumm http://designdrumm.com You can even get creative and combine two images together. A transparent png (with styled text and drop shadows, etc) and an opaque image (tie-dye background, photo?). Sorry for the OT everyone, just love me some PHP. :P Best, Karl DeSaulniers Design Drumm http://designdrumm.com This is the file I created to do this with. Might need some tweaking to do what you want. Point directories and such. I wont be doing any support on this script, but your all more than welcome to download and modify to taste. http://designdrumm.com/upload_images_test.zip This was used to place a copyright on product images. HTH, Best, Karl DeSaulniers Design Drumm http://designdrumm.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 Images
Howdy Karl,
~~~
Friday, November 7, 2014, 9:44:17 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
http://designdrumm.com/upload_images_test.zip
This was used to place a copyright on product images.
HTH,
Best,
Karl DeSaulniers
Nice utility to automate adding a copyright to an image.
However, that's not a dynamic solution such as Philip mentioned.
Also, I notice that your code allows for a maximum image size of 516K - is there
a particular reason for that limitation?
G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com
Savvy ponderable:
A man kin easy brag hisself out'n a place to lean on the bar.
---
This email is free from viruses and malware because avast! Antivirus protection
is active.
http://www.avast.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 Images
On Nov 7, 2014, at 9:08 AM, GJim jarne...@wyomerc.com wrote: Howdy Karl, Nice utility to automate adding a copyright to an image. However, that's not a dynamic solution such as Philip mentioned. Also, I notice that your code allows for a maximum image size of 516K - is there a particular reason for that limitation? Thank you. Actually it is dynamic. $yearstamp = date( Y); ... $copyright = Copyright Design Drumm $yearstamp; Line 203: imagestringup($timg, $font, $max_w-10, $max_h-5, $copyright, $picFG);//Very basic text watermark. Replace with an image watermark maybe? The max image size I believe (I wrote this back in 2010) was a personal preference associated with server space OR max upload size of my server. Can't remember off the top, but this number can be changed to any size you want, just convert it to bytes. I built this so I could upload hundreds of product photos more quickly and efficiently. It also can be used for multiple formates. Gif, jpeg and png. The image you place on top must be a transparent png though. Best, Karl __ 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
Howdy Karl,
~~~
Friday, November 7, 2014, 10:38:31 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
Actually it is dynamic.
$yearstamp = date( Y);
...
$copyright = Copyright Design Drumm $yearstamp;
My perception of 'dynamic', as mentioned by Philip, is that the original image
resides on a server sans markings - it's only when displayed on the
site-visitor's screen that the copyright is displayed.
Your utility takes an existing image and adds the copyright, then stores as a
new image. Certainly useful - I've been using Corel PaintShop and/or GIMP to
add
such info.
G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com
Savvy ponderable:
A poet who reads his verse in public may have other nasty habits. - Robert
Heinlein, 'The Notebooks of Lazarus Long'
---
This email is free from viruses and malware because avast! Antivirus protection
is active.
http://www.avast.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 Images
On Nov 7, 2014, at 9:50 AM, GJim jarne...@wyomerc.com wrote:
Howdy Karl,
~~~
Friday, November 7, 2014, 10:38:31 AM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.
My reply appears here and/or interspersed within your message.
~~~
Actually it is dynamic.
$yearstamp = date( Y);
...
$copyright = Copyright Design Drumm $yearstamp;
My perception of 'dynamic', as mentioned by Philip, is that the original image
resides on a server sans markings - it's only when displayed on the
site-visitor's screen that the copyright is displayed.
Your utility takes an existing image and adds the copyright, then stores as a
new image. Certainly useful - I've been using Corel PaintShop and/or GIMP to
add
such info.
G'Jim c):{-
It will also size it to what ever size you set. I used it to create a large
image and thumbnail from the same pic.
Like I said, may need some tweaking and you could probably combine another php
script with it to get your dynamic content into it.
HTH,
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.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 Images
This discussion on responsive images is making me wonder how modern CMSs that support content editors inserting an image onto a page are handling the fact that they might need to upload three images ? Any ideas? Angela French -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher Sent: Thursday, November 06, 2014 6:35 PM To: Tom Livingston Cc: Karl DeSaulniers; CSS-Discuss Subject: Re: [css-d] Responsive Images @media is what you recommend for changing images based on browser size, correct ? Christpher ? Crest Christopher mailto:crestchristop...@gmail.com Thursday, November 06, 2014 9:11 PM Basically the web is becoming a billboard, if I want to design for 5K I'd need a 5K image, from there I scale it down, or up because I'll be designing for mobile first, then I adjust the page and graphics accordingly for desktop. Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 06, 2014 7:41 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? I have used images for 2x displays. I dont worry about it for photographs. Logos mostly. see picturefill.js http://scottjehl.github.io/picturefill/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com http://medialogic.com #663399 Crest Christopher mailto:crestchristop...@gmail.com Thursday, November 06, 2014 7:32 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. I don't understand ? Tom Livingston mailto:tom...@gmail.com Thursday, November 06, 2014 7:17 PM Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Why do you recommend building mobile first ? Aside from being best practice, it is much harder and requires more code to achieve a mobile layout from a desktop first build because it requires you to undo a great deal of the desktop layout. It is less code and work to build mobile first as it is a simpler, additive process. I can tell you from experience that desktop first is a nightmare. There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your image Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. Crest Christopher mailto:crestchristop...@gmail.com Thursday, November 06, 2014 6:38 PM Why do you recommend building mobile first ? There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your images. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops /
Re: [css-d] Responsive Images
Well with Wordpress it creates the different sizes for you that you set in your prefs. Best, Karl DeSaulniers Design Drumm http://designdrumm.com On Nov 7, 2014, at 10:21 AM, Angela French afre...@sbctc.edu wrote: This discussion on responsive images is making me wonder how modern CMSs that support content editors inserting an image onto a page are handling the fact that they might need to upload three images ? Any ideas? Angela French -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher Sent: Thursday, November 06, 2014 6:35 PM To: Tom Livingston Cc: Karl DeSaulniers; CSS-Discuss Subject: Re: [css-d] Responsive Images @media is what you recommend for changing images based on browser size, correct ? Christpher ? Crest Christopher mailto:crestchristop...@gmail.com Thursday, November 06, 2014 9:11 PM Basically the web is becoming a billboard, if I want to design for 5K I'd need a 5K image, from there I scale it down, or up because I'll be designing for mobile first, then I adjust the page and graphics accordingly for desktop. Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 06, 2014 7:41 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? I have used images for 2x displays. I dont worry about it for photographs. Logos mostly. see picturefill.js http://scottjehl.github.io/picturefill/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com http://medialogic.com #663399 Crest Christopher mailto:crestchristop...@gmail.com Thursday, November 06, 2014 7:32 PM That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. Let me understand, you typically keep your images up to 600px in size regardless if the screen size is 2K or heck even up to 4K ? I assume you do the 2x / 3x for Retina displays ? See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. I don't understand ? Tom Livingston mailto:tom...@gmail.com Thursday, November 06, 2014 7:17 PM Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher crestchristop...@gmail.com mailto:crestchristop...@gmail.com wrote: Why do you recommend building mobile first ? Aside from being best practice, it is much harder and requires more code to achieve a mobile layout from a desktop first build because it requires you to undo a great deal of the desktop layout. It is less code and work to build mobile first as it is a simpler, additive process. I can tell you from experience that desktop first is a nightmare. There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your image Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask because, unlike previous web development experiences, I want to export my image assets perfectly, focus more on markup and styles and hopefully have an end result that plays well on most, if not all mobile phones and tablets and last but not least, desktops / laptops. See my second reply above. I'll also add that you will be hard pressed to get perfection in a web page compared to a psd. Crest Christopher mailto:crestchristop...@gmail.com Thursday, November 06, 2014 6:38 PM Why do you recommend building mobile first ? There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be managing your images. If you don't go the swap images route as suggested by Tom :) You have to design all in vector. I ask
Re: [css-d] Responsive Images
Crest Christopher wrote:
I've always wanted to add a watermark to images automatically when
uploaded to the server for display on the page. Can you customize the
watermark ?
Of course : see the code fragment below.
My only problem is I have to check if I can support IIS,
which is faster IIS or PHP ?
Absolutely no idea, Christopher, but my code works only on IIS.
Philip Taylor
script language=C# runat=server
public bool ThumbnailCallback () {return false;}
public void Page_Load (object sender, EventArgs e)
{
int max = 30;
int min = 1;
string imageURL = Request.QueryString [img];
int imageMax = Convert.ToInt32 (Request.QueryString [max]);
int xOffset = 0, imageWidth = 0, imageHeight = 0;
imageURL =
D:\\Web\\Sites\\Org\\For-Charity\\Photos\\Resources\\Images\\Private\\
+ imageURL;
System.Drawing.Image fullSizeImg = null;
fullSizeImg = System.Drawing.Image.FromFile (imageURL);
int CurrentimgHeight = fullSizeImg.Height;
int CurrentimgWidth = fullSizeImg.Width;
if (CurrentimgHeight CurrentimgWidth)
{
imageHeight = imageMax;
imageWidth = Convert.ToInt32 ( (1.0 * CurrentimgWidth) / (1.0 *
CurrentimgHeight) * imageHeight);
}
else
{
imageWidth = imageMax;
imageHeight = Convert.ToInt32 ( (1.0 * CurrentimgHeight) / (1.0
*
CurrentimgWidth) * imageWidth);
};
Response.ContentType = image/jpeg;
System.Drawing.Image.GetThumbnailImageAbort dummyCallBack = null;
dummyCallBack = new System.Drawing.Image.GetThumbnailImageAbort
(ThumbnailCallback);
System.Drawing.Image thumbNailImg = null;
thumbNailImg = fullSizeImg.GetThumbnailImage (imageWidth, imageHeight,
dummyCallBack, IntPtr.Zero);
System.Drawing.Graphics g = System.Drawing.Graphics.FromImage
(thumbNailImg);
SizeF StringSizeF = default (SizeF);
float DesiredWidth = 0;
Font wmFont = default (Font);
float RequiredFontSize = 0;
float Ratio = 0;
String strWatermark = Copyright © 2010;
String strWatermarkowner = Request.QueryString [wmo];
float xdelta = 0;
float ydelta = 0;
wmFont = new Font (Arial, 24, FontStyle.Bold);
DesiredWidth = Convert.ToInt32 (imageWidth * 0.85);
xOffset = Convert.ToInt32 ( (imageWidth - DesiredWidth) / 2);
StringSizeF = g.MeasureString (strWatermark, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
xdelta = 0; // imageWidth / 25;
ydelta = imageWidth / 20;
g.InterpolationMode =
System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
g.DrawImage (fullSizeImg, 0, 0, imageWidth, imageHeight);
g.SmoothingMode = SmoothingMode.HighQuality;
SolidBrush letterBrush = new SolidBrush (Color.FromArgb (50, 255, 255,
255));
SolidBrush shadowBrush = new SolidBrush (Color.FromArgb (50, 0, 0, 0));
g.DrawString (strWatermark, wmFont, shadowBrush, Convert.ToSingle
(xOffset * 1.0) , Convert.ToSingle ( (imageHeight * 0.5) - 2.25 * ydelta));
g.DrawString (strWatermark, wmFont, letterBrush, Convert.ToSingle (
(xOffset + 3) * 1.0), Convert.ToSingle ( (imageHeight * 0.5) + 2 - 2.25
* ydelta));
wmFont = new Font (Arial, 24, FontStyle.Bold);
StringSizeF = g.MeasureString (strWatermarkowner, wmFont);
Ratio = StringSizeF.Width / wmFont.SizeInPoints;
RequiredFontSize = DesiredWidth / Ratio;
wmFont = new Font (Arial, RequiredFontSize, FontStyle.Bold);
g.DrawString (strWatermarkowner, wmFont, shadowBrush, Convert.ToSingle
(xOffset - xdelta), Convert.ToSingle ( (imageHeight * 0.5) + 0.25 *
ydelta));
g.DrawString (strWatermarkowner, wmFont, letterBrush, Convert.ToSingle
(xOffset + 3 - xdelta), Convert.ToSingle ( (imageHeight * 0.5) + 2 +
0.25 * ydelta));
Matrix myMatrix = new Matrix ();
__
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] sticky footer position in IE - bottom of window instead of page
Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell __ 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] sticky footer position in IE - bottom of window instead of page
Not working in ios8.1 safari either. Just sits at the bottom of the content. Sent from my iPhone On Nov 7, 2014, at 7:59 PM, Debbie Campbell d...@redkitecreative.com wrote: Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell __ 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] sticky footer position in IE - bottom of window instead of page
On Fri, Nov 7, 2014 at 7:59 PM, Debbie Campbell d...@redkitecreative.com wrote: Having a problem with IE here... http://www.boissonconsulting.com/resources/ I'm using this sticky footer method (after trying several others): http://mystrd.at/modern-clean-css-sticky-footer/ It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is initially at the bottom of the window instead of the page, and stays in the same position when the page is scrolled. Please help and thank you in advance for looking. -- Debbie Campbell Are you working on this? I am not seeing a sticky footer in any browser. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 __ 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] sticky footer position in IE - bottom of window instead ofpage
-Original Message-
From: Debbie Campbell
Sent: Saturday, November 08, 2014 12:59 AM
To: CSS-Discuss
Subject: [css-d] sticky footer position in IE - bottom of window instead
ofpage
Having a problem with IE here...
http://www.boissonconsulting.com/resources/
I'm using this sticky footer method (after trying several others):
http://mystrd.at/modern-clean-css-sticky-footer/
It's working fine in Chrome, FF, Safari/Win, but in IE 11 the footer is
initially at the bottom of the window instead of the page, and stays in
the same position when the page is scrolled. Please help and thank you
in advance for looking.
You need to add the three lines to your #footer css code as follows:
#footer {
float: right;
height: 35px;
padding: 0;
width: 973px;
/* Add these three lines to this code */
position: absolute;
left: 0;
bottom: 0;
}
Good luck.
__
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] sticky footer position in IE - bottom of window instead of page
I don’t know what your expectations are but given your code, your footer will always position itself at the bottom of the content when the page is longer than the height of the viewport (as in the sample page you link to) and will be positioned at the bottom of the viewport if there is little or no content on the page. (hint: use the developer tools of your browser to set #container to display: none and you’ll see this in action) Yes I see this, it's working fine in IE 11 with #container = display:none; Now what IE 11 is doing I don’t know (not available on this machine); based on your description, it isn’t doing what I describe above, though. Sounds like it interprets your set up as `position: fixed`. It's showing up in the middle of the content instead of at the very bottom in IE 11. -- Debbie __ 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/
