Best IT Recipes

User agent stylesheet overriding my table style? Twitter

I am using twitter bootstrap. My problem is that the font size in the tables is wrong. For some reason, the User Agent style sheet overrides the styles of the boot table.

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

In my inspector, I see the following difference:

My page:

CSS style for my page

Twitter download page:

CSS style for twitter bootstrap page

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

I was not able to understand why this is happening on my page and on the twitter download page.

Most other CSS works fine.

My css import:

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

Import CSS to twitter boot page:

 <link href="assets/css/bootstrap.css" rel="stylesheet">
+47
css twitter-bootstrap
Feb 16 2018-12-12T00:
source share
5 answers

I myself understood this. I wrote the <!DOCTYPE html> tag incorrectly. Therefore, if you have this problem, make sure the doctype declaration is correct!

+75
Mar 11 2018-12-12T00:
source share

Please import the docs.css file into your application. If I should say so, you should have understood that Twitter Bootstrap Docs use bootstrap.css and custom docs.css. Try the one you can download from the github package. Then try playing around with the table classes in the docs. css without messing with the css master. Or try adding DOCTYPE to the headers.

 <link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
+1
Mar 09 2018-12-12T00:
source share

If the <!DOCTYPE html> declaration does not work at the very beginning, then this is probably not your user and agent stylesheet calling it. It could be a Bootstrap style table overriding your styles (I had this problem). Make sure the stylesheet is linked to the Bootstrap stylesheet 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 -->
+1
Oct 25 '14 at 17:45
source share

I had the same problem as the OP. I need a nice little text, and some styles of user styles overcome it and put it:

 font-size: medium;

When I wanted:

 font-size:8pt;

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

 <!DOCTYPE html>

Then everything was good, a bad habit to enter, so as not to declare a doctype at the top. All user stylesheets are now gone.

To find out what overrides what's on your CSS, it is always recommended to check the element (F12), and you can change and turn off the attributes on the fly until you achieve the right, and then update your CSS file!

However, if you have a problem with the user's style sheet, these values ​​will be blocked.

+1
Jun 12 '16 at 19:47
source share

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

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

It worked for me.

0
08 Sept. '15 at 12:04
source share


More articles:


All Articles