http://thedesignspace.net/ My daily explorations, troubleshooting, solutions and discoveries. en-us ellen@thedesignspace.net Fri, 16 Sep 2011 13:06:42 -0500 http://thedesignspace.net/MT2archives/000937.html Internet Explorer's propensity to drop floated elements adds time to site development, and sometimes causes a page to appear blank if the floated content drops below the window "fold". Ignoring the problem and designing only for standards-adhering browsers is not always possible, particularly in enterprise environments where IE (and not always the latest version) is the only officially supported standard.... http://thedesignspace.net/MT2archives/000887.html I've worked on a few projects where a CSS style on some page element has been specified as "!important" and it interferes with the way the page functions. Ordinarily, I would just change the original style, but sometimes I don't have control over the stylesheet or script that is generating the style. One example is a recent project where an... http://thedesignspace.net/MT2archives/000834.html http://thedesignspace.net/MT2archives/000831.html http://thedesignspace.net/MT2archives/000763.html The z-index bug in actionAlthough Internet Explorer 8 has been widely adopted, IE 7 is still the browser in use at my office, so all new projects must be compatible with it. Even though IE7 was already obsolete when we adopted it, it was a wonderful change from IE 6, because of the reduced need for CSS and javascript hacks,... http://thedesignspace.net/MT2archives/000751.html The pagetree plugin for Confluence is a commonly used navigation widget for the popular wiki. There are now 2 versions: the older "pagetree" and the newer "pagetree2" which has several improvements, including a less cluttered look. The older version displays the standard Confluence page icons next to each node of the tree, whereas these can be hidden (and usually are)... http://thedesignspace.net/MT2archives/000699.html FAQ pages are sometimes requested in our learning modules so we've built in the scripts to create an easy- to-read, easy-to-use FAQ by applying simple CSS classes to elements on the page. When the FAQ page loads, all the questions appear in a collapsed view which can be quickly scanned. On clicking any question, its associated answer expands and pushes... http://thedesignspace.net/MT2archives/000696.html I just found this while experimenting with the Flickr badgemaker. It's a much more customizable way to get nice results than the method I posted earlier. Go to: Create your own Flickr badge and make the selections as specified: Choose HTML badge Select the content you want to show. Would you like to include your buddy icon & screen name... http://thedesignspace.net/MT2archives/000687.html The other day, I found an Internet Explorer ordered-list bug I hadn't seen before: A numbered list of items which looks right in other browsers will be rendered with the number "1" in front of every item in IE7. This happens when a width is added to the "LI" tags in an ordered list. Internet Explorer 7 will not increment... http://thedesignspace.net/MT2archives/000520.html If I had to choose one piece of advice for new web developers, I'd tell them to learn to use Firebug. Firebug is probably the most valuable debugging tool available, but if you are just getting started, it may seem pretty opaque at first. In addition, some things do not appear to work as advertised. In particular, the "cd" function... http://thedesignspace.net/MT2archives/000375.html It is common to use object detection to discriminate between browser capabilities (See Quirksmode: Object Detection. However, sometimes it is necessary to detect whether or not a browser understands a particular CSS style property, and it is not obvious how to do this. You can't test for the existence of the property directly but you can test for the data... http://thedesignspace.net/MT2archives/000376.html When building web applications I often use display styles to show or hide divs or table rows as needed. On one project, I found that the "colspan" property did not seem to work in Firefox or Safari. This was because I had incorrectly used display:block to style the TR element, instead of display:table-row. A demo is below, and the code... http://thedesignspace.net/MT2archives/000365.html In IE 6, the border of a block element will cover up a contained item which should appear on top of it, even if the z-index of the contained item is set higher than the container. In the example below, the yellow div with the thick top border is styled "position:relative". An "a" tag (shown with a red background to... http://thedesignspace.net/MT2archives/000347.html If you style an li tag as "display:block" IE 6 and 7 will display the list bullets, whether they are standard markers or images, but Firefox and Safari will not. Here is an example of the way the list items should look: The CSS "display" property is set to "list-item" (it could also be left out, since it is the... http://thedesignspace.net/MT2archives/000346.html In setting up some sliding door tabs, I found there are situations when Safari will not show the background of an element if the background positioning is set to "top". This example shows how it SHOULD look. There are rounded corner backgrounds in each tab. Not that the background styles for the #tabBar li a and #tabBar li elements does...