Say you want to vertically align a div
box inside a div
container. This is how you do it:
<div id="container">
<div class="box">
<span> Some text...<br />in two lines. </span>
</div>
</div>
Set the line-height to the container's (implicit) height. The container MUST have a height >= its line-height, because the line-height actually spans the area inside which .box will align vertically.
#container {
line-height: 50px;
}
Because the container's line-height is inherited by .box,...
When you add a linear gradient to an element, IE9 removes all border-radius
and inset box-shadows
. This is because you probably are doing linear gradients with this weirdo Microsoft filter:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
filter
hijacks the rendering of the entire element box, so you're out of luck. IE9 doesn't support CSS gradients.
A forward-looking workaround is to not use gradients and [emulate your gradients with box-shadows](https://makandracards.com/m...
Though the W3C even gives it as an example, no browser actually supports this CSS:
img:before {
content: "something";
}
Browsers will simply not render anything when doing that on images (Fun fact: It worked in an older version of Opera but got dropped).\
The same applies to the :after
pseudo-element.
This makes me sad.
You can try using jQuery instead.
It's not logical, so don't be too hard on yourself. You need to give it a height and change the box-sizing
and display
:
button
input[type="reset"],
input[type="button"],
input[type="submit"],
input[type="file"] > input[type="button"]
display: inline-block
box-sizing: border-box
height: 20px
line-height: 20px
This is a demo of the "Tabby" Javascript jQuery plugin to use tabs in regular textareas to make them suitable for in-browser coding of languages like HTML, CSS, Javascript, or your favorite server-side language. The idea is to be able to use a press of the TAB button or SHIFT+TAB to indent or outdent your code.
Capybara.ignore_hidden_elements
) that determines whether Capybara sees or ignores hidden elements.:visible
option when calling page.find(...)
. This way the behavior is only changed for this one find
and your step doesn't have confusing side effects.Capybara has an option (Capybara.ignore_hidden_elements
) to configure the default...
You can change the color for text selection via CSS, using the ::selection
and ::-moz-selection
pseudo-elements.
Adding this to your Sass will make all text selections use a red background:
::selection
background-color: #f00
::-moz-selection
background-color: #f00
Unfortunately, those can't be combined into "::selection, ::-moz-selection
". Doing so will have no effect.
You can use text-overflow
to truncate a text using CSS but it does not fit fancy requirements.
Here is a hack for the special case where you want to truncate one of two strings in one line that can both vary in length, while fully keeping one of them. See this example screenshot where we never want to show an ellipsis for the distance:
, but this works for pages written with Markdown:
kramdown > /tmp/github.html
O_o
Firefox, Opera and Internet Explorer will repeat elements with position: fixed
on every printed page (see attached example).
The internet knows no way to do this in Webkit browsers (Chrome, Safari). These browsers will only render the element on the first printed page.
Though Internet Explorer 9 supports the box-shadow
CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.
Consider this HTML:
<table style="border-collapse: collapse">
<tr>
<td>
<div style="box-shadow: 0 0 10px #f00">Hello universe</div>
</td>
</tr>
</table>
While it works in other browsers, IE9 is not showing any shadow. For some reason, it requires border-collapse: separate
for the table to be set:
<table style="border-collapse: separate" c...
A pull quote is a typographical technique in which an excerpt or quote from an article is duplicated within the article using a different formatting style so that it jumps out at the reader.
Blatantly copying the excerpt of the pull quote into it’s own element is not the way to go. A pull quote is a purely visual technique, and therefore should not change the structure of the body. Next to that, a structural representation of the excerpt would be seen twice by people using feed readers or services like Instapaper, as well as be re-read for ...
When you print out a HTML pages, all raster images (like PNGs) will appear aliased. This is because a printer's resolution is usually much higher than that of a computer screen.
If an image absolutely must look awesome when printed, a solution is to embed the image in much higher solution than needed (e.g. four times the horizontal resolution), then scale it down to the desired width using CSS.
Note that this will slightly alter the image's appearance on the screen because browsers will scale down the image [using an anti-aliasing method](...
Although it's tempting flirt with detecting mobile/touch devices with CSS media queries or Javascript feature detection alone, this approach will be painful when heavily customizing a feature beyond just tweaking the looks. Eventually you will want want the same detection logic to be available on both server and client side.
This card shows how to get a Ruby method touch_device?
for your Rails views and a method TouchDevice.isPresent()
for your Javascripts.
Note that we are detecting touch devices by grepping the user agent, and the ke...