This is our third installment of Ask SM, featuring reader questions about Web design, focusing on HTML, CSS and JavaScript. In this post we'll cover how you can take care of a smooth page scrolling and Internet Explorer 6 bugs. You'll also learn how to aggregate RSS Feeds, how to create dynamic width list images and how to create div-containers of equal height.

If you have a question on HTML, CSS or JavaScript, feel free to reach me (Chris Coyier) using one of these methods:

1. Send your question by email to ask [at] smashingmagazine [dot] com.
2. Post your question in our forum
3. Or, if you have a quick question, just tweet us @smashingmag or @chriscoyier

Please note: I will answer as many questions as I can, but I will certainly not be able to answer them all. I hope that you will use the forums to post questions because that will give you an opportunity to get help from the community as well.

Smooth Page Scrolling

@Mango_Juice writes:

What is the best JavaScript method for a smooth page scroller?

Hey Mango_Juice, jQuery has the ability to do animated scrolling, using its animate function and the "scrollTop" parameter. Karl Swedberg covers this technique on his great website Learning jQuery. The best way to handle it is to set the scroll targets with hash tag links (e.g. #about) on your page. You set your "href" value in the anchor links to "#target", and then that link will jump to the page element on that page with "target" as its ID. This means it will work regardless if JavaScript is enabled or not. For the majority of users, who do have JavaScript enabled, we'll intercept the clicks on those links and scroll down to them (or up), as needed. Here is the code that makes it happen:

$(function(){
    $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
        && location.hostname == this.hostname) {
            var $target = $(this.hash);
            $target = $target.length && $target || $('[name='   this.hash.slice(1)  ']');
            if ($target.length) {
                var targetOffset = $target.offset().top;
                $('html,body').animate({scrollTop: targetOffset}, 1000);
                return false;
            }
        }
    });
});

View Demo | Download Files

Dynamic Width List Images

Giedrius writes:

Is it possible to create a list with CSS that has the text aligned to the right side, but on the left side has an image taking up the width of the remaining space?

Hey Giedrius, when I first read your question, I thought immediately of a recent post on Web Designer Wall, CSS: Menu List Design. Nick La uses some clever positioning techniques to build a flexible text-based list mimicking standard menu design. You know, the kind that has a little dotted line that connects the text on the left to the price on the right. But then as we talked, it was clear you needed something different. Because the image has to have a gradient that isn't horizontally repeatable, we literally need to use an inline image and set its width as needed. CSS alone isn't capable of performing calculations and effecting DOM elements like that, so let's enlist jQuery for the job. First, the completely normal unordered list in HTML:

<ul>
        <li>Lorem ipsum dolor sit</li>
        <li>Aliquam</li>
        <li>Vestibulum auctor dapibus neque</li>
</ul>

The only thing to note is that the length of text in each list item varies significantly. So let's think through what we need to do:

• Measure the full width of the list item.
• Measure the width of the text inside.
• Append the image to each list item.
• Set the width of the image to (full width) - (text width).

Here is how I did it with jQuery:

$(function(){
    $("li")
      .wrapInner("<span></span>")
      .prepend("<img src='images/listimage.png' />");
    var listWidth = $("li").width();
    $("li span").each(function(){
          var itemWidth = $(this).width();
          var imageWidth = listWidth - itemWidth;
          $(this).parent().find("img").width(imageWidth - 10).height(1);
    });
});

View Demo | Download Files

DIVs of Equal Height

Adrian Engelbrecht writes:

How is it possible to have two divs, one with the navigation and one with the content, that always have the same height. Is that possible?

Hey Adrian, there are actually a lot of different ways to do this, but everyone would agree that none of them are as easy as they should be with CSS. 1) Fake it with Faux Columns.
If you just need two divs to look like they are the same height, but not necessarily be the same height, this is the easiest method. You can read about Dan Cederholm's faux-columns method here and see a simple example here. 2) Use Tables or CSS Tables.
Obviously, you know that using tables for layout is bad mojo, but if it gets you out of a tough spot once in a while, the world will forgive you. So rather than using divs, you could bust out table cells to do this, because in the same row they are always the same height. CSS tables are a hot new technique (personally, I still have serious doubts), but they may help as well. Check out this tutorial on NETTUTS. 3) Use Absolute Positioning.
If you know one column is going to be taller than the other, you can use absolute positioning to accomplish this task. Simply wrap both of them in a div with position: relative;. Then have your main column grow to however large it needs to be, pushing the wrapper out. Then absolutely position the other column with both top: 0; and bottom: 0;, and a fixed width along one edge. Dan Rubin has more about this technique here. 4) Use JavaScript.
I generally avoid JavaScript for anything layout-related, but if you aren't worried about that, you could possibly use JavaScript to set equal heights. JavaScript has the power to measure elements, compare and perform calculations and all that other magic necessary to get the job done. Take a look at this jQuery plug-in.

Aggregating RSS Feeds and Implementing Them on a Website

Kyle Steed writes:

Are there any free services that can take RSS feeds from different locations and combine them into one feed that I can use? Then once combined, is it easy enough to implement on a website and style using CSS?

Hey Kyle, yes, there is such a free service. Whenever I need to work with external RSS feeds and integrate them in a website, I turn to SimplePie, which is a brilliant and free PHP class for doing just this. I put together a little demo for you, which smashes together the CSS-Tricks and Smashing Magazine feeds and displays them on a page. View Demo | Download Files

It was pretty easy to do. First I include the SimplePie file on my page and set up the options that I want:

<?php

    //get the simplepie library
    require_once('inc/simplepie.inc');

    //grab the feed
    $feed = new SimplePie();

    $feed->set_feed_url(array(
        'http://feeds2.feedburner.com/CssTricks',
        'http://smashingmagazine.com',
    ));

    //enable caching
    $feed->enable_cache(true);

    //provide the caching folder
    $feed->set_cache_location('cache');

    //set the amount of seconds you want to cache the feed
    $feed->set_cache_duration(1800);

    //init the process
    $feed->init();

    //let simplepie handle the content type (atom, RSS...)
    $feed->handle_content_type();

?>

Now you have an object loaded with RSS goodness. This loop will spit out the feeds in order of date:

<?php foreach ($feed->get_items() as $item): ?>

    <div class="chunk">

        <h4 style="background:url(<?php $feed = $item->get_feed(); echo $feed->get_favicon(); ?>) no-repeat; text-indent: 25px; margin: 0 0 10px;"><a href="<?php echo $item->get_permalink(); ?>"><?php echo $item->get_title(); ?></a></h4>

        <p class="footnote">Source: <a href="<?php $feed = $item->get_feed(); echo $feed->get_permalink(); ?>"><?php $feed = $item->get_feed(); echo $feed->get_title(); ?></a> | <?php echo $item->get_date('j M Y | g:i a T'); ?></p>

    </div>

<?php endforeach; ?>

Clearly, you have everything, both the markup and CSS, to fully control all of these elements now. The SimplePie website has some nice tutorials on it (including screencasts). Refer to the API Reference to find all the stuff you can get out of the object.

Dealing with IE 6

@chrisjlee writes:

Best practice/workflow for designing for IE 6?

Hey Chris, ain't IE 6 fun? It's been a hot topic for a long time now, all of this business about how and what to support. jQuery does a fantastic job of abstracting all of the cross-browser pains for JavaScript, but unfortunately we don't have such magic for CSS. The fact is, we still have to deal with IE 6 when we are creating websites intended to cater to as wide an audience as possible. At work, I think every single major client we have uses IE 6 at their desk. Makes me want to cry some days, but that's just one of the painful parts of our job and we've got to live with it. The more you deal with it, the better you become at avoiding IE 6's common pitfalls and quickly fixing bugs. Here are some of the most common ones. To fix them, never use browser hacks. Hacks simply aren't needed, because you can use conditional comments to serve up special styling just for IE. If you're not comfortable dropping IE 6 support, Simon Clayson has an elegant workaround:

<!--[if !IE]><!-->
<link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" />
<!-- <![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" href="my_gorgeous_layout.css" type="text/css" media="screen" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" href="textonly.css" type="text/css" media="screen" />
<![endif]-->

This will serve up your regular style sheet to all other modern browsers and serve up a special style sheet, starting from scratch, to IE 6. This special "textonly.css" could contain only very basic text styling so that the website is usable but mostly unstyled.

Help us to improve the "Ask SM"-section!

Please feel free to suggest improvements for our "Ask SM"-section. Do you miss something? Would you like to change something? Please let us know in the comments!

(al)