CSS (7)


Google Map Corrupted Controls in Twitter Bootstrap Modal

As the rather lengthy title says, Google Maps controls get “corrupted” when showing a Google Map in a Twitter Bootstrap Modal, see my screenshot below: A Simple Fix #mapCanvas img { max-width:none; } This fix works simply by undoing the max-width:100% set on images by bootstrap default css. Setting max-width:none gives us normal controls again. […]

Read more...



css columns in chrome

  • May 17, 2013
  • CSS

Chrome has different defaults to the other browsers it seems, and it breaks elements mid-way, whereas the other browsers will not break mid-element. so, a proprietary prefix fix: [code]-webkit-column-break-inside:avoid;[/code] will make Chrome behave like the rest (which personally i like as a default)

Read more...



css gradient builder

Found a great plugin – ClassyGradient, and it’s great. really great. exactly what i was looking for, for a new project. i have extended it to allow checkboxes to choose which lines of css to output (with or without each of the proprietary prefixes). as i was integrating, i needed to update the output after […]

Read more...



firefox input button extra mystery padding

The case of firefox input button extra mystery padding. Firefox can be annoying. it seems firefox addes extra padding to button elements (or input type=”button”) that does not identify itself and cannot be removed using normal css… what? yes: this is the fix for the firefox input button extra mystery padding [code] .button::-moz-focus-inner { border:0; […]

Read more...



CSS System Colour Names (css system color names)

I’m building myself a new admin interface for use on my projects, and wanted to use css system color names so that I could design a more “native” looking admin area. Note: The colours are actually rather boring… So I looked up this HTML table of CSS2 System Color Names, as per http://www.w3.org/TR/css3-color/#css2-system, I know […]

Read more...



disable user selecting text

  • November 20, 2012
  • CSS

How to disable user selecting text using CSS. Just about every vendor prefix used here as the browsers continue to implement features from the CSS3 spec. [code] -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; [/code] Sadly, Opera doesn’t seem to support user-select. I use this on input labels to make […]

Read more...



clever nice quotes instead of boring ones

so instead of the regular: ” and ‘ let us make some fancy curly ones: [code gutter=”false”] ‘/‘ opening single quote ’/’ closing single quote “/“ opening double quote ”/” closing double quote [/code] giving us: some ‘curly single quotes’ and some “curly double quotes” wonderful.

Read more...