Paul Sweatte

Pseudo File Input with Cross-Browser CSS and Click Event

psweatte — Tue, 07 Dec 2010 02:08:25 +0000

Here’s a quick fix for the limitations of input file type:

/* Make the form element relatively positioned container */
.dude { position: relative; }

/* Make the pseudo file input layer absolutely positioned over real file input */
.raw { position: absolute; z-index: 1; left: 0; }

/* Make width and height zero to hide real file input */
input[type="file"] { width:0; height:0; }

/* Hide file input using opacity for Firefox */
@-moz-document url-prefix()
    {
    input[type="file"] { position:relative; z-index:2; width:auto; height:auto; opacity:0; }
    }

/* Use pseudo file input click event to trigger real file input click event */
$("input[type='button']").click(
        function browse_files()
          {
          $("input[type='file']").click();
          /* Copy value of real file input to pseudo file input at this point in IE, since change fails */
          $("input[type='text']").val($("input[type='file']").val());
          }
                                       );

/* Use change event to trigger copy in Firefox and Chromium */
$("input[type='file']").change(
        function get_file()
          {
          /* Copy value of real file input to pseudo file input */
          $("input[type='text']").val($("input[type='file']").val());
          }
                                      );

Filed under: Cool Web Sites

IE6 and IE7 Media Query CSS Filter

psweatte — Sat, 28 Aug 2010 08:05:06 +0000

Use an empty media query to wrap IE6 and IE7 specific code instead of using a separate file or adding an IE specific class on the body element with conditional comments. If necessary, star and underscore hacks still work to distinguish between either browser within the media query.

body {background-color:blue; }
@media, { body { background-color:red; } }

Filed under: Cool Web Sites Tagged: conditional comments, ie6, ie7, media query, star hack, underscore hack

Emulating min/max width/height in IE6

psweatte — Sun, 06 Dec 2009 05:42:18 +0000

Use two nested absolutely positioned elements or a relatively positioned element nested in an absolutely positioned element to emulate max width/height in IE6:

.big, .small { position:absolute; top:0; left: 0; display:inline-block; }

.big { top:20px; }
.big { width:200px; height: 400px; background-color: transparent; overflow: hidden; }
.small { width: 300px; background-color: #00f; height: 300px; }
}


  Hey!
  
    hi

.big, .small { display:inline-block; text-transform: uppercase; }

.big { position:absolute; left: 20px; top: 20px; }
.small { position: relative; }

.big { width:200px; height: 400px; background-color: #0f0; overflow: hidden; z-index:-1; }
.small { width: 400px; background-color: #00f; height: 800px; z-index: 2; }
.container { width:400px; height: 500px; background-color: transparent; border: 1px solid #000; }



  big
  
    small

Here’s a collection of techniques on emulate min-width, max-width, min-height, and max-height in IE6:

Max-Width for IE6

Max-Width Right Aligned

Max-Width in IE6 using Opposing Floats and Negative Margins

Min-Height Div Demo

CSS Min-Height Explained

Min-Width Div Demo

Using CSS to Solve Min-Width in IE

Min-Width Workaround using a Placeholder Div

Natural Min-Width using Padding and Negative Margins

Min-Width in IE5 and IE6

Min-Width in IE6 using Padding and Borders

IE6 Min-Width Solutions

Minimum and Maximum Width Explained

Posted in css design, css2.1 Tagged: ie6, max-height, max-width, min-height, min-width, nested span trick

IE Negative Margin Bugs

psweatte — Thu, 29 Oct 2009 15:45:52 +0000

Here’s a collection of articles on avoiding truncated borders and content when using negative margins in IE6 and IE7:

The Definitive Guide to using Negative Margins
The Positive Side of Negative Margins
Border Chaos
Solution for Negative Margins and Indentation
Clipping of Negative Margined Blocks in a hasLayout Container
Negative Margin hasLayout Bug

Posted in css design, css2.1, layout design, trident Tagged: clipped content, hasLayout, ie6, ie7, inline-block, negative margins, relative positioning, truncated borders

CSS Expression Optimization

psweatte — Thu, 22 Oct 2009 17:18:39 +0000

Here’s a few articles on improving the performance of dynamic property behavior scripts in IE6 and IE7:

One-time Execution of IE CSS expressions
One-Time Expressions Demo
The Internet Explorer Progress Bar continues to Increase when an attached Behavior is Dynamically Inserted in a Page
Script Error when you send Web Page by E-Mail
MSN Messenger Activities with Simulated Asynchronous Webservice Calls
CSS Behaviors Reference
About Dynamic Properties

Posted in Cool Web Sites

IE6 iframe Bugs

psweatte — Thu, 01 Oct 2009 21:51:02 +0000

Here’s a few articles on various issues and solutions involving the iframe tag in IE6:

IE overflow-y iframe Bug
When dynamically generating iframes in IE6 and SSL, their location must be preloaded
AJAX IE iframe Bug
Select Free iframe Modals
iframe shim for Java Applets
iframe shim for Flash Objects
iframe shim for Google Streetview

Posted in css2.1, dom, javascript design, trident, ui design Tagged: ajax iframe, flash object, ie6, iframe shim, iframe src, iframe ssl, replaced elements

CSS Shrink Wrapping

psweatte — Thu, 01 Oct 2009 21:19:40 +0000

Here’s a few demos to show how CSS shrink wraps block elements to fit content in different browsers:

Shrink to Fit Boxes
Incorrect Shrink-wrapping in the Presence of hasLayout children
Adjacent shrink-to-fit boxes in IE7
Shrink-wrap and Center

Posted in Cool Web Sites Tagged: css, hasLayout, shrink-to-fit, shrink-wrapping

Browser Tweaks

psweatte — Tue, 29 Sep 2009 18:30:29 +0000

Here’s a collection of browser specific configuration tips for customizing your cross-browser development environment:

Chromium
Chromium Nightly
Chrome User Guide
Chrome About Pages
Chromium Installation DLL
Chrome User Experience
Chromium FAQ
ClickToFlash Chromium Plugin Manager
Undocumented Chrome Execution Switches
Chrome Plugins
Chrome Extensions
AdSweep
Chromium User Data Dictionary
Chromium User Scripts
Chrome Support
Chrome Hacks

Webkit
How to Grab and Thumbnail Websites using KHTML
Working with Webkit Nightly Releases

Opera
Opera Web Developer Toolbar
Cookie Revealer
Google Search Cookie Cleaner

Firefox
Cached URLs
Disabling Plugins in Firefox
Firefox Chrome URLs
Beef up the Find command in Firefox
How to ungrab Firefox hotkeys from Flash players
How to Disable the PDF Browser Plugin for Firefox
Issues related to Plugins
Firefox 2 and 3 side-by-side
Opening a New Instance of your Mozilla application with another profile
Mozilla Preferences Directory
Mozilla Preferences Glossary
Mozilla About:config Entries Matrix

Internet Explorer
Fixing Reliability Issues in IE8
More IE8 Extensibility Improvements
Play with IE8
Session Cookies, SessionStorage, and IE8
Personalize IE8 through Services
IE8 Features Developer Guide
Who Needs IE8 Accelerators

Posted in tips and tricks Tagged: firefox 2, firefox 3, multi-firefox, standalone

Emulating Data:URIs using MHTML:URIs in IE6 and IE7

psweatte — Mon, 06 Jul 2009 16:57:51 +0000

Example

CSS

#abcxyz_logo {
background-image: url(mhtml:http://www.abcxyz.com/css/uris.mht!abcxyz_logo);
}

MHT(uris.mht)

Content-Type: Multipart/related; boundary="_URI_DELIMITER"; type="text/html"

--_URI_DELIMITER
Content-Location:abcxyz_logo
Content-Type:/image/gif
Content-Transfer-Encoding:base64

mylogoissocoolyourlogoisforfoolsschooltoolrulegruelpoolsocruel...
--_URI_DELIMITER--

Here’s a series of articles on using MHTML and server-side scripting to create cross-browser Base64 encoded image data:

Use MHTML:URIs when you need Data:URIs in IE7 and under

Key Concepts of MHTML

When you should use Base64 for images

Data URIs in CSS Cross-browser

Data URIs using the Object Element

Embedding Base64 Image Data into a Webpage

Aptimize for Realtime Spriting and converting bitmaps to MHTML/Data URIs

Base64 Encoded Images for Internet Explorer

Building MHTML Files from URLs

Data URI Examples for IE6/7

MHTML Test Messages

Short Summary of the MHTML Standard

Posted in css design, gecko, khtml, presto, trident, webkit Tagged: base64 image, data uri, mht, mhtml, multipart, yslow

CSS Browser Specific Style Filters

psweatte — Sun, 28 Jun 2009 02:09:41 +0000

Here’s a collection of CSS filters for targeting specific browsers with CSS when using HTML conditional comments or JavaScript detection is not an option:

Simple CSS Browser Detection

CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer

Browser-Specific CSS Hacks

More Browser-Specific CSS Hacks

CSS Browser Targeting

Cross-browser CSS Cheatsheet

The Triple-X hack for IE7

Lite Pacific Hack for Safari and IE7

Posted in coding standards, css2.1, css3 Tagged: browser specific css, browser targeting, css browser sniffing, css filters, css hacks