Preformatted Text with Line Numbers

I was trying to figure out how to add line numbers to preformatted text for another entry. I couldn't find a satisfactory solution, so I ended up creating my own. I'm happy with it so far, so I'm posting about that instead.

Here's the markup. Basically, I used an ordered list (ol) to get the line numbers, since it's built-in and will save me from having to count. Pretty self-explanatory.

CSS is below. The only important piece of css is the white-space: pre;. This tells the list items (li) to act like pre tags and pay attention to spaces. This of course allows you to indent your lines.

Works in all sensible browsers and IE6+. However, IE needed me to remove whitespace between my list items because of the whitespace bug. 456 Berea St. presents another option.

I'll probably see if I can whip up some JavaScript to handle this with less markup later.

TIP: An easy way to mark up lists quick, which works in most advanced text editors, is to hold alt and select text in a column. This allows you to type into many rows at once (useful for repetitive opening and closing tags)

That's it, enjoy!

• • 
  • 
• css
• April 11th, 2008 @ 8:30 a.m.
• 2 Comments

IE6: Making Development Miserable

Despite Internet Explorer 7 being out for 1.5 years, w3schools reports that 30.7% of it's users are still using Internet Explorer 6. Considering w3schools is likely biased towards alternative browsers, this stat is depressing. Maybe it's ignorance, maybe it's interface issues, but probably the general public just doesn't care.

As a professional web developer, this is a major hang-up. In building this layout, I did not have a single problem with any other browser, but had a list of ~10 issues that I needed to implement silly fixes to keep IE6 from wrecking my layout.

Here are just some of the things I, like many a developer before me, has to deal with because this browser still exists:

Double margin bug

A floated element with a left-margin gets double the margin. In this shot, you can see that my content is indented twice as much as my logo, despite having the same margin-left. Solved by applying "display: inline;" to the container div. Found the solution on Position is Everything.

PNG transparency issues

IE6 screws up transparency in png images. It just shows an ugly grey block instead of the pretty, soft edges. Solved using Supersleight, a JavaScript fix by Drew McLellan that pulls all kinds of strings to get PNG transparency working (even for background-images, as is the case in my todo list).

Disappearing/flickering list background

I hadn't even heard of this one before, but apparently meeting a certain set of circumstances can make the background image on list items disappear or flicker. I can't recall where I found the solution, but after trying a few others, I settled on setting my list items to "display: inline-block;".

IE6 strange box behaviour

"hasLayout" seems to be responsible for most IE6 layout nonsense. Many people have heard of it but don't quite understand what it means. hasLayout is an attribute that elements have in IE (you can see it using the IE Developer Toolbar), sort of like CSS attributes (like, width). It determines how IE renders certain elements, but for whatever reason, needs to be manually triggered to cause some elements to behave. It can't be set directly through CSS, however certain attributes do trigger it. My favorite way is to assign the problem element (usually a div or ul) a "height: 1%;". This is called the Holly Hack, from Holly Bergevin. Whenever I can't figure out what's going on in IE6, I give this hack a try. More often than not, it works. I'm not even certain what that screenshot depicts. Elements were flying all over the place.

Rounded corners

Rounded corners are so common, yet so difficult because of IE6. Until better CSS adoption kicks in, most methods involve lots of extra markup. In my case, I've got one image and four divs, absolutely positioned to my corners with negative margins. I use background-position to show only the quadrant of the image I need. This works great in every browser but IE6. Because this design is fluid and IE6 isn't good at math, if the window was an odd number of pixels wide, the border would show up PAST the image, putting a nice hard edge just outside my rounded corners, ruining the illusion. I tried to get a screenshot, but IE6 is having even more trouble rendering them now. Fantastic.

I tried many solutions, but they all relied on too many elements, too much JavaScript, or were very image dependent. In the end, I decided IE6 users don't deserve rounded corners, so I set them to "display: none;" for IE6.

Conditional comments

How did I implement these fixes without bloating other browsers? I used conditional comments. Quick, clean, valid, and only slight abuse of the comment tag.

Needless to say, I wasted way too much time fixing IE6. I know IE8 is supposed to be trying pretty hard, but I get sick just thinking about how long it's going to take for people to stop using IE6. Please stop.

• • 
  • 
• browser, css
• April 6th, 2008 @ 8:41 p.m.
• Add Comment