Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Feb 2009
    Location
    Los Angeles
    Posts
    41
    Thanks
    2
    Thanked 1 Time in 1 Post

    CSS navigation bar in IE ...Helps!

    I decided to change my navigation bar to straight CSS to clean it up. I'm on Mac and it looks fine in FF and Safari, but i just knew there would be problems when it went to IE for Windows. The layout of the site name and the thin line goes quacky!

    I'm a bit knew to the margins and width/height in CSS, so any help would be great.

    Link: http://www.oldmasterhands.com/banner2.html

    CSS and code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    
        <head>
            <title></title>
    <style type="text/css">
    
    html {
    
    
    body { background: #808080;
    font-family: "Helvetica Neue", Helvetica, sans serif; color: #cccccc; }
    
    .nav{
    width:750px;
    height: 100px;
    border: none;
    text-align: right;
    position: relative;
    left: 250px
    top: 50px;
    padding-left: 25px;
    
    }
    
    .nav ul {
    display: inline;
    float: left;
    list-style: none;
    height: 50px;
    width: 750px;
    margin: 0 0 0 5px;
    padding: 0;
    }
    
    .nav ul li {
    display: inline;
    margin; 0;
    padding: 0;
    float: left;
    vertical-align: bottom;
    }
    
    .nav ul li a, a:visited {
    font-size: 16px;
    font-weight: lighter;
    float: left;
    margin-bottom: 3px;
    width: 125px;
    height: 25px;
    text-decoration: none;
    color: #cccccc;
    display: inline;
    text-align: left;
    position: relative;
    left 200px;
    top: 28px;
    outline: none;
    }
    
    .nav ul li#big {font-weight: bold;
    float: left;
    font-size: 30px;
    margin-left: -4.5em;
    width: 400px;
    height: 100px;
    padding-left: 0;
    padding-right: 40px;
    padding-bottom: 0px;
    line-height: 220%;
    display:inline
    
    }
    
    .nav ul li a:hover {
    color: #ffffff;
    }
    #logo {
    float:left;
    border: 1px solid #cccccc;
    float: left;
    margin-top:15px;
    
    }
    
    #line {
    width: 650px;
    w\idth:650px;
    height: 2px;
    heigh\t: 2px;
    padding: 0;
    margin: 0;
    position: relative;
    left: 80px;
    top: 53px;
    background: #cccccc;
    }
    
    </style>
        </head>
        <body>
    
    <div Class="nav">
    
    <div id="line">
    </div>
    <ul>
    <img id="logo" src="/images/OMH.gif" width=60>
    <li id="big">Old Master Hands</li>
    <li><a href="index.html" "target="_top"> Home</a></li>
    <li><a href="/drawings/drawings.html" target="_top">Drawings</a></li>
    <li><a href="/paintings/paintings.html" target="_top">Paintings</a></li>
    <li><a href="/links/linkspage.html" target="_top">Links</a></li>
    <li><a href="/contact/contact.html" target="_top">Contact</a></li>
    <li><a href="/commission/commission.html" target="_top">Commission</a></li>
    
    
    </div>
        </body>
    </html>
    Nevermind this post. I just validated and realized the errors. Thanks!
    Last edited by mikemacx; 05-29-2009 at 12:40 AM. Reason: I'm just stupid....


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •