Targeting IE with specific CSS, is always a awful task, however I thought I’d cover the two basic ways to do it: in HTML using conditional CSS and in stylesheets using hacks.
(more…)
How to Style HTML5 Input Placeholder With CSS
With HTML5 came the placeholder text for input and textarea elements, a welcome replacement for the JavaScripted alternative.
(more…)
Bounce rate too high? How to decrease bounce rate?
Does your website have a high bounce rate? Here are some possible problems with your website that might be costing you valuable customers.
Best Clearfix for All Browsers (IE6+)
Gone are the days of putting your clearfix as a separate div, this is the simplest CSS clearfix that works in all browsers (including IE6).
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
How to Use It
Say we have some HTML that looks like this:
<div id="container">
<div class="floated">content</div>
<div class="floated">content</div>
<div class="floated">content</div>
</div>
The problem is easy to see – the #container isn’t wrapping around the floated elements. Why? Floated elements are removed from the normal flow of the document, so the #container doesn’t know they are there. To fix this, we can add in our .group clearfix to the #container.
<div class="group" id="container">
<div class="floated">content</div>
<div class="floated">content</div>
<div class="floated">content</div>
</div>
And voilà, our #container now wraps around our floated elements.
Thanks to Nicholas Gallagher for this great clearfix.
How to enable remote publishing in WordPress (XML-RPC)
In order to update your WordPress website from your mobile phone or another remote location, you need to enable XML-RPC (XML Remote Procedure Call). This was disabled by default in WordPress versions 2.6 to 3.4 for security reasons. These security issues have been resolved in WordPress 3.5 and XML-RPC is enabled by default.
Enabling XML-RPC in WordPress 3.4 and below
Due to security issues in WordPress versions 3.4 and below, XML-RPC has been disabled by default.
To enable XML–RPC:
- Log into your WordPress Admin
- On the sidebar, select Settings and then Writing
- Check the box next to XML-RPC
- Save your settings
Alternatively, you could update to the latest version of WordPress, as XML-RPC is enabled by default.
Enabling XML-RPC in WordPress 3.5
WordPress has resolved the security issues related to XML – RPC and it is enabled by default. You do not need to do anything to publish to your WordPress blog remotely.
Disabling XML-RPC in WordPress 3.5
If you wish to disable XML-RPC, you can do this through the use of a Disable XML-RPC WordPress plugin.
So now you should be able to remotely update your WordPress website without any issues. Happy WordPressing!
How To Vertically Center an Image in a DIV (All Browsers)
Horizontally centering in CSS has always been fairly trivial, but vertical centering is another story. So here are two methods guaranteed to work across all browsers (including IE6) for vertically centering an image.
Method 1: The Line Height Method
This method involves setting the line-height property in css, to be the same as the containers height. It works because an image is only considered to be one line, and by setting the image’s vertical align property, we can make it sit in the middle of the line.
Requirements:
- A fixed height container (e.g. 200px)
- Any size image
- A container taller than the image
Browsers:
All browsers (IE6+)
The Code
<div id="container">
<img src="myimage.jpg" alt="image" />
</div>
#container {
height: 200px;
line-height: 200px;
}
#container img {
vertical-align: middle;
}
Method 2: The Absolute Position + Negative Margins Method
The negative margins method is slightly trickier in terms of how it works, but the code is still super simple. Negative margins might seem like a hack, but they are perfectly valid CSS, in fact the W3C even say “Negative values for margin properties are allowed”. Negative margins work in 2 ways, when you apply a negative margin to the top/left margins of an element, it moves the element in that direction; applying them to the right/bottom margins pulls the subsequent elements towards the element. Seems tricky, but in practice its pretty simple. In this example, we are going to using an image thats 200px in height.
Requirements
- Any size container
- Fixed height image
Browsers
All browsers (IE6+)
Code
<div id="container">
<img src="myimage.jpg" alt="image" />
</div>
#container {
width:960px;
height:600px;
position:relative; /* Set as position relative to the IMG will move relative to this container */
}
#container img {
position:absolute;
top:50%; /* Move the image down, so its top is half way down the container */
margin-top:-100px; /* Move the image back up half its height */
}