Hello all. I've been messing around with css more than usual lately and I've come across a problem. I've got a 'p' element styled like:

  position: relative;
  top: 30px;
  left: 10px;
  font-family: san-serif;
  font-size: 14px;
  color: white;

And it looks slightly larger in firefox than in chrome. What property am I not specifying here that would cause it to render differently in the two browsers? All comments are appreciated. Thanks in advance.

  • It should be 'font-family: sans-serif' instead of san-serif. Rob Crowther about 9 years ago
  • @RobCrowther thanks, didn't change anything, but Dan Woodson about 9 years ago
  • I look a little less like an idiot now :) Dan Woodson about 9 years ago

2 answers

Emily G 620
This was chosen as the best answer

font-family: san-serif; says to use the default sans-serif font of the browser which can be changed by the user.

Try font-family: arial, san-serif; and see if the size difference is still there.

You can check what the default sans-serif font family is under 'Options' in each browser.

Answered about 9 years ago by Emily G

My guess is that there's a style declared elsewhere that's interacting with p.remove_song, possibly canceling out any of the above styling.

Could you post a link?

If not, I recommend you try using Firebug to debug in Firefox, and the Developer Tools to debug in Chrome. The difference is probably very subtle, but these tools should give you insight into how each browser is behaving.

Here's a video I made about this: http://doctype.tv/debug

Answered about 9 years ago by Nick Pettit
  • Wow. Thanks, I'll look into it more with the browser's individual debuggers. Dan Woodson about 9 years ago