58

I want a font-size of a 11, but Chrome and Firefox are giving me 16. When I examine the element in Chrome I see and look at the computed property I see:

font-size: 16px;
  table - medium user agent stylesheet
  Style Attribute - 11px
  table - medium user agent stylesheet
  .v11gray - 11px style.css

Under computed styles in Firefox I get:

font-size: 16px
   TABLE[0].style → 11px    element
   .v11gray → 11px  style.css:19

The last three lines are struck out. Why is my css rule being overridden? Are there steps I can take to find out?

gen_Eric
  • 223,194
  • 41
  • 299
  • 337
Joe
  • 7,922
  • 18
  • 54
  • 83
  • 2
    Got a jsfiddle? Code examples are very helpful – starbeamrainbowlabs Jul 05 '12 at 16:38
  • Show us your CSS includes. You want to make sure your main style sheet is included last, or else plugin and other css style sheets may override some of your selectors. – Lowkase Jul 05 '12 at 16:42
  • This is a copy of stuff I have on the live site. If I knew how to recreate the problem, I'd get rid of it. – Joe Jul 05 '12 at 16:49
  • 1
    @Joe, you need to post a complete example or a URL. It is now unclear what the element is and what style sheets are applied. – Jukka K. Korpela Jul 05 '12 at 17:06
  • I agree with @Jukka, your post isn't detailed enough, or providing the correct source, that allows us to assess the error you're having in comparison to what you're trying to do. – Mike Kormendy Oct 22 '14 at 14:51
  • An example - for the textarea tag - In the CSS be sure NOT to specify a width AND while also having cols specificied in the textarea tag because you may have a "user agent stylesheet" issue. Look for conflicting rules and try to eliminate them. – Xofo Sep 12 '15 at 01:33

2 Answers2

81

This is an outside shot without your code, but the solution when I had the exact same problem. My DOCTYPE statement had gotten fouled up by an errant keystroke, as described in this question. You might want to inspect it visually and/or validate.

Community
  • 1
  • 1
kburke
  • 1,023
  • 7
  • 9
  • @kburke - Worked perfectly! such a simple fix! – Mitch Dempsey Jul 24 '13 at 20:23
  • 1
    +1 Helped me identify an extra < before the – AdRock Jun 12 '14 at 08:46
  • Thank you. I had put a '''' line in one of the 'header_php.php' files in our Zen Cart system. These are output before the normal html header code, so the '''' tag appeared before the '' '' line, making the browser ignore it, and this one page suddenly had ''table - medium'' in the computed styles for table text, screwing up their font size. The problem was obvious when I View Source'd the page compared to another that worked. – Neek Oct 11 '14 at 06:40
  • 2
    If you are printing out stuff before the doctype, styling will also fail. I had some PHP tracing being echoed before the doctype which I had to remove for proper styling. – Dan H Dec 30 '15 at 15:33
  • I managed to forget my doctype. Thanks! – Zudo Mar 04 '16 at 19:02
4

This might sound odd, but it helps to check (especially if you aren't using an IDE or one that doesn't do validation on your CSS). You might want to make sure that you have a ; and not a : at the end of your:style; line. Because at a glance, in the inspector the syntax appears to be correct but isn't. So your user agent stylesheet overwrites it. It's one of those "make sure your printer is plugged in" checks. It happens to all of us every once in a while.

Philll_t
  • 4,267
  • 5
  • 45
  • 59