Home
Lindsay Donaghe's Library tagged → View Popular
Conditional-CSS
A tool that will generate browser specific CSS for you and package it all up in a C# HttpHandler (ASHX) so that it will deliver only the CSS for the browser that makes the request. Interesting idea to get around having to use browser hacks and still have all your code in one file for easy maintenance.
prettyCheckboxes - custom checkboxes / radio buttons - by Stephane Caron
jQuery plugin for masking regular check boxes and radio buttons with nice graphic versions that will appear the same across browsers/OSes.
Firebug Lite - Webmonkey
Sweet! A cross-browser version of Firebug that can even work with IE. This will most definitely come in handy.
On having layout — the concept of hasLayout in IE/Win
A good list of options on how to trigger hasLayout in IE, including for IE 7.
- Good article on why so many css "flow" bugs in IE are fixed by adding width or height to elements. - bluecockatoo on 2006-08-26
-
widthandheighttriggerhasLayoutin IE 5.x and IE 6 or newer in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout. -
Elements having both “layout” and
display: inlinebehave in a similar way as what the standards say about inline-block: they flow horizontally like words in a paragraph, are sensitive to vertical align, and apply a sort of shrink-wrapping to their content. As soon as the inline elements have layout, they act as inline-block, this is an explanation why, in IE/Win, inline elements can contain and hold block-level elements with less problems than in other browsers, wheredisplay: inlineremains inline. - 4 more annotations...
Litmus Labs: CSSVista
-
A freeware tool for Windows that lets you edit CSS files and view the results in IE and FF simultaneously. Handy for cross-browser debugging.
- bluecockatoo on 2008-01-18
Styling even more form controls | 456 Berea Street
- A big sampling of CSS styled input controls on various browsers and OSes. Good reference for seeing how your CSS will affect input controls, and basically the foundation for the argument that you shouldn't bother because there's no way to make them look the same everywhere... - bluecockatoo on 2006-10-05
My Top Ten CSS Tricks [CSS Tutorials]
- Useful tips here, especially about the disappearing text in IE in elements adjacent to a floating element. - bluecockatoo on 2006-08-26
-
3. Minimum Width for a Page
A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this functionality work in this browser. First, we'll insert a
<div>under the<body>tag, as we can't assign a minimum width to the<body>:<body>
<div class="container">Next, we create our CSS commands, to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
} -
6. Disappearing Text or Images in IE?
IE exhibits a very strange bug whereby text or background images sometimes disappear from sight. These items are still actually present and, if you highlight everything on screen or hit refresh, they'll often re-appear. Kind of strange, huh?
This problem mostly occurs on background images and on text positioned next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason, that'll usually fix the problem. If this doesn't work (and sometimes, it doesn't), assign a width to the offending element in the CSS -- that should fix the problem.
acidic float test suite: undesired float enclosing caused by hasLayout
- Float experiment results in FireFox, IE6 and IE7, authored by several people including the inventors of the "Holly hack". Good visual reference for floating behavior. - bluecockatoo on 2006-08-26
Pup's Box Flow Hack
- Looks like an alternative to the "Holly hack" that might be more compatible with IE7 now that they're taking away the "* html " selector to write code only IE understands. I'm not sure if IE7 is going to implement pseudo elements though... - bluecockatoo on 2006-08-26
-
div.box {
height: 1%;
display: table;
}
div.box p:after {
display: block;
line-height: 0;
height: 0;
visibility: hidden;
content: "- - - - - (repeated)";
}
IEBlog : Standards and CSS in IE
- A blog about the bugs in CSS implementation in IE 7.0 and how to work around them. - bluecockatoo on 2006-08-23
IE 6.0 - Javascript - Event order
- Description of the difference of the event handling model in IE and Firefox (bubbling vs propagation) - bluecockatoo on 2006-08-23
Event Object - IE Emu (WebFX)
- How to standardize the DOM between IE and FireFox/Mozilla for the event handling methods. - bluecockatoo on 2006-08-23
JsUnit
- "JsUnit is a Unit Testing framework for client-side (in-browser) JavaScript. It is essentially a port of JUnit to JavaScript. Also included is a platform for automating the execution of tests on multiple browsers and mutiple machines running different OSs - bluecockatoo on 2006-08-23
Javascript Basics Part 13
- The primer on some cross-browser javascript. For some reason it's not listed on the series page. - bluecockatoo on 2006-08-23
Javascript Basics Series
- A very well done series of articles on Javascript from the super basics to things like modifying the DOM through prototypes to run the same in several browser versions. Also 30 "primers" with samples of using Javascript. Good Stuff. - bluecockatoo on 2006-08-23
QuirksMode - AddEvent() considered harmful
- A pretty detailed article on the dangers of assuming Mozilla's attachEvent and IE's addEventListener work the same way. Also some interesting stuff on memory leaks in IE related to event handlers. - bluecockatoo on 2006-08-23
James Mc Parlane's Blog - My Entry For The QuirksMode addEvent() Recoding Contest
- One person's solution to the event model difference problems for IE and Mozilla browsers. - bluecockatoo on 2006-08-23
Oh Spider Monkey why doest thou keep secrets from me
- List of the Mozilla javascript "hidden" functions for adding and detecting object properties. Too bad this stuff only works in Mozilla browsers. - bluecockatoo on 2006-08-23
Javascript DOM Collapse
- Script that allows you to easily set up collapsing objects on your webpages such as for navigation menus or detail drop downs. Supposed to be a cross-browser implementation. - bluecockatoo on 2006-08-23
Javascript - Event properties
- Cross-browser utility functions to wrap the inconsistencies of the event model methods/properties of IE and Mozilla type browsers. - bluecockatoo on 2006-08-23
Selected Tags
Related Tags
Sponsored Links
Top Contributors
Groups interested in crossbro...
Highlighter, Sticky notes, Tagging, Groups and Network: integrated suite dramatically boosting research productivity. Learn more »
Join Diigo