CSS linting problem : padding and border problem

I got 2 warnings.

From my two buttons.


.btn-left {

    padding: 1em;

      width: 28%;

}

.btn-right {
    border: 2px solid #fff;
    width: 38%;
}

Jewel shop

Is it just okay, I just ignore them and how can I fix it?

It all depends on context but if you have a number of element with percent adding up to the available space then adding padding or borders to the items will make them too big to fit.

If this is the case you can swap to the border-box model instead and then padding and borders will be contained within the specified width.

.btn-left,
.btn-right {
  -moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

Border-box doesn’t work in IE6 and IE7?

Jewel

Maybe I should ignore all the warnings?

Why are you still developing for IE6/7? That’s a better question :slight_smile: .

.btn-left,
.btn-right {
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}

^These lines of code don’t fix the warnings though:

The tool you are using doesn’t seem clever enough to recognise the additional rules in the following styles. If you supply it like this you get no errors:

.btn-left {
	padding: 1em;
	width: 28%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.btn-right {
	border: 2px solid #fff;
	width: 38%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

Of course you don’t want to use that verbose method so just ignore the error.

Remember these are just tools and to be honest the only tool you need is the w3c validator and common sense :smile:

1 Like

You should not ignore them. At least not completely.

I think of Warning more as “Caution” (OK. maybe that’s the same, but it seems less alarming to me)

In most cases you can ignore them - BUT - you should do so only after you understand what they’re about.

For examples
vendor prefixes
Hopefully most browsers are smart enough to use the rule that they need and will not bother with the others
inherited color
Because styles cascade there may be times when a child element gets a color from a parent that causes a problem

Once you check things out, you can either code to make the tool happy or pigeon hole the warning

1 Like

Do you guys always use CSSLINT?

I never use it. I only use the w3c css validator and common sense :smile: .

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.