css - Why does Chrome browser change the border size and does not set it to the one that I am requesting? -

-

i trying understand why border size not size setting css rules. here a fiddle , here html:

<!doctype html> <html> <head>   <meta charset="utf-8">   <title>p inside body</title>   <link rel="stylesheet" href="stylesheets/working.css"> </head>  <body>    <h2>hello world!</h2>    <p>     sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,     eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. nemo enim ipsam     voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem     sequi nesciunt. neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non     numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. ut enim ad minima veniam,     quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? quis autem     vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum     fugiat quo voluptas nulla pariatur?   </p>  </body>  </html>

and here css file:

body {   background-color: antiquewhite;   border: 10px solid black;   padding: 10px 20px 30px 40px;   margin: 10px 10px;   box-sizing: border-box;   color: darkblue; }  p {   width: 400px;   padding: 10px 10px;   border: 3px solid red;    box-sizing: inherit; }

when inspecting <p> element, see border size not 3px 2.222.

picture of box model when inspecting p element

any clue why?

edit / update

i using chrome version 46.0.2490.80 (64-bit) on mac os x yosemite. true problem appears chrome inspection. when using firefox (version 41.0.2) border correctly displayed size 3. same goes safari (version 9.0 (10601.1.56.2)). displays size 3.

so, "problem" chrome?

this stupid mistake not obvious @ all. want post here correct answer/solution problem in order save sometime else might come same situation.

the problem zoom level on chrome browser. on 90% (which not easy identify) , made chrome recalculate sizes using zoom scaling.

when reset zoom 100%, border displayed correct size on developer tools box model.

the whole story confusing. because other properties correct. border not correct.

i spent lot of time on this. hopefully, next 1 not.


Comments

Post a Comment

Popular posts from this blog

javascript - Slick Slider width recalculation -

-
i'm trying add slide in panel on slick container css. carousel works except new width not being calculated when space has been added. recalibrate once advance next slide i'd happen each time panel opened or closed. i've tried adding both margin , padding, neither makes difference. ideas? https://jsfiddle.net/mhigley/dpf7mlpl/ html: <button type="button" id="button"><i class="fa fa-arrow-right"></i></button> <aside> <h2>slide in panel</h2> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </aside> <main role="main"> <div class="sections"> <section> <article> <h2>first slide</h2> <p>lorem ipsum d...
Read more

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

-
looking through primefaces code in app noticed following line: <f:facet name="header">#{trainsearch.traincount} trains</f:facet> it looks overriding header, makes sense, can explain me in little more detail? what happening line of code? complete code listed below: <p:datatable id = "results" value = "#{trainsearch.trains}" var = "train" rendered="#{not empty trainsearch.trains}" styleclass = "train-search-table horizontal-border"> <f:facet name="header">#{trainsearch.traincount} trains</f:facet> <p:column headertext = "train id"> <p:panelgrid columns="1" styleclass = "train-id-grid" layout = "grid"> <h:outputtext styleclass = "train-id-label" value="#{train.traini}"/> <h:outputtex...
Read more

angular2 services - Angular 2 RC 4 Http post not firing -

-
i trying fire post request app , it's not working, tried multiple ways. don't see request being fired under network tab in chrome. not sure problem is, appreciated. import { injectable } '@angular/core'; import { http, headers } '@angular/http'; @injectable() export class userservice{ private _url="users"; constructor(private _http: http){ } checkifusernameexists(username){ return this._http.get(this._url+"/"+username) .map(response => response.json()) } createuser(user){ let headers = new headers(); headers.append('content-type', 'application/json') console.log(json.stringify(user)); return this._http.post(this._url, json.stringify(user),{headers: headers}) .map(response => response.json()) } } first need capture error , solve error: this._http.post(this._url, json.stringify(user),{headers: headers}) .subscribe( ...
Read more