Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
Like Tree3Likes

Thread: CSS linting problem : padding and border problem

  1. #1
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times

    CSS linting problem : padding and border problem

    I got 2 warnings.



    From my two buttons.




    Code:
    .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?
    Attached Images Attached Images
    Last edited by graphicnerd; Oct 15th, 2015 at 09:45 AM.

  2.  

  3. #2
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Throw 'box-sizing:border-box' on them, it will solve your problem.
    This will include border and padding into the height.
    New Code will be:
    .btn-left, .btn-right {
    box-sizing:border-box;
    }
    .btn-left {
    padding: 1em;
    width: 28%;
    }

    .btn-right {
    border: 2px solid #fff;
    width: 38%;
    }
    Last edited by brandMatt; Oct 15th, 2015 at 12:34 PM. Reason: Added code
    Vapr_Arts likes this.

  4. #3
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    You could try using:
    Code:
    box-sizing: border-box;
    This will make it so that your padding and border will be contained within the width you have set. I don't really use lint, and would probably ignore the errors but this might fix it if you are concerned about it.


    Sent from my iPhone using Tapatalk
    brandMatt likes this.

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Oh just noticed brandMatt beat me to it!


    Sent from my iPhone using Tapatalk

  6. #5
    Senior Member brandMatt's Avatar
    Join Date
    Oct 2015
    Location
    St .Catharines Ontario
    Posts
    240
    Member #
    52164
    Liked
    51 times
    Gotta wake up pretty early...

    Just kiddin around.

    Gotta love box-sizing, it's right up there with flex box.

  7. #6
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by brandMatt View Post
    Gotta wake up pretty early...

    Just kiddin around.

    Gotta love box-sizing, it's right up there with flex box.
    Yea I started to reply in class and got interrupted when I got back n finally replied I saw you had beat me there


    Sent from my iPhone using Tapatalk

  8. #7
    Junior Member
    Join Date
    May 2015
    Posts
    27
    Member #
    49999
    reduce the border value as 1px

  9. #8
    Senior Member graphicnerd's Avatar
    Join Date
    Nov 2013
    Posts
    196
    Member #
    37739
    Liked
    1 times
    I just want to code better lol

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

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

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

    and

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

    Last edited by graphicnerd; Oct 19th, 2015 at 07:12 AM.

  10. #9
    Senior Member sarahswansea's Avatar
    Join Date
    Oct 2015
    Location
    Swansea, UK
    Posts
    155
    Member #
    52184
    Liked
    65 times
    Once upon a time, Microsoft ignored the CSS box model and did the opposite, and people could never mix widths, borders or paddings on the same <div> without it looking different on different web browsers.

    With end of life of Windows XP, and Windows 7+ coming with at least IE8 by default, it's *finally* time to forget about this. If it looks right, then it's right.

    Normally I'm all for strict linting, but I'd turn this warning off or ignore it because it is out of date now that IE7 is dying out.

    edit - for some numbers, IE7 has 0.41% market share and IE6 has 0.77% market share. These are the only people using browsers with the broken box model that the linter is warning about.
    Last edited by sarahswansea; Oct 19th, 2015 at 04:51 PM.
    Vapr_Arts likes this.

  11. #10
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    I got to agree with Sarah. The solution Matt gave was my initial response and if it were me and that didn't solve it I'd ignore it.

    Its not going to make or break your coding and in these situations its not an important issue. Unless you actually see something that looks out of place I say move on. I don't think anyone would fight you on it and if thats the only error you have you're fine. Most people that would know the difference anyway would be people like us who know that IE is a pain in the *** to work with. I cant wait until its phased out, if it ever is.


    Sent from my iPhone using Tapatalk


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:38 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com