When use input[type=image] for form submission, the image is stretched when use Retina Display mobile. Since you cannot change ‘src’ attribute using CSS, I had to find another way to accomplish this. Someone said to use ‘content’ in CSS can do, but I failed. And this method is not browser compatible. Anyway, you can make…
Category: CSS
Media Query Reporter CSS Injection
Ref: http://webdesigntutsplus.s3.amazonaws.com/tuts/221_responsive_widget/Media-Query-Files-DEMO/index.html <link rel=”stylesheet” type=”text/css” media=”screen” href=”http://webdesigntutsplus.s3.amazonaws.com/tuts/221_responsive_widget/Media-Query-Files-DEMO/styles-mediaquery-reporter.css” /> Code Only: /* ====================================== MediaQuery-Reporter Styles ========================================= */ body:after { content: “less than 320px”; font-size: 300%; font-weight: bold; position: fixed; bottom: 60px; width: 100%; text-align: center; background-color: hsla(1,60%,40%,0.7); color: #fff; } @media only screen and (min-width: 320px) { body:after { content: “320 to 480px”; background-color: hsla(90,60%,40%,0.7);…
Media Queries to handle all device’s screens
To cover all screen resolution including portrait and landscape screens. Found from stuff & nonsense (http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/) /* Smartphones (portrait and landscape) ———– */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ———– */ @media only screen and (min-width : 321px) { /* Styles…
CSS Custom Fonts for all browsers
Use Font Squirrel to create compatible fontface: http://www.fontsquirrel.com/fontface/generator Confirmed working in IE, Chrome, Firefox 1. Upload font file and get zip file 2. Copy CSS code to your code 3. Done Not compatible for IE: From Symphony of dot net: http://symphony-of-dot-net.blogspot.com/2010/03/making-css-custom-font-works-with-ie.html @font-face { font-family: my_font; src: url(‘my_font.eot’); src: local(my_font), url(‘my_font.ttf’) format(‘opentype’); } p…
CSS floats: container does not stretch to fit floated contents
Original Article: http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/ Here’s a quick resolution to an almost ungooglable problem.” This article was formerly titled “Alternative to the PIE clearfix hack” but has since been rewritten. Getting this problem? Example: Left Left Left Left Right Right Right Right <div style=”background: red; padding: 2%; border: 1px solid #000;”> <div style=”border: 1px solid #000000; background: #e2e2e2;…