Skip to content
This repository has been archived by the owner on Apr 11, 2020. It is now read-only.

Commit

Permalink
Started on a new approach for the PNG plugin. Will not be included in…
Browse files Browse the repository at this point in the history
… this release. Fixed validation errors.
  • Loading branch information
olav committed Sep 20, 2007
1 parent b640a07 commit b21479c
Show file tree
Hide file tree
Showing 11 changed files with 37 additions and 142 deletions.
1 change: 1 addition & 0 deletions Changelog
Expand Up @@ -63,6 +63,7 @@ Version 0.6 - TBD
* Fixed indentation bug in ul/ol, removed some redundant styling. [OFB]
* Fixed validation errors in tests. [OFB]
* Changed IE stylesheet condition comment to include all versions of IE. [OFB]
* Started on a new approach for the PNG plugin. Will not be included in this release. [OFB]


Version 0.5 - 28/8/2007
Expand Down
58 changes: 2 additions & 56 deletions blueprint/plugins/iepngfix/Readme
@@ -1,57 +1,3 @@
IE5.5+ PNG Fix
* Adds support for transparent PNG images for IE5.5+, both for <img> tags and backgrounds on <div>s.
* Demo: http://www.twinhelix.com/css/iepngfix/demo/


Credits & License
----------------------------------------------------------------

Created by Angus Turnbull [twinhelix.com]

IE5.5+ PNG Alpha Fix v1.0RC4
(c) 2004-2005 Angus Turnbull

This is licensed under the CC-GNU LGPL, version 2.1 or later.
[creativecommons.org/licenses/LGPL/2.1/]


Usage
----------------------------------------------------------------

Remember that all images that uses this plugin
must have both height and width specified.

1) Add this CSS rule to "blueprint/ie.css":
img { behavior: url(*YOURDOMAIN*/css/blueprint/plugins/iepngfix/iepngfix.htc) }

2) Customize the *YOURDOMAIN* and the rest of the URL in the CSS rule
to be the http path to the iepngfix.htc file.

3) Customize line 15 in iepngfix.htc so that the URL is the
http path to blank.gif in this directory.


Known Issues
----------------------------------------------------------------

* Does NOT work with repeating background images
* Can't help IE versions prior to 5.5, sorry.
* Users can't right-click-save processed PNG images, they'll
save the blank GIF file if they try that. In some cases
this might be a feature, not a bug...
* The script detects the ".png" extension in image URLs.
So if you have a CGI script that generates a PNG image, you
may have to rewrite parts of the script, or just cache them
as PNG files somewhere.
* It's most reliable on elements with non-'auto' dimensions
set. So, give images and other elements width/height values;
'100%', '10em' and '200px' and so on are all OK.
* Background PNG images can't be tiled. This is a limitation
of the IE filter.
* Similarly, padding and borders don't indent the PNG image.
An easy fix for this is wrapping your PNG images in container
DIVs or similar.
* There may be about a short time as soon as the image loads
when images are not transparent, before the IE filter kicks in.

IE5.5+ PNG fix.

(Not yet documented, and far, far from finished.)
Binary file removed blueprint/plugins/iepngfix/blank.gif
Binary file not shown.
16 changes: 16 additions & 0 deletions blueprint/plugins/iepngfix/iepngfix.css
@@ -0,0 +1,16 @@
.png {
background: transparent url(transparent.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod='image');
}

body {
background: #fff url(false) fixed; /* MUST be fixed to avoid scroll judder */
}

.fixed {
position: fixed;
top: 0; /* or any value ! */
_position: absolute;
_top: expression(eval(document.documentElement.scrollTop)+"px");
}
69 changes: 0 additions & 69 deletions blueprint/plugins/iepngfix/iepngfix.htc

This file was deleted.

4 changes: 2 additions & 2 deletions tests/elements.html
Expand Up @@ -8,8 +8,8 @@
<title>Blueprint CSS Framework Test Suite</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="../blueprint/compressed/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/compressed/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample section. -->
Expand Down
4 changes: 2 additions & 2 deletions tests/forms.html
Expand Up @@ -8,8 +8,8 @@
<title>Blueprint CSS Framework Test Suite</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="../blueprint/compressed/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/compressed/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample section. -->
Expand Down
4 changes: 2 additions & 2 deletions tests/grid.html
Expand Up @@ -8,8 +8,8 @@
<title>Blueprint Tests: grid.css</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="../blueprint/compressed/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/compressed/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Show the grid and baseline -->
Expand Down
10 changes: 5 additions & 5 deletions tests/index.html
Expand Up @@ -8,8 +8,8 @@
<title>Blueprint CSS Framework Sample Page</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="../blueprint/compressed/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/compressed/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample section. -->
Expand Down Expand Up @@ -60,9 +60,9 @@ <h1>Blueprint Test Suite</h1>

<div class="notice">
<h6>Note about the compressed versions:</h6>
<p class="last">These test files utilize the compressed versions of the framework.
In other words, if you change any of the core files, you'll have to re-compress them
with the ruby script in the scripts folder to see any changes. :)</p>
<p class="last">These test files utilize the un-compressed versions of the framework.
In other words, if you change any of the core files, and use the compressed version on your site,
you'll have to re-compress them with the ruby script in the scripts folder to see any changes. :)</p>
</div>

<p><a href="http://validator.w3.org/check?uri=referer">
Expand Down
9 changes: 5 additions & 4 deletions tests/plugins.html
Expand Up @@ -8,14 +8,15 @@
<title>Blueprint CSS Framework Test Suite</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="../blueprint/compressed/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/compressed/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import plugins for the sake of testing -->
<link rel="stylesheet" href="../blueprint/plugins/fancy-type/fancy-type.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/plugins/buttons/buttons.css" type="text/css" media="screen, projection">

<link rel="stylesheet" href="../blueprint/plugins/iepngfix/iepngfix.css" type="text/css" media="screen, projection">

<!-- Show the grid and baseline -->
<style type="text/css">
/*<![CDATA[*/
Expand Down Expand Up @@ -65,7 +66,7 @@ <h3>Buttons plugin</h3>
<li>The CSS-Classes plugin is pretty self-explanatory.</li>
</ul>
<hr>

<p><a href="http://validator.w3.org/check?uri=referer">
<img src="http://www.w3.org/Icons/valid-html401-blue" alt="Valid HTML 4.01 Strict" height="31" width="88"></a></p>

Expand Down
4 changes: 2 additions & 2 deletions tests/sample.html
Expand Up @@ -8,8 +8,8 @@
<title>Blueprint CSS Framework Sample Page</title>

<!-- Framework CSS -->
<link rel="stylesheet" href="../blueprint/compressed/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/compressed/print.css" type="text/css" media="print">
<link rel="stylesheet" href="../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel="stylesheet" href="../blueprint/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

<!-- Import fancy-type plugin for the sample section. -->
Expand Down

0 comments on commit b21479c

Please sign in to comment.