Guess the mysterious Firefox margin in my box model

Question

I have a fairly far-out box model for my portfolio website. It's actually really not but it required a little CSS magic to get the chamfer corners to work (I really wonder why chamfer corners do not exist in CSS). See it here.

Now, if you're on Firefox, and you navigate to my resume, you'll see a very mysterious margin going on at the top that I just can't seem to figure out. I was wondering if anyone could poke around with the Firefox dev tools and possibly figure out where this is coming from because I can't seem to figure it out. You may also notice a few other little graphical glitches on Firefox that are not present in any other browser, but hey, what can I say, I like that box look and I ain't gonna compromise.

Image depiction (from FF7.0.1, win7):

Answer 1

I rebuilt the "resume" section from the ground up. During this process I noticed a lot of margins being added to titles and such before I would edit the CSS classes that weren't added in other browsers. Margins seem to affect the "height=100%" rule as anyone whose tried to get a footer to stick to the bottom of their webpages might have figured out. So I chalk this one up to one of the titles getting a margin from one of Firefox's standard CSS stylesheets, I just couldn't find it.

Lesson of the day: ALWAYS set padding and margin to 0 for any custom class or id!

Answer 2

Validate your html for that list of errors that needs fixing. Then validate your CSS. I didn't run through that.

Answer 3

Add display: inline-block; to .box_content.

Not sure whats causing it but that should fix it. At least it did on my computer.