Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issues with IE and Unordered List Elements

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #31543
    Solar
    Member

    I’m having a problem with my unordered list element. When viewed in Mozilla, the element displays fine – horizontally. IE is another issue. The list displays in what I call a cascading effect. Almost like stairsteps. I’ve read other discussions stating that the containing div should be wide enough to hold the ul. In my case the container is 800px wide and the ul is block, with a width of 100px. Seems wide enough to me. After reading every discussion piece I could find and 2 days of trying, I’m seeking some assistance.

    By reading this, you can probably tell that I’m a little “green”. But since I’ve started learning code, I really enjoy it. Nerdy but true. My only hope is that someone will take pity on a poor soul and help me get past this horrible hurdle. So here’s the code:

    HTML


    .style7 {
    font-size: 1em;
    color: #333333;
    }
    .style8 {
    text-align: left;
    font-weight: normal;
    font-size: x-large;
    }
    .style9 {
    font-size: x-large;
    }






    CSS

    * {
    border: 0;
    margin: 0;
    }

    body {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
    background: url(images/top_header.png) repeat-x top #e0d7c0;
    }

    p,li {
    font-size: 1.2em;
    line-height: 1.3em;
    }

    h1 {font-size: 3.3em; margin-bottom: 0.5em;}

    .clear { clear: both; }

    div#page-wrap {
    width: 800px;
    margin: 0 auto;
    }

    div#masthead {
    background-image: url('images/header_image.jpg');
    height: 275px;
    width: 800px;
    margin: 0 auto;
    background-repeat: no-repeat;
    }


    ul#nav {
    list-style: none;
    padding-left: 200px;
    }
    ul#nav li a {
    display: block;
    width: 100px;
    float: left;
    margin-top: 235px;
    color: #8f8f8f;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    }
    ul#nav li a:hover, ul#nav li a:active {
    color: #ffb401;
    }

    Please help me get some of my sanity back.. I thank you in advance.

    #62282
    Sirlon
    Member

    You are floating your anchor elements not your list items.

    remove the float & margin from ul#nav li a and add it to ul#nav li

    #62249
    Solar
    Member

    @ Sirlon.. Thank you for your help. I swear I was going nuts trying to figure this out. Problem solved.. Big Smiles right now…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.