CSS Sticky Footers

Posted by Alex in Coding

19

May

Recently I had the need to have a footer which would stick to the bottom of the screen when there wasn’t enough content on screen to keep the footer at the bottom of the page (aka a sticky footer) and rather than break my head over how to achieve this without the use of JS, I decided to do a quick Google Search. Here are some interesting results I’ve come across:

  • Ryan Fiat’s Sticky Footer: Good sticky footer, except one problem. Unless a DIV does not have a height defined, the sticky footer fails to recognize how big the content DIV is and therefore we end up with overlapping DIV’s.
  • CSS Sticky Footer: This sticky footer I’ve ran across before, and now checking it out again, this is a good sticky footer to use. However, the only issue it has is the fact it uses several hacks in order to be compatible with the major browsers it supports.
  • …and Several More: While there are other attempts at figuring out the sticky footer issue, there really is no point to list them since none of them are perfect in terms of cross-browser compatibility.

That being said, I find the CSS Sticky Footer is currently the best way to address the sticky footer issue. While for some, this code’s use of CSS hacks isn’t quite ‘delicate‘, it still does the trick and therefore I recommend anyone who comes across this issue to use the 2009 CSS Sticky Footer. It’ll save you both time and frustration in your coding process.

Popularity: 27% [?]

19

March

Don’t you just love it when you thought you just finished doing a perfect coding job and then go to test it out in Internet Explorer, you find once again that %&$# browser simply does not display what you want it to.

Today is the official day Microsoft released their so-called “final” version of Internet Explorer 8. While I haven’t downloaded it yet, I have used the beta versions and I have to say, even though I have strong opinions about IE, there’s a few features I like about it. No, I don’t mean the InPrivate browsing :D , what I was referring to is the browsers better support of W3C Standards and parsing bugs that have been an annoyance to coders for too long.

I won’t list all the features of Internet Explorer 8, however, as we all know, Wikipedia is our #1 trusted source, so head over to the link below to read all the features of IE8.

http://en.wikipedia.org/wiki/Internet_Explorer_8

Popularity: 51% [?]

I recently came across an issue when implementing an FTP file upload function via CURL. Because my FTP username was ‘alex@mydomain.com’ I had a hard time connecting because the code would think everything after the @ sign was part of the host – which it obviously wasn’t.

Doing a bit of Google searching I found other newbie coders also had this issue, so here is the solution I created if anyone happens to come here from Google:

$ch = curl_init();
$target3 = "C:/www/upload/".$target2;
$fp = f*open($target3, 'r');
$ftpurl = "ftp.servername.com/";
$ftpusr = urlencode("user@mydomain.com");
$ftppass = "mycrazypassword";
curl_setopt($ch, CURLOPT_URL, 'ftp://'.$ftpusr.':'.$ftppass.'@'.$ftpurl.$target3);
curl_setopt($ch, CURLOPT_UPLOAD, 1);
curl_setopt($ch, CURLOPT_INFILE, $fp);
curl_setopt($ch, CURLOPT_INFILESIZE, filesize($target3));

**Note: for the fopen function, I had to list it as f*open because it would not let me post it for some reason.

Popularity: 70% [?]

Every coder who deals with cross-browser compatibility issues probably wants to know the answer to this question, so here it is: Do Websites Need to Look the Same in Every Browser?

Enjoy! :)

Popularity: 16% [?]

I have not upgraded my blog to Wordpress 2.6 yet, but after installing WP 2.6 on some of my clients’ blogs, I had a complaint from one saying that there was no “Insert/Edit Image” button as there is in Wordpress 2.5x. I checked it out and sure enough, that lovely image button was gone. I researched this a bit and found out that whether it is by accident or some specific reason, Wordpress has indeed removed this button.

This creates a problem for those who use custom themes and have upgraded to the 2.6 version. The images don’t align properly!! In order to fix this, the easiest way is to go into the default themes’ stylesheet and find the image and image caption section and copy it into your own stylesheet.

As I have already done this for one blog, the code you need to add to your custom stylesheet is

/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}

img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/* End Images */
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */

That’s it! The “new” and only way to add images is through the “Add Media” bar which is somewhat slow for some and annoying for many, but at least now it will do what you tell it to do. I will be keeping touch on how to add that “Add/Edit Image” button because if I’m going to upgrade to 2.6, it will definitely be a button I will need.

Popularity: 27% [?]