CSS Issues between browsers when using bootstrap

Question

I have make this design using CSS and it looks great on Chrome.I'm also using bootstrap, and noticed that bootstrap is causing to looks different on FF

This is my CSS. I have my deno on jsbin here: http://jsbin.com/yosusixe/2

Any idea why this happens?

         div.bonecard {
                background-color: white;
                margin: 10px;
                width: 340px;
                height: 210px;
                border: 2px solid black;
                border-left: 2px solid black;
                padding: 10px;
                -webkit-border-radius: 20px;
                -webkit-border-top-right-radius: 50px;
                -webkit-border-bottom-right-radius: 50px;
                -moz-border-radius: 20px;
                -moz-border-radius-topright: 50px;
                -moz-border-radius-bottomright: 50px;
                -webkit-box-sizing: content-box;
                border-radius: 20px;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
                position: relative;
                float: left;
                -webkit-transition: color 0.5s ease;
            }
            div.bonecard:after, div.bonecard:before {
                background-color: white;
                position: absolute;
                display: block;
                content:"";
                border: 2px solid black;
                border-right: 2px solid white;
                width: 6px;
                left: -10px;
            }
            div.bonecard:before {
                top: 60px;
                height: 60px;
            }
            div.bonecard:after {
                top: 180px;
                height: 30px;
            }

This is an image of how it looks

enter image description here

Jesus Lugo · Accepted Answer · 2014-08-08 21:14:04Z

4

For an unknown reason Firefox is taking box-sizing: border-box (from bootstrap), while Chrome does not. You can add following code to each class:

div.bonecard {box-sizing:content-box}
div.bonecard:after, div.bonecard:before {box-sizing:content-box}

Now the elements will look the same in both browsers.

answered Aug 8, 2014 at 21:14

Jesus Lugo

7956 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diego Over a year ago

great. Here is the demo showing the same result on both browsers: jsbin.com/yosusixe/8

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Bootstrap uses box-sizing:border-box on all their stuff -- it's global in all elements without exception -- so you don't count borders or padding:

This works in both now:

http://jsbin.com/yosusixe/4/edit

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Aug 8, 2014 at 21:08

Christina

34.7k17 gold badges87 silver badges119 bronze badges

Collectives™ on Stack Overflow

CSS Issues between browsers when using bootstrap

2 Answers 2

1 Comment

http://jsbin.com/yosusixe/4/edit

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related