User agent stylesheet overriding my table style? Twitter Bootstrap

Question

I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.

On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.

In my inspector I see the following difference:

My page:

CSS style for my page

The twitter bootstrap page:

CSS style for twitter bootstrap page

So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.

I haven't been able to figure out why this is different on my page and the twitter bootstrap page.

Most of the other CSS is working fine.

My css import:

<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">

CSS import on twitter bootstrap page:

<link href="assets/css/bootstrap.css" rel="stylesheet">

I actually figured this out myself, but thought I'd post the question anyways as it might help someone else. I had the tag wrongly written. So if you have this problem make sure the doctype declaration is correct! — Riku, Feb 16 '12 at 09:04
I'd like to give you kiss! This absolutely saved my time and nerves. — Jarno Lahtinen, Nov 06 '13 at 16:41
Thank you so much, I've been tearing my hair out for the last hour over this!! — Owain Reed, Oct 01 '15 at 14:15
It might be silly, but I couldn't understand why my table is all bold until I noticed I used `` everywhere instead of `` — Paul, Aug 06 '20 at 21:26

score 120 · Accepted Answer · edited Sep 01 '16 at 18:49

120

I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!

edited Sep 01 '16 at 18:49

gunr2171

16,104
25
61
88

answered Mar 11 '12 at 16:08

Riku

2,223
2
17
20

2

Fix indeed. Still utterly confusing why it would do that – Damon Sep 12 '13 at 20:28
I had this problem when trying to convert haml files to erb format (ruby on rails). Haml auto-includes a doctype with the notation `!!!`. – Chris Dec 03 '13 at 17:19
@Riku Wonderful fix.Thanks a lot dude. Had been breaking my head for 2 hours ! .. But weird bug . – niranjan94 Dec 30 '13 at 06:51
8

Yes, make sure ` ` appears at the top of your HTML. – JohnB Jul 11 '14 at 06:33
@Riku WTF!! in my case `user agent stylesheet` appears twice for `table` element... an was for ` ` incorrect written. Thanks +1 `:)`!! – albciff Mar 18 '15 at 23:13
From 2018, I thank you. This was something we missed and never noticed. We've been wondering why our application behaves different than we expect. – Bunyamin Coskuner Aug 28 '18 at 08:30
If the problem appears on random pages on your site then make sure your server side script doesn't output any errors or other stuff on those pages before the tag. – J. Wrong Dec 10 '18 at 00:34
For me, it was two-fold. The doctype line was missing in DOM inspector, but present in PHP HTML code, and further investigation showed it was a `window.some_variable = 'value'` that was inserted at the top of the page, before the doctype and other headers, that was to blame. Placing this after all headers (meta and PHP) were sent fixed the CSS issue. Hope this helps others. – redfox05 Aug 24 '20 at 10:00
Holy s***! I was completely baffled by this. Working on a legacy app, and didn't even notice the doctype on just one page. Only page on the site I had xhtml. Lol! Thank you so much! – dgo Sep 27 '21 at 21:53

score 1 · Answer 2 · answered Oct 25 '14 at 17:45

If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->

score 1 · Answer 3 · answered Jun 12 '16 at 19:47

I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:

font-size: medium;

When I wanted:

font-size:8pt;

I placed the following at the top of my HTML page:

<!DOCTYPE html>

All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.

To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!

However if you do have a user stylesheet issue, these values will be locked.

score 1 · Answer 4 · answered Mar 09 '12 at 03:48

Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.

<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">

score -1 · Answer 5 · edited Sep 08 '15 at 15:27

-1

Check whether your CSS is called or not in browser dev tools (press F12) under network column.

If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".

It worked for me.

edited Sep 08 '15 at 15:27

Jakub Matczak

15,341
5
46
64

answered Sep 08 '15 at 12:04

Ravikumar K

85
2
11

This isn't an answer to the question. – vonbrand Sep 08 '15 at 12:08

User agent stylesheet overriding my table style? Twitter Bootstrap

5 Answers5

Linked