As you can see, I’ve made a few aesthetic changes to this site. I realize it’s nothing too crazy (never is) — hopefully I can get away with describing the design as simple and elegant — always a goal. I’d like to discuss a few things that gave me a headache with you-know-which browser and this layout. I’m sure this is old hat for most web designers, but these are problems that I hadn’t come across before.
We all know that IE/Win doesn’t recognize dotted borders, but instead treats them as dashes. It is because of this that I have always stayed away from the dots — I want the sight to look the same on all browsers (obviously) and IE/Win would screw this up (as is usually the case). I finally gave in to desire and decided to figure out a way around the problem. The first thing I did was create an image 1 pixel high and 3 pixels across. The first pixel was made black and the other two transparent.
I thought I would just tile this horizontally with CSS to create the dotted line and be done with it. Well, as it turned out, that is all that needed to be done for every browser except IE/Win, which made the line 10 pixels high instead of one (yes, even when height: 1px; is used; it’s completely ignored by IE/Win). There is no explanation for this other than to say that IE/Win is broken as usual. After trying eveything I could possibly think of, I started messing around with the padding and noticed that a top padding of 1 pixel solved the problem in IE/Win without affecting any of the other browsers I used for testing. So, the trick on 1 pixel images in IE/Win is to give them a vertical padding of 1 pixel.
The second thing that had me going crazy trying to fix was the fact that in IE/Win any margin I was adding to the right of my menu div was being doubled. Literally. If I wanted a 10 pixel margin, I would specify 10 pixels and every browser would follow my orders, except for IE/Win, which would make it 20 pixels. I’ve come to find out that it is a well-known bug and occurs when you are trying to add a margin to the same side as the float direction of the div. The fix is simple enough: just add display: inline; to the div. All browsers (including IE/Win) ignore this here, but for whatever reason it corrects IE’s doubling of the margin.