1

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):

enter image description here

4
  • I can't tell what it is you're talking about. Switching between Firefox and Chrome, they look virtually identical. Perhaps a screenshot showing the problem would help. Also: what version of Firefox?
    – thirtydot
    Oct 5, 2011 at 21:10
  • 1
    Added image.. waiting for PR.
    – lsl
    Oct 5, 2011 at 23:46
  • 1
    If you added anymore divs, this thing might explode!
    – Rob
    Oct 6, 2011 at 3:08
  • Haha thanks, but this was actually the most elegant solution I came up with after trying quite a few. Thanks for adding an image! Lou. Yes I needed a spacer div so the margins worked more fluidly with the top title tab Rob. I know, it's a far out model but I thought it looked cool and I wanted it to work with hardly any image hacking. Of course, if CSS had chamfer corners... Oct 6, 2011 at 4:04

3 Answers 3

1

Add display: inline-block; to .box_content.

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

3
  • GWT developer plugin and lots of other plugins I need don't work on 7.x yet, so yeah, I am last week.
    – user177800
    Oct 6, 2011 at 1:18
  • Do they not work or is it just the version issue? You can disable the version check I think. Or you can do the oldschool thing and unzip the plugins and change the version
    – lsl
    Oct 6, 2011 at 3:13
  • 1
    OMG This worked! Thank you Louis. That was driving me nuts. The margin is still there but at least it's filled in. It's got to be something with the resume titles. Oct 6, 2011 at 4:08
1

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

0

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!

2
  • I wouldn't be surprised if it was as obscure as the <li> tags in the lists. I also cleaned out a lot of DIVs and instead used classes for the individual elements to more easily control paddings. Oct 6, 2011 at 5:48
  • Margin does not affect height. All browsers set margin on headings. You don't need to set padding/margin to zero. Just set it to what you want.
    – Rob
    Oct 6, 2011 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.