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:

p.remove_song{
  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 almost 7 years ago
  • @RobCrowther thanks, didn't change anything, but Dan Woodson almost 7 years ago
  • I look a little less like an idiot now :) Dan Woodson almost 7 years ago

2 answers

Emily G 620
4
points
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 almost 7 years ago by Emily G
3
points

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 almost 7 years ago by Nick Pettit
  • Wow. Thanks, I'll look into it more with the browser's individual debuggers. Dan Woodson almost 7 years ago