18th September 2008 by Jason C. Filed under: CSS
I just thought I’d jot this down for posterity as I’ve seen it before but not often enough for me to remember the solution. Posting this should help that, though.
When using LI in IE6, if the LI has hasLayout activated, then the corresponding bullet will be aligned to the bottom of the item instead of the top. Why the devs writing IE6 thought that this would be useful I don’t know. Or perhaps, it’s a bug? The shock of it all.
The solution is to target the LI and to disable hasLayout. The method I used today was this:
li {zoom:0;}
This directly countermands the zoom:1; I had added to other elements to get the page to hang together in IE6.
20th February 2008 by Jason C. Filed under: CSS
It seems that there is more than one way to skin a cat. Ages ago I wrote about a mad IE duplicating text bug that would repeat bits of content lower down on the page. It had me scratching my head for a little while wondering how IE could be home to yet another bug, especially one this weird. My old friend Google came to the rescue in the end, showing me a cure.
Now though there appears to be a new and even simpler cure. The problem occurs when you have two floats, and comments between them. The solution I used previously was to remove the comments, but now it appears that another fix is simply to add display:inline to the css rule for the floats. I pretty much do that automatically now, to avoid IE doubling the margin around floats, so it fits right in, and means I can forget about removing comments from my code.
29th January 2008 by Jason C. Filed under: CSS
After a day of plenty of swearing, I seem to have found something out that I think I should have known about before. I’m posting in the hope it will help out some other hapless web developer and prevent some nasty monitor-forehead interfacing.
For some reason, I know not why, after making a small change to an html page, IE7 stopped picking up some percentage widths (for floated elements). After a lot of swearing, I found out that sometimes, to even pick up a width, IE7 needs both a min-width and width. As I was using percentages that was not a hassle – so for example the rule
float:left; width: 25.5%;
was having no effect: the width of the element was shrinking down to the width of its content, while on IE6, Opera, Safari and Firefox everything was fine. Adding a min-width thus
float:left; width:25.5%; min-width:25.5%;
Sorted everything out. So now everything’s hunky dory. I’m sure most of you will have known about this and I’m quite surprised I haven’t come across it before. That’s part of the joy of the job, I suppose: after the frustration comes the satisfaction of learning something new and solving a problem.
