W3.CSS code overrides my line height and div widths

[MichaelF]

I was looking for a more flexible way of creating popup tooltips when I came upon the W3.CSS framework. It Unfortunately, it seems to mess with my own css styles.

For example, as soon as I added this link tag to the file head section,

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

all the paragraph elements increased in line height.

Also, I use div blocks for left, center, and right columns. W3.CSS narrowed the div blocks by about 10-20 pixels, pushing the whole page to the left. My div blocks use float: left and different width values to build the columns.

Can someone tells me why W3.CSS is overriding my css settings?

[Ingolme]

First, the link to your stylesheet should be further down than the link to the W3.CSS stylesheet. If the error is still occurring after that, then it may be that it's using selectors that have higher precedence.

The issue with the width of the blocks might be because W3.CSS is forcing everything on the page to use a border-box instead of content-box for the box sizing. This is a practice that a lot of CSS frameworks use which I disagree with. A framework shouldn't be messing with the default rendering behaviour of elements that don't use its classes.

[MichaelF]

I did move the link to my css file below the link to W3.css and the problem persisted.

I don't understand the difference between a border-box and a content-box but I agree with your sentiment. There are so many useful and interesting W3.css classes but I can't use them if they distort basic element behaviors n unexpected ways.

Has anyone else noticed this problem?

 

[MichaelF]

I just did an experiment. I saw somewhere on one of the W3.CSS pages that you could download the css file and run it locally.

I examined the file and saw at the top two statements with html definitions. The first one included box-sizing:border-box. When I looked up the box-sizing property, the default was content-box, as you stated.

I commented out the two html statements and then added a link to that local file before the link to my css file. Amazingly my left, center, and right div blocks displayed as expected again. I did have to add "line-height: normal" to my p, th, td, and a few other styles to eliminate the unwanted extra line height that was coming from the W3.css file.

With those problems fixed, I was able to re-implement the w3-tooltip element and create popup panels whose size and position could be individually controlled within a <span style=" "> tag block.

It is counterproductive for W3schools to offer a css framework that requires the user to waste so much time figuring out workarounds for unwanted behaviors. it spoils one's enthusiasm for the whole thing.

[Ingolme]

They probably did it because all of the other major CSS frameworks do it as well. Personally, I do not like to use CSS frameworks. CSS is quite a simple language on its own, it doesn't really need abstraction layers on top of it.