Main content begins here

HTML & CSS

Vertical Centering of Tableless HTML Using CSS and jQuery

Intro: 

I've seen other vertical centering techniques and used them successfully, however those techniques only worked for one object. What if you have a list of objects that need vertical centering? This technique is NOT for vertically centering a page, but individual elements such as list items.

I've seen other vertical text centering techniques and used them successfully in certain situations. There seemed to be other situations where I couldn't get the techniques to work. I figured I'd give jQuery a try and see if I could work it out more easily for a group of objects. For my purposes, creating a list of links, I needed to use a fixed height for the <li>.

Final should look something like this:

So you'll need a list. I was making clickable buttons with backgrounds so my HTML/CSS may have more tags than you'll need. I ended up needing some <span> tags inside the <a> tags, such as:

<div class="vertical1">
<ul>
<li><a href="#"><span>Item 1</span></a></li>
<li><a href="#"><span>Item 2 is a little bit longer</span></a></li>
<li><a href="#"><span>Item 3 is ridiculously long. Hopefully it feels more important now that it has used so much space.</span></a></li>
</ul>
</div>

For CSS, use something like the below. I had needed:
.vertical1 ul,
.vertical1 li    {
    margin: 0;
    padding: 0;
    }
.vertical1 li    {
    background: none;
    height: 135px;
    width: 224px;
    position: relative;
    margin-top: 9px;
    }
.vertical1 a    {
    color: #000;
    height: 135px;
    width: 224px;
    display: block;
    background: none orange;
    border: none;
    }
.vertical1 a:hover    {
    background-position: 0 -135px;
    }
.vertical1 span    {
    position: absolute;
    display: block;
    width: 140px;
    margin-left: 15px;
    line-height: 1.1111em;
    font-size: 12px;
    }

You'll need jQuery. Use something like this:
$(".vertical1 li").each(function () {
       li_height = $(this).height();
       span_height = $(this).find("span").height();
       halfway = (li_height/2) - (span_height/2);
       $(this).find("span").css("top", halfway);
    });

Blog terms:

Style Unordered List of Links or Menu with CSS Divider

Intro: 

Find out how to code a list of links appropriately then if needed add a divider with CSS.

In this article we'll discuss creating an unordered list of menu links with a pipe in between, which is an oft-used styling for navigation, particularly in the footer of a site. Of course, feel free to use whatever divider you'd like instead of a pipe, however just know that if you want pure CSS with no image used for the divider, you can only use straight lines and dotted/dashed lines. So for example if you wanted to use the colon symbol (:) for your divider you'd need an image unless you wanted to try the not-so-well-supported :after trick.

I still often see folks coding lists of links with no ul/li structure. Usually they just do something like:
<a href="#">link 1</a> | <a href="#">link 2</a> |<a href="#">link 3</a>

Proper Unordered List Styling

Lists of menu links should always be in list format, because its a list. So it should remain UL/LI format like so:

<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>

In your CSS, apply a background "pipe" image to every LI at the far left and add left padding. Then try a declaration such as: li:first-child {background:none; padding-left:0;} (your real code may vary of course since if you want to target this specific list you will need other classes involved.) This should work in FireFox and IE7/8. Other browsers such as IE6 may require jQuery or other workarounds to listen to the ":first-child" part of the declaration. Your CSS would look something like this:

ul, li { margin: 0; padding: 0; }
li { padding: 0 5px 0 9px; background: url(pipe.gif) 0 .3em no-repeat; list-style-type: none; display: inline; }

UL/LI List CSS Styling Help

You can also do the border-left way suggested above. I offered the pipe option because from years of creating sites I know that often designers do not want the pipe to be the exact height of the list item. This would often lead to extraneous spans just to get the pipe to be the "right" height that the designer wanted (and the client approved). Although a background pipe doesn't scale if the font is resized, it will keep the designers and the clients happy that you "coded it right". If you or your clients aren't picky, the border option is easier and scalable.

On a final note: doing lists this way, as inline, can lead to spacing issues because not all of the space between to items is abolished in this situation. Notice the padding declaration above is uneven (padding: 0 5px 0 9px). To get rid of all the space you'll need to float the <li> instead of changing them to inline. Then you'll need to clear the containing <ul>.

Designing & Coding CSS Special Effects

Intro: 

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

Using CSS for special effects has gotten easier with better browser support for CSS and PNG graphics. Although still painful in IE6, these changes have made special effects more fun to use. Using them requires a little planning though.

If you're a true designer for the web you know that web design is not all about a pretty face for a web site. It's about planning. Planning for a user's reactions, planning for content to grow, and on it goes. So in this article we'll talk a bit about planning for and executing special effects. I'll use some real-life examples from sites I've worked on.

Special CSS Effects Using PNGs For Transparency

First up is the Reston Virginia Pet Fiesta. That's right, a party for your pets! In this design I was given a logo, so I based the design on some colours used in the logo, plus the whole fiesta vibe. The background is a sort of stucco feel but that's a fairly mundane repeating background. The special part is the jagged red line between the header and body content, echoing the jagged red line from the hat which the logo animals are wearing.

The first step here was knowing I needed something to dress up the design and to help marry the header with the body content area. Like The Dude's rug in The Big Lebowski, I needed something to tie the room together. I figured a big jagged line echoing the hat would be nice. The problems that went through my head were:

  • do i want to have to cut all those images for where the jagged line overlaps the header and body and left/right columns
  • how will i be able to get this to work with the flash piece that is supposed to show at the top of the body area?

What I decided was that I needed one graphic that had transparency. This way I would not have to cut a bunch of graphics but could instead cut one image that I could layer on top of the design. A GIF was ruled out because I didn't want to have to fuss with getting the jagged line placed EXACTLY right so the edges all matched the various colours it was overlapping, and additionally it probably wouldn't have looked good overlapping the Flash piece. The answer was to use a PNG.

Using PNG and CSS to Achieve Special Effects

Using a PNG meant now I was opening another can of worms because IE6 doesn't support PNG. In order to use them you have to use something like JQuery with PNGFix. This was OK with me because from the beginning I was planning to use JQuery, knowing the shadowed edges of the design would need PNG-power as well.

I went into Illustrator and used a brush to create a fat, irregular-edged but straight line. I then used a filter to make the line jag up and down. I then pasted this as a smart object into Photoshop. Since it remained a vector shape I could resize it without loss of clarity until it looked right in the design. Then I saved out just this jagged line as a PNG.

I created a <div> at the bottom of the HTML template for this design, using CSS to size the div. I placed the jagged line PNG inside the div, then used CSS to position the jag up in the header, overlapping the other design elements including the flash piece. Once the flash was saved out with a transparent background and the wmode was set for its embedding, the jag appears to overlap the flash piece.

2
 

Comments

Say "No" To Multiple Style Sheets

Intro: 

So, I've had enough of the multiple style sheet thing. Actually, I had enough of it when I first heard of it, years ago when it was touted as "the right way" to go about setting up CSS. The premise is this: use one style sheet to set all elements of a browser back to ground zero, often called a "reset" style sheet; use one style sheet for fonts; use one style sheet for colors; use one for other stuff like layout.

UPDATE: January 31, 2010... This article makes reference to the fact I previously needed to use additional style sheets to target certain browsers such as Safari or IE6. I no longer use even these additional style sheets. Instead I use the CSS Browser Selector javascript that allows me to target browsers inside my single CSS stylesheet.

So, I've had enough of the multiple style sheet thing. Actually, I had enough of it when I first heard of it, years ago when it was touted as "the right way" to go about setting up CSS. The premise is this: use one style sheet to set all elements of a browser back to ground zero, often called a "reset" style sheet; use one style sheet for fonts; use one style sheet for colors; use one for other stuff like layout.

Wow, what a pain in the ass. And I mean that from a couple viewpoints -- from having to set it up, to having to maintain it as the original coder, to having to update it as the non-original coder.

When it comes to CSS I do try to do things "the right way" because I realize in the long run some extra work or setup, etc, pays off later. For example a web site doesn't have to be "valid HTML" to run just fine in browsers. Even cross-browser sites don't necessarily "need" to be valid. We do it because it helps down the line in other ways, and because we care about doing things well as an HTML professional.

But this whole multiple style sheet issue is ridiculous. I've worked on projects where "lead" coders have demanded I work a certain way, which I honor because I've accepted the role as subordinate and its therefore a request of my client. I've seen articles from highly respected sites in the industry about multiple style sheets. But I just don't buy it.

Why So Cranky About Multiple Style Sheets?

My reasons are pretty simple. I've been on the side of the person creating those style sheets, and I've been the person who had to edit those style sheets created by others (and even created by me), and I can't possibly fathom how all those style sheets add up to a savings in time. I see strong production value and savings in time and money in using as few style sheets as possible because very simply, it is easier to track down a style to make a change if its all in one style (or as much as possible in one sheet). Multiple style sheets means knowing or searching multiple files for what might be the style you're looking to update. Big waste of time.
I've heard some of the arguments and I just can't agree. It hasn't proven to be a production value to me.

There are times when I HAVE to use separate sheets because I know of no other way to acheive certain goals, such as targeting Safari. In those cases I do have to have separate style sheets.

For your info, although the Way Cool Web Design site does NOT support IE6, you can target certain version of IE by using IE conditional comment like this:
<!--[if IE 6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->

You can also target Safari by using a malformed style sheet call:
<link type="text/nonsense" rel="stylesheet" href="safari.css" media="all">

The above situations are the some of the only times I use multiple style sheets. So, are you buying into the hype of using multiple style sheets?

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 2

Intro: 

In the land of blind Drupal people, the one-eyed man is Drupal King. I don't know what this means, except now you will know how to theme Drupal 5 so you no longer have to suffer through others' freebie themes. Make your own awesome themes!

In Theming Drupal, Part 1 we talked about some of the basics of the Drupal theme, getting started with your design, code, and the initial steps to creating the theme. Now, as Young MC might say, its time to bust a move.

Your first ally in real theming is the template.php file. This is the place where you override (theme) Drupal's core while maintaining the virgin-freshness of the core itself. If your theme doesn't have a template.php file, add one now. If you're adding one, just add an empty file.

Theming Drupal Regions: Ad, Delete, Mix and Match - More Fun Than Garanimals!

The first thing to notice inside template.php is the regions function: "function themename_regions()". If you don't have this function because you're starting with an empty file, add it now (Garland doesn't have it). It looks something like this:

function mythemename_regions()
{
return array(
"sidebar_left"=>t("left sidebar"),
"sidebar_right"=>t("right sidebar"),
"content"=>t("content area"),
"header"=>t("site header"),
"footer_message"=>t("site footer")
);
}

The regions function allows you to add regions to your design. Be sure each theme's region function is named appropriately. For example in our example from Part 1 the theme is called "my_theme" so the function name will be "function my_theme_regions()".

An example of adding a new region to your theme is, say on the home page you wanted to have a rotating promo. Create a new variable name such as $promo then insert this variable into your page.tpl file like you do any other Drupal snippet such as $content or $sidebar_left. Then in your region function add a new line so we can make the region appear in your blocks for that theme:
"promo"=>t("home page rotating promo")

Creating a Drupal Content Type

Now you'll need to create a new "content type" in Drupal for your home page called "Promo". To do this go to "administer > content management > content types" and choose "add content type". This will be where we store our promos from which we will randomly draw one for display on the home page. Once you create the content type, create a couple dummy promos so you can see this in action when we're done.

Next go to Views and add a Block List View of 1 called "promo_view" with the field of Node:Body, a filter of Published:Yes & Node:Type->"promo", and Sort Criteria: Random. Next visit Blocks where we tell our theme we want the "promo_view" to be placed inside our "promo" region. Shazzam! You have rotating promos. Ain't life grand?

Now I will touch on more customization that I half-promised back in Part 1. It's more template.php magic. That's not magic as in Merlin, it's magic as in Penn & Teller in that I'm gonna show you how it's done. Sort of...

Getting Control of the Drupal Navigation

The default Drupal nav was pretty uninspiring to me at first, back when the only way I knew how to accomplish tasks was hacking core. Naughty, naughty. Now I've learned a few things and I'd like to share them because it is frustrating to a lot of people. That is namely dealing with some navigation customization. Things like adding a selected state to a list item instead of the anchor, adding a span INSIDE the anchor, and enabling a way to allow for using images in the navigation.

I'm not really an intensely learned PHP guy. I can understand most of what's going on and can usually edit existing PHP to achieve a desired outcome, though it may not be the most efficient way, so your mileage may vary, but here is the function I use to spice up my Drupal menus:

function phptemplate_menu_item($mid, $children = '', $leaf = TRUE, $extraclass = '') {
if (menu_get_active_nontask_item() == $mid) {
$class_active = ' selected';
}

if ((menu_in_active_trail($mid)==1)) {
$active_section = ' selectedSection';
}

if($mid) {$mid_id='item'.$mid;}
if($children) {$hasChild=' hasChild';}
else {$hasChild='';}

return $thing.'<li class="'. $mid_id . $active_section . $class_active . $hasChild . ($leaf ? '' : ($children ? ' expanded' : ' collapsed')) . ($extraclass ? ' ' . $extraclass : '') . '">'. menu_item_link($mid, TRUE, $extraclass) . $children . "</li>\n";
}

The above makes a list item (not its anchor) have a "selected" class when active, and its parent will have addionally a "selectedSection" class. This is helpful when you want to control what sections are open/closed using CSS in a menu.

The above also adds an "item#" class such as "item69" to a nav item. People often use an id for this instead of a class but I often have to generate menu items or parts of the menu several times on a page, and muliiple ID usage is improper HTML, so use a class. This is useful if you want to use images for your nav items because you can target specific list items.

The above also adds a "hasChild" class so you can do things such as using an arrow bullet in your nav to indicate which sections have children. You can see this in use on this site by rolling over "Projects" in the main nav to see an arrow indicating that "Industries" has child nodes.

In Part 3 of this series I will continue discussing some template.php magic. Be sure to tune in next time, same Bat Time, same Bat Channel...

Theming Drupal 5.x, or, How To Thumb-Wrestle Drupal 5 Into Submission and Lay It Low At Your Mighty Feet, Part 1

Intro: 

Here it is, better late than never. How to theme Drupal 5. Get your ya-yas out and party like its 1999! I mean, stop using crummy themes that make your site "look like a Drupal site". Get your act together and make your sites look awesome!

This will be as short and sweet as I can make it while covering the entire theme development from concept to launch, with occasional pitstops for my bad humour... Whew, what an undertaking!

Web Design, The First Step to Theming Drupal

Example of using Photoshop guides in a design

Start with a design in Photoshop. Stop using Illustrator to design web sites. Stop using Fireworks or ImageReady to cut them. For goodness's sake, if you're a designer, then be one for real. Use Photoshop. Use vector shapes and guides to cleanly define areas using a grid to setup the design. It doesn't have to be perfect but if you're making your own design then it should at least be good, otherwise you may as well go grab a free theme somewhere and save yourself some time.

Do not use images for navigation unless you are prepared to constantly edit them yourself, meaning if this job is for a client, get off your designer's high horse and use text for navigation. Its irresponsible to use images for nav when YOU won't have to maintain it, just because you think it looks pretty. Keep the client in mind. Use text.

Coding Your Drupal Theme

Code a HTML/CSS tableless template by hand. Do not use an app to export it. Just look at the darn design and visualize the rows and columns you'll need. A header is usually one row (div set), the nav might be another, the body content another, and then a footer, generally speaking. Within the rows are columns, each column is another div set. For example often the body content area has columns, in the case of this site there are 3; the left column for navigation/quotes, the center for body content, and the right column for callouts. You will define a width for these columns, then float them all left and then clear the floats afterward. If all this is mundane to you and you want a new challenge try coding so that your page content is at the top of your HTML.

I've really plowed through the design and code portion of creating a theme because the main topic of this post is the Drupal aspect, theming Drupal, and not really the creation of a design/HTML template. If you need more in depth info on those aspects I may have other articles later, or again, save yourself some trouble and pick up a free theme somewhere.

Once you have the HTML template code complete (with some dummy content in place) or have purchased a plain HTML theme elsewhere, and have tested it in FireFox, IE6 (hopefully dead soon), IE7 and Safari, you'll need to create your own theme folder. To start it may be easier to just duplicate the garland theme, then rename the folder whatever you want (hint: if you plan to have spaces in the name it is best to use underscores instead). For now let's assume your folder has been renamed "my_theme". Inside /themes/my_theme/page.tpl.php is where most of the work goes into creating a theme. If you don't know what the page.tpl.php file is, again, check into an existing Drupal theme such as Garland to see an example of the file.

The Drupal Guts Switcheroo

Next is swapping out your pieces of code for Drupal's guts. When I am creating a new theme I usually paste the entire new HTML code ahead of the old code of an existing page.tpl.php file. This makes the copying/pasting of the Drupal guts easier... Be careful to copy/paste all the region variables you'll need to ensure a smooth transition. If you see PHP in the old theme's code, it probably belongs in the new theme but you will have to learn over time exactly what you can add/keep/discard.

I'm not going through the whole list of region swaps you'll need to make but an example would be, cutting out the body content area of your HTML code and adding Drupal's <?php print $content ?> snippet. Another example is, deleting the code for what should be the left column content of your HTML template then inserting Drupal's <?php if($sidebar_left) {print $sidebar_left;} ?> region snippet.

When working on this part of the process, you'll have to consider your client's needs. Generally for my projects, clients don't need every bell and whistle. For example how often will a client change their logo? Nearly never is the answer in my case, so I don't usually use Drupal's $logo variable. Same with the mission statement ($mission variable) since most of the time designs incorporate the mission statement as a part of the logo. But you be the judge of what works best for you.

More In-Depth Drupal Theming Tips

We've covered the basics. Now it's time for the nitty-gritty...

Your theme should be well inside the ballpark now, with Drupal trying to generate its Drupally system bits in the right places, however now the devil is in the details. At this point Drupal will be inserting content in the right place in your theme, the $content variable, and even though it may be trying to insert left-column stuff in the $sidebar_left region variable, you may not have told Drupal what it is exactly that you want in that area. This is where blocks come into play.

In "administer > site building > blocks" you will see any themes that are registering with Drupal, such as garland and minelli. As long as your new theme has been enabled in "administer > site building > themes" you should see it in the blocks area. Clicking the name of your theme will allow you to instruct Drupal what content should appear in which region (the variables you just added to your new theme) Now you can control what shows in the various regions of your page, the header, left and right columns, and footer. For example if you need a copyright statement in the footer, as long as you have swapped the $footer_message into your new theme, all you need to do is add a new block called, say, "my copyright", add the copyright statement into this new block, then in the "my_theme" theme tell this new block to reside in the footer by choosing "footer" from the dropdown.

This ia a pretty simple way to get a quick site created in Drupal. The thing is... people always want to customize. They want this and that coded exactly this and that way. This leads to the need for more control over what Drupal is exporting and where it is exporting it.

For example, what if we need our main navigation to render a bit differently, say with a span tag inside the anchor, or a div surrounding each ul for special effects? What if we are creating a site for ourselves and we DO want to use images in the navigation because we know we can update the images ourselves if needed? What if we want a view to sometimes render items as a list that DOES use a proper list format (unordered or ordered) and in other cases we want a list of items that are NOT inside a list structure?

All these questions and more might be answered in Part 2, or possibly Part 3, or the way I'm rambling it could be in Part 12, after this commercial break!

Improve Search Engine Optimization (SEO) By Coding Page Content At The Top Of Your HTML

Intro: 

Way Cool Web Design teaches you the secret of how to improve search engine optimization by coding page content at the top of your HTML.

While I haven't personally found any proof that keeping content as close to the top of your code as possible can improve SEO, I have seen a few articles attesting to its merit. It is a commonly held believe that the technique can improve SEO.

Improve Your Search Engine Optimization Through Good Code

There is this article as an example of the belief, again without actual proof. There are examples of top-ranking sites for tough keywords like "lingerie" which bring you to a top site, Pampered Passions. If you examine the source of this lingerie site you'll see the <h1> right at the top which is the start of this page's content. Notice its not buried halfway down the page like most sites that have navigation, search, logos, etc all in the header that comes visually before body content for most sites.

If you view source on the Way Cool Web Design site you'll see something similar. The <h1> is very near the top of the code while visually the layout suggests there should be a header with navigation, search and logo above the content.

Some immediate difference on the Way Cool site is "top of page" and "skipnav" anchors. The top of page anchor is one I find a lot of people use so I build it into every template I create so that in the event someone needs it they don't have to be concerned with going back to a template to add it into an entire site. The skipnav is also built into every template, although in the case of this site specifically we don't actually need a skipnav because we've put all the nav at the bottom of the code and so there is no nav to skip in order to get to content.

So, why not build every template this way? Well, it makes for some heavy duty browser testing - it's a challenging technique. Most clients just don't want to pay for all the extra time it takes to get it perfect just what is not a proven benefit. Those that are concerned about SEO however are often interested to learn more, and some are willing to go that extra mile with their budget.

Coding Middle Column Body Content At The Top Of Your HTML

Let's assume in a 3-column layout like this site, you have subnavigation to the left, body content in the middle, and callouts in the right column. A few years ago I may have code this as LEFT, RIGHT, MIDDLE, with LEFT and RIGHT being floated arounf the MIDDLE which has margins on the left and right. But this doesn't help our cause since it makes MIDDLE come last in the HTML. We want MIDDLE to be first.

The way I normally code columns these days is LEFT, MIDDLE, RIGHT all floated left since that is, theoretically speaking, "correct" from a top-to-bottom, left-to-right coding standpoint. I code templates this way since that is a common solution for accessibility purposes - code appears in the HTML as we would view it on-screen top/bottom, left/right.

To achieve the middle column at the top we need some CSS tricks. Code it MIDDLE, LEFT, RIGHT. First float MIDDLE to the right and LEFT to the left, with those two columns in "Container A". Then inside "Container B" float "Container A" to the left with RIGHT floated to the right. Container B now holds MIDDLE, LEFT, RIGHT. Push Container B down with a margin to make room for the header. After Container B, code the header info, position it absolutely and make it appear at the top on-screen.

1
 

Comments

css Zen Garden - Pseudo Sahara

Intro: 

Way back in the day, @2002, like many web monkeys I was salivating over css Zen Garden and the possibilities of CSS. It opened something in my brain. Although the visions of loveliness I had back then haven't quite come to fruition, it definitely changed my path from simple design and table-based HTML layout to a focus on tableless CSS-based designs.

Way back in the day, @2002, like many web monkeys I was salivating over css Zen Garden and the possibilities of CSS. It opened something in my brain. Although the visions of loveliness I had back then haven't quite come to fruition, it definitely changed my path from simple design and table-based HTML layout to a focus on tableless CSS-based designs.

Pseudo Sahara, a css Zen Garden theme by John Barrick

I was inspired to try my hand at a Zen Garden theme. While the company I worked for at the time liked my enthusiasm and thought the Garden was pretty nifty, I think I was the only one who relished the implications. So I set off in the evenings working on polishing my skills and developing a theme I could submit to the Garden.

I ended up with "Pseudo Sahara" by John Barrick, accepted as css Zen Garden theme #13. I seem to recall receiving a notice from cssZenGarden.com that the theme also ended up in a css Zen Garden book but I haven't seen it so I can't verify.

I've received emails from people about the design; can we use it, do you know it has scrollbars in XYZ browser, etc. Sure, you can use it, and yes, I see in some browsers there are flaws. I made it @2002. But before you do use it just know it is called "Pseudo Sahara" for a reason... the faded script writing is actually a Tolkien font, elvish I think, but it looked Arabic to me and I thought it'd be kinda funny to use it. If I recall, the script at the top says something like, "Doesn't this fancy script make the text look important?" and the larger script underneath "the beauty of css design," says "CSS".

Blog terms:
1
 

Comments

Background Image Resize

Intro: 

Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgeable than myself (which could be about anyone at this point), replied the topic has been brought up before and no one found a solution. That often makes me want to give it a shot myself because I am a glutton for failure.

UPDATE: March 6, 2009... This works in IE7! Woot!

Someone asked the other day if anyone knew how to make a resizable background image. Another person, far more knowledgeable than myself (which could be about anyone at this point), replied the topic has been brought up before and no one found a solution. That often makes me want to give it a shot myself because I am a glutton for failure.

Picasso, Super-Sized

As someone else had pointed out, we’ll be getting “background-size” in CSS3 which I believe will be widely supported sometime in the year 2030. That means I couldn’t help but fail. So I dove right in. I wanted to go ahead and get my failure over with quickly.

As is often the case in this situation, I too failed to find a “real” solution to this problem. But as is sometimes the case, I found a really cheesy, down and dirty way to get around the issue, partially. Really, it’s just half-assed parlor tricks but maybe it’ll help you if you’re the cheesy, down and dirty type as well. I got tired of trying to figure out how to get it to work fully in IE so anyone that wants to offer a solution to that, feel free.

Cheese, By The Slice

So this won’t work for the vast majority of regular Joe users out there but it will work for about half of you since many viewers of this site are Mozilla users. IE users, it works but only to a degree... the slight of hand breaks down quickly.

This basically involves just slapping a DIV with content on top of another DIV that contains an image, essentially making that second DIV into a background. You use "em" for height and width of the image. Mozilla viewers will see in “Resize Image Background” that the text stays in the middle of the pizza when you change text sizes (oh, yeah, and the background gets bigger too). While IE viewers start out in the middle of the pizza obediently, they soon become unruly and their text moves up or down depending on the size. Even though the text position was not really my objective it seems like there should be an answer to this. My head hurts though, so I am stopping for now.

The CSS Sticky Footer

Intro: 

I see this request floating around a lot — the sticky footer. “How can I make a footer stick to the bottom of the screen and always remain on screen?”

The Stinky Footer. Ummm... I Meant ‘Sticky’ Footer.

I see this request floating around a lot — the sticky footer. “How can I make a footer stick to the bottom of the screen and always remain on screen?”

Sticky Footer Is Child’s Play

The sticky footer turned out to be pretty simple — by that I mean I found the parts to the solution quickly on the Internet, of course! I like figuring out problems on my own but I don’t try very hard at first. Chances are, someone else has done the thinking. So I found someone on the Internet who’d done bascially done the hard part, they just couldn’t get it to be cross-browser, and of course it didn't validate. So as with most people’s code (whether they like to admit or not), this is cobbled together from other sources though I don’t remember exactly whom. Sorry.

You can see the basic solution to the sticky footer but this version doesn‘t validate because of some of the code needed. Basically you just create a margin at the bottom of the screen and then “position: fixed” a footer into it that is as tall as the margin. Of course IE falters.

Sticky Footer, Extra Toe Cheese

So, to the rescue, we have the Deluxe Model Solution to the Sticky Footer or “Sticky Footer, Extra Sharp Toe Cheese” I like to call it. Either way you cut the cheese — I mean slice it — someone’s going to balk at this code so we may as well cover the caveats right away. This version validates in Transitional but it requires some creepy IE Fandango in the HTML. We have to basically pull offending CSS code out of the CSS file and put it in the HEAD inside some tags that only only IE pays attention to. This is solely so you can say, "hey, it validates." So, not the best solution I guess, but it covers the bases that interest me. Hope this helps you with your stinky footer!

Absolutely awesome job John!!! They're going to love all of these [logo designs]. The only problem I see is that they can only pick one of them!
L. H., New Media Consultant

Let Us Help You

Copyright ©2001-2017 Way Cool Web Design LLC. All Rights Reserved.