You're looking at all articles on The Hickensian tagged 'bugs'

One of the headaches I’ve had with the position: fixed navigation on the journal pages is a bug that has reared its head in WebKit based browsers (Safari, Omniweb, NetNewswire etc).

OK, a little background. To avoid the IE flicker problem, my navigation’s rollover states are set as the background of a list item in a numbered list, and the ‘normal’ state is set as the background of the link. On hover the link background is set to none – revealing the rollover state below. With me so far?

When combined with position:fixed, the nav had a strange effect when scrolling. As you scroll down, the background of the anchor tag scrolls with it, but not the background of the <li> item:

This didn’t occur in Firefox or Opera (IE doesn’t support position:fixed of course, so it gets position:absolute instead), just in WebKit browsers. It’s a minor, but irritating problem.

The fix was not, as I thought it might be, applying background-attachment: fixed, but just this:

#nav ol a  { position: absolute; }

I’m posting it here in case anyone else has come across it too. A bug in WebKit? Trouble is, when you’re bending CSS to do thing it wasn’t designed to do (Image replacement and fixed positioning) it may not be.

Hmm. It looks as if Zlog had this problem and I’d like to know if anyone else has too. Safari seems to have a problem with usage over time. The more I use it, the slower and unresponsive it becomes. Resizing the window takes the patient of a saint. Clicking on toolbar bookmarks has a 4 second delay, and it really has to think hard about showing you a menu item. Whats that all about? Does Safari need a sit down with a cup of tea the same as I do? The simple fix is the quit out, and relaunch. Everything is back to normal, until later in the day when I start to notice it slow down again. Grrr. Not so bad when you’ve got Saft reopening your last used tabs for you, but I still shouldn’t be having to do it. I have wondered whether this has anything to do with the various plug-ins for Safari that I’ve installed, so I’d particularly like to hear from anyone who runs Safari in its clean, naked form. update – It seems that after a length of time Safari will slow down, until you relaunch it, but that it was Saft that made this a little worse. Fiddling with caches of pages/history/favicons made no difference, but removing Saft from the input managers folder did. Its a bit of an arse using Safari without Saft, but the speed difference was incredible!

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

So, in effect, there is already a fix to this, but it’s not a convenient one. Editing a menu that’s all on one line isn’t my idea of an easy life. Each time I would have to take the file into BBEdit, reformat the code to be ‘Gentle Hierarchal”, make my edits, and then reformat as ‘compact’.

I’d tried various fixes, one that added a negative top margin (overruled for decent browsers by using a first-child selector) worked in 5 & 6, but not 5.5. Then I started dreaming up some php that would strip the whitespace at the server side, but that was too much for my small head.

Now, excuse me if I’m late to the party, and everyone has already discovered the solution to this, but its actually rather simple. Here’s a cut down example:

ul a {
display: block;
float: left;
clear: left;
}

Suddenly, IE 5+ does what it should, and the ones that got it right in the first place just put up with it without a fuss apart from Mozilla. If you find that the menu items are all over the place, add something like this:

li>a {
float: none;
}

The first-child selector means that IE won’t see this rule, but everyone else will.

I’m posting this in the hope that I can prevent someone else from losing their mind. The shiny new Adobe Creative Suite ran fine on my G5, but when I tried to install and run it on my G4 Powerbook, the dock icon would bounce for a few seconds then quit. I tried a variety of fixes – re-installation, trashing preference files, repairing permissions, installing under a different log-in. I even rebuilt the Powerbook from scratch in case that might help. Still no cigar.

Finally, after having a Damascus Road experience on a MacUser forum, I found the fix, and you’ll never guess what it is. Go into Date & Time>Time Zone and change the setting from ‘GMT’ to ‘London’ (or anything other than GMT). Suddenly, everything opens and works fine.

Go figure.

Some IE 5 Mac things I recently discovered:

• IE 5 Mac won’t float a bunch of
  ’s,

  ’s etc. unless you specify a width for them.
  
  
  • When I applied the Tom Gilder image replacement method to elements such as the site logo, Safari added a huge horizontal scrollbar (presumably 1000em wide). This only seemed to happen when the image was within nested divs, positioned absolutely. To get around this, all I had to was add overflow:hidden.

    The reason that the image wouldn’t then show in IE5 Mac, was this extra overflow:hidden rule. As this isn’t needed in all cases, it can added as needed using the commented backlash hack:

    /*  IE 5 hack \*/
    #logo a {overflow: hidden;}
    /* end hack */ 

    My copy of Panther still hasn’t arrived, so I haven’t been able to test whether this is ‘fixed’ in version 1.1. I say ‘fixed’ as I’m not sure this can called a bug.

  
  

  
  

  *Update – this is no longer a problem in Safari 1.1. Huzzah for that, but 1.1 is so far only available to Panther users.

  • 2003 07 Nov
  • Comment via Twitter
  • Tags bugs, internetexplorer, mac, osx

No matter how you try and avoid it, you often get to the point where you need to hide CSS from a particular browser, because of a bug. Its 'not cricket' but they work, and they validate. So rather than being an article as such, what I've done here is gather all the various links for hiding CSS from browsers.

• Opera - Owen Hack
• IE 5 Windows Tantek Celik hack
• Media Type Hack - Hide CSS from all versions of IE up to 6
• IE 5 Mac - commented backslash hack
• IE 5 Mac - alternative hack
• Netscape 4 @import hack
• Star 7 hack - affects Opera 7 amongst others
• Safari - Escape Hack
• Inline high pass filter hack - hides styles from browsers with poor CSS1 support
• CSS Filters - Kevin Smith has put together a huge table of all the hacks, and you can see instantly which browsers it will affect.

Please let me know if you find any more!