This site will look much better in a browser that supports web standards, but it is accessible to any browser or Internet device.
This note appears at the top. Because of a problem with IE, notes that appear at the top of the page need to be placed before the first instance of the inside class within the column.
Note: This is still very much a work in progress. If you want to help get this working, feel free to offer any changes or additions to the CSS. If you're looking to use this in a production environment, don't. The compatibility of this method has not been fully tested, and it's still half-assed (under IE6).
With this layout, right-side margins are also possible. However, you must be sure that there is no actual content within the left or right column blocks within the markup. Otherwise these notes will be rendered over whatever content is within the markup of the column.
This was certainly a lot more trouble than I thought it would be. And the implementation is probably not the best. This is why I have created an entirely separate stylesheet, marginalNotes.css to achieve the marginal notes effect.
Confirmed working:
IE6, IE5.5, IE5.2/Mac, Mozilla, Opera 6+, Safari
Known broken:
IE5.0
I think you get the idea of marginal notes, the boxes that appear within the margins of this page. The margins, once the left and right columns, can be used to contain extra bits of info about a given topic, usually the topic the paragraph next to the note is about.
Want to go back to the index page?
Click here.
Ugh. IE is just being difficult and my brain is fried right now. The right-hand note shouldn't be appearing where it's appearing. It should appear below this paragraph, within the right-hand column. Instead it appears up at the top of the page. doh!
You can read the comments in marginalNotes.css to get an idea on the overly-complex solution. Basically, there's a inside class block within each column to create padding and get around IE's box model issues. However, the note blocks need to exist outside this padding class, otherwise some indentation problems arise.
On the plus-side, you can have notes run longer than the main column's height and the layout will stretch down to include the long note. Also, if a note is positioned to begin before the end of a previous note, it will stack below that previous note. The wonders of floats.
So before I go test this in something other than a version 6 browser (and start to cry at the incompatibilities I find, especially with IE5/Mac) allow me to point out a couple more goofs.
Feh. The right-margin notes stack fine, but they just don't get positioned where they appear in the markup. Okay, maybe this one did. Why does the first right-margin note appear at the top?! That is... for you IE users. Other browsers will render this in the correct location.
IE, it seems, does not like an empty inside class block. So you need to do whatever you can to avoid this. So if you want two notes to appear together, one on top of the other, you need to make sure you have no empty inside class between them. That will happen if you cut and paste the obvious block of markup used to create these notes. So take care in how you markup notes that appear together.
In keeping with the "no empty inside classes alllowed" mantra, pay attention that notes which appear either at the beginning or end of the content are placed outside the inside class. Hah, follow that?
Until I'm happy with the marginal notes implementation I'm not going to add in v4 support for them. Actually, there won't be any real "support" in v4 browsers when/if I do include it. Rather, they'll just be floated left, maybe have a margin and background color so they stand out, but they won't appear in the margins. That's not really doable.
Well, brave soul, dare to embark on marginal notes?
Maybe I should study Eric Meyer's implementation. Although it appears to break under IE6. :\
This is only a test. Oh, and note that a note that goes longer than the length of the main column's content causes the layout to stretch to keep the note within the layout.
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah feh blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah feh blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah feh blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah enough with the 'blahs' already.
Oh, one nifty little oddity, IE (at least version 6) seems to multiply margin values by 2 on these note boxes. I don't know why. Typically I'd have a -200px margin to get the notes into the margin, and this is how it's done for Mozilla, Opera, etc.. but in IE 6, I have margins set at -100px. Go figure.