Category: CSS

Prevent float drop in IE

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. Of course, other browsers are being used as well.

I’ve finally came across a fix that appears to work well cross-platform, thanks to Thierry Koblentz in the YUIblog.

Continue reading

How to override the !important CSS style attribute using Javascript

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 embedded Captivate player is written to a custom HTML wrapper at by the javascript SWFObject.js. SWFObject writes style attributes to the page dynamically to hide the Captivate player as required until it is fully loaded:

object, embed {
              visibility:hidden !important;
}
Continue reading

Defeat the IE 7 z-index bug

Picture 33.jpg

The z-index bug in action

Although 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, workarounds and compromises in general.

So it was a surprise to realize that an old Internet Explorer 6 stylesheet problem, the “z-index bug” still lingers on. You’ll know you’ve hit this bug when your drop-down menus fall UNDER elements that are lower down on the page. (…I should add: and there are no iframes or frames on the page).

There are several sites that do a fantastic job of telling you exactly why this happens. I’m just going to tell you how to fix it. In fact, if you want to jump to the fix right now, click here

Continue reading

Confluence: Remove page icons from old-school PageTree macro

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) in the newer version.

Old-style “pagetree”                              New-style “pagetree2”

Picture 32.jpgPicture 33.jpg

Continue reading

Using toggle javascripts to build an FAQ page.

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.

Screen shot 2009-10-23 at 3.21.54 PM.jpg

On clicking any question, its associated answer expands and pushes the rest of the questions down. When another question is clicked, the first answer closes and the new answer opens up.

Screen shot 2009-10-23 at 3.22.00 PM.jpg

Here’s how to add this type of FAQ to your own HTML pages.


Continue reading