Just a test which is working fine. #parent{ width: 100%; height: 100%; overflow: hidden; } #child{ width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; /* So the width will be 100% + 17px */ } Working Fiddle JavaScript: Since the scrollbar width differs in different … Read more
No, there is no “previous sibling” selector. On a related note, ~ is for general successor sibling (meaning the element comes after this one, but not necessarily immediately after) and is a CSS3 selector. + is for next sibling and is CSS2.1. See Adjacent sibling combinator from Selectors Level 3 and 5.7 Adjacent sibling selectors … Read more
The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements. So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/ .frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you … Read more
Have a look at wkhtmltopdf . It is open source, based on webkit and free. We wrote a small tutorial here. EDIT( 2017 ): If it was to build something today, I wouldn’t go that route anymore. But would use http://pdfkit.org/ instead. Probably stripping it of all its nodejs dependencies, to run in the browser.
Interpolate: body height: calc(100% – #{$body_padding}) For this case, border-box would also suffice: body box-sizing: border-box height: 100% padding-top: $body_padding
You can concatenate two transitions or more, and visibility is what comes handy this time. div { border: 1px solid #eee; } div > ul { visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } div:hover > ul { visibility: visible; opacity: 1; } <div> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> … Read more
Warning! This answer is too old and doesn’t work on modern browsers. I’m not the poster of this answer, but at the time of writing this, this is the most voted answer by far in both positive and negative votes (+1035 -17), and it’s still marked as accepted answer (probably because the original poster of … Read more
A non-CSS – no JavaScript/jQuery answer: <label>Option name <select> <option value=”” disabled selected>Select your option</option> <option value=”hurr”>Durr</option> </select> </label> Update (December 2021): This works for latest Firefox, Chrome, and Safari. It used to not work for many browsers in the past, as pointed out in the comments.
Yes, you CAN do this. Using pointer-events: none along with CSS conditional statements for IE11 (does not work in IE10 or below), you can get a cross browser compatible solution for this problem. Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay div and have clicks flow through to elements underneath. CSS: pointer-events: … Read more
Do not apply an explicit width or height to the image tag. Instead, give it: max-width:100%; max-height:100%; Also, height: auto; if you want to specify a width only. Example: http://jsfiddle.net/xwrvxser/1/ img { max-width: 100%; max-height: 100%; } .portrait { height: 80px; width: 30px; } .landscape { height: 30px; width: 80px; } .square { height: 75px; … Read more