Fixed Position Div Isn’t Staying Fixed When Scrolling on Android

My nice fixed position toolbar wasn’t sticking as it should as I scrolled through on my mobile browser window. It would appear sticky at times, but as I scrolled, it would slide up or down. The solution is to add “minimum-scale=1” to the meta viewport tag, which for me, now looks like this: <meta name=”viewport” […]

Removing the Horizontal Margins on a Google Chart Graph

I seem to be able to successfully modify quite a bit with google charts, but I couldn’t find a good way to remove the horizontal padding to the left and right of a google graph.  From what I can find, there really isn’t a good way to do it.  I thought I was close with […]

My Emerging CSS System

I’ve been thinking about javascript, sass, css, and the DRY (Don’t Repeat Yourself) principle a bit too much today. It’s partly due to working on a new code base, which makes it easy to point out what I would do differently, but also makes me re-examine my own code, or standards that are out there […]

Change Placeholder Text Color

Change the placeholder color of the text for input boxes in a form: ::-webkit-input-placeholder { color: #000; } :-moz-placeholder { color: #000; } ::-moz-placeholder { color: #000; } :-ms-input-placeholder { color: #000; }

Fixing Jagged Rendering on CSS Shapes and Arrows in Firefox

I\’ve been using the border elements on divs to create useful shapes, like arrows, like on this page.  Unfortunately, recently Firefox recently began having trouble rendering the diagonals — making them appear jagged, and just not very pleasing.  To fix this, just add the following to the css: -moz-transform: scale(.9999);

Fixed position div isn’t staying fixed in Chrome

I was working on a little menu specifically for mobile devices.   It was intended that this menu stay fixed at the bottom of the screen.  It usually worked, but in some instances in chrome, it would be thrown all the way to the bottom of the document, not the bottom of the window.  It looks […]

RGBA Color Format

Just a sample RGBA color format.  This will make a black line (rgb 0, 0, 0), but with .3 opacity: .sample-class{ border-right: 1px solid rgba(0,0,0,0.3); }

Equal CSS Tiles and Columns

 Two horizontal tiles, spaced equally: <div class=”tile-halves”> <div class=”tile”>First Tile</div> <div class=”tile”>Second Tile</div> </div>  Three horizontal tiles, spaced equally: <div class=”tile-thirds”> <div class=”tile”>First Tile</div> <div class=”tile”>Second Tile</div> <div class=”tile”>Third Tile</div> </div>  Four horizontal tiles, spaced equally: <div class=”tile-quarters”> <div class=”tile”>First Tile</div> <div class=”tile”>Second Tile</div> <div class=”tile”>Third Tile</div> <div class=”tile”>Fourth Tile</div> </div>

Targeting the Submit Button with CSS

Yeah, I always forget how to apply styles to just the submit button.  It\’s of course easy, but I can never get it to stick around in my brain for the next time I need to use it:  input[type=”submit”]

Vertical Center an Image Within a Link (or Div)

How to vertically center an image within a div: <style> .valign-helper{ display: inline-block; height: 90px; } a img{ display: inline-block; vertical-align: middle; } </style> <a title=\”my title\” href=\”#\”> <span class=\”valign-helper\”></span> <img src=\”image-path\” /> </a>