Tag Archives: gotcha

Display: inline-block in webkit

To fix funky alignment issues with inline-block elements, add vertical-align:top to the element.



greasemonkey userscript issue

It took a lot of googling, but I finally figured out why some of my greasemonkey scripts weren’t respecting the @include directives I had in my UserScript section.

Greasemonkey doesn’t like leading spaces in the UserScript section. So watch for tabbed formatting and the like, and keep your directives flush left. Like so:

// ==UserScript==
// @name             My Script
// @description      A greasemonkey script I wrote
// @include          http://www.domain.com/*
// @grant            none
// ==/UserScript==
script code goes here....

As you can see, it’s okay to use formatting after the double slashes.

But don’t do this!

// ==UserScript==
   // @name         My Script
// ==/UserScript==

Hope this helps someone else!

IE7 Text Zoom breaks inline lists

After poking around for awhile on the web, I finally found a fix to an issue that I’ve been unsuccessfully battling for a long time. If you set up a horizontal list by setting the display of the li tags to inline, when you zoom the text in IE7, it doesn’t expand properly. It’s like the text expands but the li tags themselves remain the same size, causing the text of each list item to overlap. I found the solution here.

The fix is to proceed your display:inline declaration with display:inline-block. Your selector must also be identical. So, something like this:

.horzMenu li{display:inline-block}
.horzMenu li{display:inline}

High Contrast Mode

I don’t go into high contrast mode very often, but need to when testing a web application for accessibility. I always have to look up the key combination that toggles it on and off, though! The keys are shift, alt and printscreen, all pressed at the same time.

One note about high contrast mode. Background colors you have defined with css go away. So if you have popup menus or other popups on your page, you will see the page underneath through the popup. Messy. The only way I know to get around this is to position an iframe behind the popup, setting it to the same width and height.

UPDATE (10/4/2010): Be sure to refresh your browser once you switch modes. Also, some programs will require a restart to get them fully out of high contrast mode (notably, Eclipse-based programs) when you switch back to normal mode.

If your system seems to get stuck in high contrast mode (once I go into HC mode on vista, it seems to reboot to high contrast mode even though I shut it down in normal mode), right click on your desktop, choose properties, then themes, and change your theme to another theme and then back again. That seems to do the trick of clearing out the lingering high contrast trigger.

Rogue IDs

You’ve spent the past hour (or more) looking at your javascript code, clueless as to why it’s not working. You’ve written the similar code many times. What have you forgotten? You start throwing in alerts, backing out pieces of code. Nothing’s working!!!

Here’s what to do if your code has a document.getElementById instruction in it. Check to make sure that you don’t have more than one element on your page with the same Id. It’s easy to do if you are cutting and pasting pieces of code. It’s what I found after spending at least an hour two days ago trying to figure out what in the world I had done wrong. It’s a frustrating bug because all you can say when you finally figure out what you did is – “DOH!”

Run multiple versions of IE on your PC

If you are a web developer, you can’t afford to blow away your prior version of IE because you still need to test in that browser! Tredosoft to the rescue with their multiple ie installer. I have only done this myself on Windows XP, and it works well. There is one gotcha I encountered, which is fixable. You have to go into the registry, but it’s not too scary. Until I made the fix, my conditional IE comments were broken. I could test for IE, but I couldn’t test for a specific IE version. Not too cool, especially if you are trying to use Dean Edwards’ IE7 script, but here is the fix….http://www.positioniseverything.net/articles/multiIE.html, which just happens to be from one of my favorite sites (it’s included in my blogroll).