Keith Devon

Menu

Tag: CSS

Full screen background images

I’m putting this here for my own sanity. If I had ¬£1 for every time I’ve tried to solve this issue!

The goal here is to have a background image that covers the whole of the browser window. Ideally we want it to scale, stay centred, and keep it’s correct proportions.

My go-to article on this is Chris Coyier’s Perfect Full Page Background Images. I was trying the “Awesome, Easy, Progressive CSS3 Way”, but was having difficulty on IOS.

A bit more Googling brought me back to CSS-Tricks and to this thread where a solution is posted by k00ka. Here’s the CSS:

html {
background: url('http://placebear.com/1200/800') no-repeat center center fixed;
background-size: cover;
height: 100%;
overflow: hidden;
}

body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}

Proper float clearing

I was browsing through Forrst recently and happened across the following advice on float clearing.

An easy way to properly clear floats without extra markup. If you’re not using some sort of clearfix you probably should be.

.clearself:before,
.clearself:after {
content: " ";
display: block;
height: 0;
overflow: hidden;
}
.clearself:after {clear: both;}
.clearself {zoom: 1;} /* IE < 8 */

This looks like a great way of reducing design related markup in your HTML. What do you think? Have you tried this technique before?

The original post is here.

Drop down menus, z-index and IE

One of Internet Explorer’s (IE) most commonly encountered bug is when using z-index. I experienced this recently when using the DDSlider plugin for WordPress along with a drop down navigation.

Whilst doing some browser testing I noticed that the drop down menu hides behind the DDSlider. I tried to fix this using z-index. I applied positions and z-index to the offending elements but they still did not behave properly.

After Googling the issue I came across this post which explains the problem perfectly. I needed to apply z-indexes to higher level elements that sit side by side in the DOM. In my example I applied a position:relative; z-index:2 to the #header div and a position:relative; z-index:1 to the #main div. Seems to have done the trick perfectly!

Internal Link Layout Issue

I recently came across an unusual problem when using internal links on a WordPress site. The link in question linked from one page on the site to a specific section on another page of the same site. When this link was followed there was an error with the page layout. More accurately, the new page layout was technically correct and the rest of the site was wrong.

I struggled for a while trying to find the source of this problem. I looked at the ‘error’ page in firebug and compared it to a normal page on the site. On all other pages there was a mysterious magin (or padding) created at the top of a div but when this page was visited from the link the margin/padding disappeared.

Long story short, the div in question was set to overflow:hidden. When I commented out that line, the problem resolved itself. Why? I don’t know. Can anyone shed any light on this?

Cufon visited link color fix

I recently had an issue with the color of visited links when using Cufon. More specifically, I am using the WP-Cufon plugin with WordPress.

The issue I had was that the color I set for the link wasn’t being rendered by Cufon. In firebug it showed that the element color was red, but it was showing as the yellow color I had set as the universal link color.

After fiddling about with this for *ages*, I found the fix. I had checked the ‘Delay-Fix’ box in the plug-in; as soon as I un-checked this box the problem was resolved. I now get a small flicker before the Cufon is rendered, but it’s a small price to pay for being able to select the link color!

I hope that this saves someone some time!