Grow your CSS skills. Land your dream job.

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:
    http://uk.geocities.com/bradnjones/Index.html

    Here is the HTML source:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




    Here is the CSS Source:

    Code:
    /*RESET & BASIC PAGE SETUP*/
    { 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*/

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

    #main-header{
    background-color: blue;
    }

    ul#header-nav {
    margin-left:-40px;
    }
    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;
    }

    /*END STRUCTURE */

    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.

*May or may not contain any actual "CSS" or "Tricks".