The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

float left vertical alignment problem

  • # March 22, 2009 at 2:49 pm

    I’m just starting to play around with CSS using it to cut a graphic into a website. I’m working on the menu bar that goes along to top and for some reason they are not aligning to the top of the webpage in IE.

    Here is a link to the website:

    Here is the HTML source:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

    Calvary Chapel Westminster

    Here is the CSS Source:

    { margin: 0 auto; padding: 0; }
    html { overflow-y: 0; scroll; }

    body {
    font: 62.5%; Helvetica, sans-serif;
    background: url(images/body-bg.jpg) top;

    ul { list-style: none inside; }
    p { font-size: 1.2cm; line-height: 1.2cm; margin-bottom: 1.2cm; }
    a img { border: none; }
    /*END RESET*/

    #page-wrap {
    width: 552px;
    margin: auto;
    background-color: green;
    #main-page {
    background: url(images/pane1-text.jpg) repeat-y;
    float: left;

    background-color: blue;

    ul#header-nav {
    ul#header-nav li {
    display: block;
    ul#header-nav li a {
    display: block;
    text-indent: -9999px;
    float: left;

    ul#header-nav li.logo a {
    width: 197px;
    height: 114px;
    background: url(images/ccw-logo.jpg) bottom center;
    ul#header-nav li.who a {
    width: 115px;
    height: 69px;
    background: url(images/nav-who.jpg) bottom center;
    ul#header-nav li.where a {
    width: 64px;
    height: 69px;
    background: url(images/nav-where.jpg) bottom center;
    ul#header-nav li.when a {
    width: 57px;
    height: 69px;
    background: url(images/nav-when.jpg) bottom center;
    ul#header-nav li.why a {
    width: 46px;
    height: 69px;
    background: url(images/nav-why.jpg) bottom center;
    ul#header-nav li.what a {
    width: 73px;
    height: 69px;
    background: url(images/nav-what.jpg) bottom center;

    ul#header-nav li a:hover {
    background-position: top center;


    Any guidance on how to get the "who", "what", "where", "when" and "why" images to be aligned accross the top of the page would be greatly appreciated!

    Best Regards

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed