Set box-sizing property to border-box: div { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; width: 100px; height: 100px; border: 20px solid #f00; background: #00f; margin: 10px; } div + div { border: 10px solid red; } <div>Hello!</div> <div>Hello!</div> It works on IE8 & above.
If you take the element that you want to be the footer and set it to be position:fixed and bottom:0, when the page prints it will repeat that element at the bottom of each printed page. The same would work for a header element, just set top:0 instead. For example: <div class=”divFooter”>UNCLASSIFIED</div> CSS: @media screen … Read more
The CSS3 keyword initial sets the CSS3 property to the initial value as defined in the spec. The initial keyword has broad browser support except for the IE and Opera Mini families. Since IE’s lack of support may cause issue here are some of the ways you can reset some CSS properties to their initial … Read more
Inline elements: respect left & right margins and padding, but not top & bottom cannot have a width and height set allow other elements to sit to their left and right. see very important side notes on this here. Block elements: respect all of those force a line break after the block element acquires full-width … Read more
Syntax: transition: <property> || <duration> || <timing-function> || <delay> [, …]; Note that the duration must come before the delay, if the latter is specified. Individual transitions combined in shorthand declarations: -webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; -o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s; … Read more
tl;dr Vertical align middle works, but you will have to use table-cell on your parent element and inline-block on the child. This solution is not going to work in IE6 & 7. Yours is the safer way to go for those. But since you tagged your question with CSS3 and HTML5 I was thinking that … Read more
The following works for me in Internet Explorer. Note the addition of the table-layout:fixed CSS attribute td { border: 1px solid; } <table style=”table-layout: fixed; width: 100%”> <tr> <td style=”word-wrap: break-word”> LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord </td> </tr> </table>
You could set your SVG as a mask. That way setting a background-color would act as your fill color. HTML <div class=”logo”></div> CSS .logo { background-color: red; -webkit-mask: url(logo.svg) no-repeat center; mask: url(logo.svg) no-repeat center; } JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask Please check whether your browser supports this feature: https://caniuse.com/#search=mask
You can use filters with -webkit-filter and filter: Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters You can change an image to grayscale, sepia and lot more (look at the example). So you can now change the color of a PNG file with … Read more
The solution to this is actually very easy, but not at all obvious. You have to trigger something called a “block formatting context” (BFC), which interacts with floats in a specific way. Just take that second div, remove the float, and give it overflow:hidden instead. Any overflow value other than visible makes the block it’s … Read more