Opened 7 years ago

Closed 7 years ago

#9528 closed Bug (fixed)

box-sizing css skin bug

Reported by: Jacques van Zuydam Owned by: Piotrek Koszuliński
Priority: Normal Milestone: CKEditor 4.0.1
Component: UI : Skins Version: 3.0
Keywords: Cc:

Description

I use a set box-sizing parameter of "border-box" on all my objects in CSS, using the "*" selector. This is having a negative impact on how the buttons look on the new CKEditor 4 Beta. I "fixed" it by applying an auto height to a.cke_button Obviously I know it's not conventional use of border-box, however with pixel perfect web-design it really helps.

Attachments (2)

Screen Shot 2012-10-29 at 2.06.16 PM.png (22.5 KB) - added by Jacques van Zuydam 7 years ago.
Screen shot of Border-Box bug
9528.html (10.0 KB) - added by Piotrek Koszuliński 7 years ago.

Download all attachments as: .zip

Change History (11)

Changed 7 years ago by Jacques van Zuydam

Screen shot of Border-Box bug

comment:1 Changed 7 years ago by Jakub Ś

Could you please provide sample page with CSS that is causing this problem?

comment:2 Changed 7 years ago by Jacques van Zuydam

  • {

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

}

This is the CSS that is causing the error, the skin's style uses fixed heights, and border-box includes padding into the fixed height, instead of adding extra pixels to the height which is the normal way CSS works without border-sizing. I have also seen this bug on the tabs of the pop-up screens, unfortunately the page is under development and I don't have the authority to add a url for you to look at.

comment:3 Changed 7 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.0.1
Status: newconfirmed

comment:4 Changed 7 years ago by Jakub Ś

Keywords: css box-sizing removed
Version: 4.0 (GitHub - master)3.0

This is happening in both CKE 3.0. and CKE 4.0 (Not a regression) Just put the below on your page:

<style>
    * { 
	box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	} 
</style>

Seems that styles work ok with default content box only.

comment:5 Changed 7 years ago by Piotrek Koszuliński

I think that we have to add box-sizing to our CSS reset. Especially that it's becoming more and more popular as it fixes unnatural standard box model and is well supported even in IE8/9.

See "Is it safe to use?" section in http://paulirish.com/2012/box-sizing-border-box-ftw/

Changed 7 years ago by Piotrek Koszuliński

Attachment: 9528.html added

comment:6 Changed 7 years ago by Piotrek Koszuliński

Owner: set to Piotrek Koszuliński
Status: confirmedassigned

I attached sample on which issue can be verified on all supported browsers except IE7.

comment:7 Changed 7 years ago by Piotrek Koszuliński

Component: GeneralUI : Skins
Status: assignedreview

Pushed git:29b9297 for review.

comment:8 Changed 7 years ago by Olek Nowodziński

Status: reviewreview_passed

Hopefully, this fix covers all possible cases.

comment:9 Changed 7 years ago by Piotrek Koszuliński

Resolution: fixed
Status: review_passedclosed

Masterised git:2112bc4

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy