SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    navigation menu doesn't work in IE (was: Can you please help?)

    Below is the link to my site
    http://www.midiprotracks.com

    I have read about hacking but, I am still new at it.
    As you can tell I am a musician and willing to learn about web programming

    The website displays fine on Safary, FireFox and Netscape but, on IE 5.X, 6 and 7, the navigation menu displays in the center of the screen when it suppose to be to the left and the contact form which does not have a style sheet, is all out of proportion.
    Can someone please help me with this issue?

    Your help would be greatly appreciated.

    Thank you
    and have a prosperous New Year

    Here is the CSS code:


    <style type="text/css".

    * {
    margin: 0;
    padding: 0;
    }

    html,body {
    height: 100%
    }



    body {
    margin: 0;
    padding: 0;
    background: #000000;
    text-align: center;
    }




    #top {
    margin: 0 auto;
    width: 900px;
    height: 150px;
    background: url(images/logo.jpg) no-repeat top;
    }

    hr {
    border: 0;
    color: #fffffff;
    background-color: #0099ff;
    height: 3px;
    width: 80%;
    text-align: left;
    }

    table {
    padding-top: 0px;
    padding-bottom: 0px;
    border-color: #b9fffb;
    text-align: center;
    color: #fcffd8
    }

    #box1 {
    position: absolute;
    top: 200px;
    left: 220px;
    width:630px;
    height: 520px;
    background-color: #000000;
    }

    #box2 {
    position: absolute;
    top: 250px;
    left: 300px;
    width: 550px
    }

    p {
    width:100%;
    }



    #navlist {
    color: white;
    background: black;
    border-bottom: none;
    border-right: none;
    padding: 0 5px;
    padding-top: 12px;
    padding-bottom: 350px;
    margin-left: 2px;
    width: 12em;
    font: bold 0.8em Verdana, sans-serif;
    }

    #navlist li {
    list-style: none;
    margin: 0;
    font-size: 1em;
    }

    #navlist a {
    display: block;
    text-decoration: none;
    margin-bottom: 0.0em;
    margin-top: 1em;
    color: white;
    background: #272727;
    border-width: 3px;
    border-style: solid;
    border-color: #5bd #035 #068 #6cf;
    border-left: 3px solid #ccffff;
    padding: 0.25em 0.5em 0.4em 0.75em;
    }



    #bottom {
    clear: both;
    margin: 0 auto;
    width: 900px;
    color: #8FBC8F;
    font: 10px/30px Arial, Helvetica, sans-serif;
    }

    </style>

  2. #2
    reads the ********* Crier silver trophybronze trophy longneck's Avatar
    Join Date
    Feb 2004
    Location
    Tampa, FL (US)
    Posts
    9,854
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    please use descriptive thread titles. i have modified your title accordingly. i've also moved your thread to a more appropriate forum.

    unfortunately, i don't know the answer to your problem. someone more knowledgeable in this area should be along shortly.

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The text-align: center on the body is causing this as IE applies that to block elements incorrectly. The best way of doing this is to float the navigation to the left, and then the content box can be positioned normally (not absolutely) with margins. To get rid of the large gap between menu items in IE6, float the <li>s left and size them 100% width.
    Code:
    body {
    	margin: 0;
    	padding: 0;
    	background: #000000;
    	}
    
    #navlist {
    	color: white;
    	background: black;
    	border-bottom: none;
    	border-right: none;
    	padding: 0 5px;
    	padding-top: 12px;
    	padding-bottom: 350px;
    	margin-left: 2px;
    	width: 12em;
    	font: bold 0.8em Verdana, sans-serif;
    	float: left;
    	}
    
    #navlist li {
    	list-style: none;
    	margin: 0;
    	font-size: 1em;
    	float: left;
    	width: 100%;
    	}
    
    
    
    
    #box1 {
    	margin: 20px 0 0 250px;
    	width:630px;
    	background-color: #000000;
      	}

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by longneck View Post
    please use descriptive thread titles. i have modified your title accordingly. i've also moved your thread to a more appropriate forum.

    unfortunately, i don't know the answer to your problem. someone more knowledgeable in this area should be along shortly.

    Sorry about that longneck.
    I guess I was so frustrated and needed a helping hand that I posted without thinking.

    My apologies.

    To all,
    Have a safe and Happy New Year

  5. #5
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply Centauri.
    I will correct this once I get home in the morning.

    Thank you all for your time invested in reading and posting
    Happy New Year


Bookmarks

Posting Permissions

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