Archive for the ‘ css ’ Category

Fix Dodgy Font Rendering in CSS

Posted by pete

If your fonts don’t quite look smooth then apply the following CSS:

html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

Vertically Align in CSS

Posted by pete

If you need to align anything vertically in CSS, apply the following class:

.verticalAlign {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Fixing Drupal’s Clearfix CSS

Posted by pete

Drupal’s default clearfix CSS leaves a gap at the bottom of the page, this removes this:


.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}

.clearfix { display: inline-block; }
/* \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* */

Html Form Buttons not displaying correctly in mobile safari [Solved]

Posted by pete

This is problem caused by safari attempting to default buttons in the mobile browser to its own apple look. A simple fix can be done using CSS. First add a class to your input button tag in the form which you may already have put there:

[sourcecode language=’html’][/sourcecode]

then in your stylesheet add the following to fix the issue once and for all:

[sourcecode language=’css’].mySubmitClass {
-webkit-appearance: none;
}[/sourcecode]