Forums

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

Home Forums CSS Looks good in FF but messed up in IE

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

    Hello all,

    The menu bar looks great in FireFox but it is messed up in IE. Any ideas? The website is http://4oakfantasyfootball.com/.

    Thanks!
    Kendra

    the html:

    Code:

    4OAK Fantasy Football

    4OAK Fantasy Football

    The game that blends fantasy football and poker.

    © All rights reserved. KVR Company 2009

    the css:

    body {
    position:relative;
    margin: auto;
    width:100%;
    height:100%;
    background-color: #986547;
    background-image:url(images/football.jpg);
    body text=”#FFFFFF”;
    padding-top: 10px;
    }

    #container
    {
    width: 1000px;
    line-height: 130%;
    }

    #wrap {
    margin: 10px auto;
    width: 1000px;
    }

    #top h1 {
    background-image:url(images/test1.jpg);
    background-repeat:no-repeat;
    height: 225px;
    clear: both;
    }

    #menu {
    background:#666666 url(images/content.jpg) repeat scroll 0 0;
    height:40px;
    line-height:40px;
    margin-top:-22px;
    padding:0 10px;
    }

    #menu li.home a {
    padding:0 47px 0 40px;
    }
    #menu li.about a {
    padding:0 47px 0 40px;
    }
    #menu li.nfl a {
    padding:0 47px 0 40px;
    }
    #menu li.rules a {
    padding:0 47px 0 40px;
    }
    #menu li.forum a {
    padding:0 47px 0 40px;
    }
    #menu li.register a {
    padding:0 47px 0 40px;
    }
    #menu li.links a {
    padding:0 50px 0 42px;
    }

    #menu li{
    position: relative;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
    font-size: 0px;
    }

    #menu li a{
    background-color:#986547;
    color:yellow;
    display:block;
    font-size:18px;
    line-height:40px;
    padding: 0 40px;
    text-align:center;
    text-decoration:none;
    width:auto;
    }

    #menu ul {
    padding:0;
    }

    #menu ul li ul li a {
    color:yellow;
    display:block;
    font-size:17px;
    line-height:40px;
    padding-right:40px;
    text-align:left;
    text-decoration:none;
    width:10em;
    }

    #menu li a:hover{
    background-color: #8A4117;
    }

    #menu ul ul {
    margin: 0; padding: 10;
    top: 40px;
    position: absolute;
    visibility: hidden;
    }
    #menu ul li.links ul li a {width: 40px;}
    #menu ul li.parent resources ul li a {width: 240px;}

    #menu ul li:hover ul{
    visibility:visible;
    }

    #content {
    background: #666666 url(images/content.jpg) repeat-y;
    color: black;
    padding: 50px;
    }

    #bottom {
    background: #986547 url(images/bottom.jpg) no-repeat;
    padding: 20px 0;
    }

    #footer {
    clear: both;
    margin: 0;
    padding: .5em;
    color: #333;
    background-color: #ddd;
    border-top: 1px solid gray;}

    .clear {
    clear:both;
    }

    #60468
    Rob MacKay
    Participant

    try adding

    width: 995px;
    margin-left: 0px;

    to your #menu ul

    #60475
    kendra69
    Member

    Thank you! That worked.

    Kendra

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