Positioning and the Big Two

In the section on combining absolute and relative positioning, I showed an example graphic:

The reason no browser icon was given was that the code I gave does not result in the screenshot in any browser. However, I didn't retouch the screenshot in Photoshop, and I did use styles! I used Microsoft Internet Explorer to procude the image-- I just had to fake things just a little. Here is the actual code used to produce the screenshot:

<P style="position: relative; margin-left: 2em;">
Any place a change has been made, two red asterisks
will appear to the left of the line where the changes
start.  For example, there is such a marker to the left
of the line containing <SPAN style="position: absolute;
top: auto; left: -15px; color: red;">**</SPAN>

The only change is to the value of left for the SPAN tag. Instead of being able to set it to zero, I had to set it to -15.

Why did I do this? It seems that MSIE calculates absolute positioning relative to the final position of the content, not its original position as the specification requires. Therefore, using the code I showed in the article itself (which included left: 0;), you would see this:

As for Netscape Navigator, it handles top: auto; differently than it should, so the above code will result in the red asterisks appearing somewhere near the beginning of the first line in the paragraph, as though top were set to zero. Its handling is a little weird, though; try displaying the example in Navigator and then resizing your window. The asterisks are prone to jumping around a bit. It's very annoying.