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 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    57
    Thanks
    1
    Thanked 0 Times in 0 Posts

    menu positioning to the right in IE

    Hi,

    I have a vertical menu that is positioning to the right instead of centre in IE, does anyone know how I can fix this ?

    Thanks for any help.

    webdiv


    Code:
    #navcontainer { 
    position: relative;
    margin-left: 220px;
    top: 10px;
    margin-bottom: 30px;
    }
    
    #navcontainer li{
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    #navcontainer a{
    font-size: 1.1em;
    margin-bottom: 2px;
    color: #A57E5F;
    display: block;
    padding-top: 5px;
    padding-bottom:5px;
    width: 200px;
    background-color: #D5D0BA;
    border:solid 1px;
    text-decoration: none;
    text-align: center;
    }
    
    #navcontainer a:link, .navlist a:visited
    {
    text-decoration: none;
    }
    
    #navcontainer a:hover
    {
    background-color: #D5CCA3;
    color: maroon;
    }


    Code:
    <div id="navcontainer"> 
        <ul id="navlist">
          <li><a href="mp3/uilleann.mp3" title="Uilleann Pipes in 'D'" />Uilleann 
            Pipes in 'D'</a></li>
          <li><a href="mp3/scotsa.mp3" title="Scottish Smallpipes in 'A'" />Scottish 
            Smallpipes in 'A'</a></li>
          <li><a href="mp3/scotsb.mp3" title="Scottish Smallpipes in 'Bb'" />Scottish 
            Smallpipes in 'Bb'</a></li>
          <li><a href="mp3/scotsd.mp3" title="Scottish Smallpipes in 'D'" />Scottish 
            Smallpipes in 'D'</a></li>
        </ul>
      </div>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Markup, styles

    It would help if you would tell the whole story instead of just snippets; from what you've given there's no reason to assume the the #navcontainer div would be either right or center. It must therefore be something outside this.

    Please provide the full markup and styles, preferably as an online (test) page so people can view it in a browser.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    57
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi Ronald,

    Thank you for your willingness to help.

    I have posted a test page at the following url, and all of the code is below;

    http://www.raysloan.com/copy%20of%20sounds.html


    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <ti<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    tle>Sound Samples</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="header">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="Uilleann.html">Uilleann Pipes</a></li>
    	  <li><a href="Smallpipes.html">Scottish Smallpipes</a></li>
          <li id="current"><a href="Sounds.html">Sound Samples</a></li>
    	  <li><a href="cd.html">Buy my CD</a></li>
          <li><a href="Bellows.html">Bellows</a></li>
    	  <li><a href="Survival.html">Smallpipes Survival Guide</a></li>
          <li><a href="Prices.html">Prices</a></li>
    	  <li><a href="Links.html">Links</a></li>
    	  </ul>
      </div>
    <div id="pageheader"> 
      <h1>Sound Samples</h1>
      <h2>Scottish Smallpipes & Uilleann Pipes</h2>
      <p class="contact"><a href="mailto:ray@raysloan.com">Contact me</a></p>
      </div>
      
    <div id="container"> 
      <p>Sounds on this page are in MP3 format.</p>
      <p>Each sound file takes between 2 and 5 minutes to download depending upon 
        modem and network speeds</p>
      <div id="navcontainer"> 
        <ul id="navlist">
          <li><a href="mp3/uilleann.mp3" title="Uilleann Pipes in 'D'" />Uilleann 
            Pipes in 'D'</a></li>
          <li><a href="mp3/scotsa.mp3" title="Scottish Smallpipes in 'A'" />Scottish 
            Smallpipes in 'A'</a></li>
          <li><a href="mp3/scotsb.mp3" title="Scottish Smallpipes in 'Bb'" />Scottish 
            Smallpipes in 'Bb'</a></li>
          <li><a href="mp3/scotsd.mp3" title="Scottish Smallpipes in 'D'" />Scottish 
            Smallpipes in 'D'</a></li>
        </ul>
      </div>
      <p class="contact"><a href="mailto:ray@raysloan.com">Pipemaking holidays in the SW of France</a></p>
    </div>
      </body>
    </html>


    Code:
     body {
          background:#D5D0BA;
          margin:0;
          padding:0;
          color:#000;
          font:x-small/1.5em Georgia,Serif;
          voice-family: "\"}\""; voice-family:inherit;
          font-size:small;
          } html>body {font-size:small;}
        
    	
        #header {
          float:left;
          width:100%;
          background:#DAE0D2 url("img/bg.gif") repeat-x bottom;
          font-size:93%;
          line-height:normal;
    	  margin-bottom: 30px;
    	  }
    	  
    	 
        #header ul {
          margin:0;
          padding:30px 10px 0 50px;
          list-style:none;
          }
        #header li {
          float:left;
          background:url("img/left.gif") no-repeat left top;
          margin:0;
          padding:0 0 0 9px;
          }
        #header a {
          display:block;
          background:url("img/right.gif") no-repeat right top;
          padding:5px 15px 4px 6px;
          text-decoration:none;
          font-weight:normal;
          color:#503D36;
          }
        #header a:hover {
          color:gray;
          }
        #header #current {
          background-image:url("img/left.gif");
          }
        #header #current a {
    	  font-weight:bold;
          background-image:url("img/right.gif");
          color:maroon;
          padding-bottom:6px;
          }
    	  
    	  
    	  /*index starts */
    #pageheader {
    clear: left;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1px;
    padding-left: 1px;
    padding-right: 1px;
    color:#A57E5F;
    background-color:#DDD9C5;
    border: solid 1px;
    text-align: center;
    }
    
    #pageheader h1{
    text-align: center;
    font-size: 1.9em;
    }
    
    #pageheader h2{
    text-align: center;
    margin-top: 5px;
    font-size: 1em;
    }
    
    .contact a{
    text-decoration: none;
    color: maroon;
    align: center;
    }
    
    .contact p {
    
    }
    
    .contact a:hover{
    background-color: #D5CCA3;
    border: solid 1px;
    padding: 5px;
     }
     
    #container {
    width: 750px;
    color:#A57E5F;
    background-color:#DDD9C5;
    margin-top: 9px;
    margin-right: auto;
    margin-left: auto; 
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border: solid 1px;
    text-align: center;
    }
    
    
    #container a{
    text-decoration: none;
    color: maroon;
    padding: 5px;
    }
    
    #container a:hover{
    background-color: #D5CCA3;
    border: solid 1px;
     }
    
    #container h3{
    text-align: center;
    }
    
    #container h3 a{
    text-decoration: none;
    color: maroon;
    }
    
    #container h3 a:hover{
    background-color: #D5CCA3;
    border: solid 1px;
     }
     
     #illustration img {
    position: relative;
    padding-top: 5px;
    border-style: none;
    }
    	  
    
    
    #indexfooter {
    text-align: center;
    Margin: 0px;
    padding: 0px;
    }
    
    #indexfooter img{
    position: absolute;
    top: 530px;
    left: 120px;
    border-style: none;
    }
    
    #indexfooter a{
    text-decoration: none;
    }
    
      /*CDStarts*/
      
      #cdcontainer {
    width: 800px;
    color:#A57E5F;
    background-color:#DDD9C5;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 20px; 
    padding: 20px 20px 10px 20px;
    border: solid 1px;
    }
      
    #cdcontainer img{
    float:left;
    margin-top: 15px;
    margin-right: 20px;
    }
    
    #cdcontainer a{
    text-decoration: none;
    color: maroon;
    margin-left: 300px;
    padding: 5px;
    }
    
    #cdcontainer a:hover{
    background-color: #D5CCA3;
    border: solid 1px;
    
     }	  
    	  /*Survival Guide Starts*/
    
    #survivalcontainer {
    clear: left;
    color: #A57E5F;
    width: 800px;
    margin-left: 100px; 
    padding: 1px 20px 20px 20px;
    background-color:#D5D0BA;
    }
    
    #pagename {
    width: 600px;
    border-right: 1px solid;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    background-color:#DDD9C5;
    }
    
    #survivalcontent {
    border: solid 1px;
    background:#DDD9C5;
    padding: 0px 20px 20px 20px ;
    background-color:#DDD9C5;
    }
    
    #survivalcontent img {
    float: left;
    margin-top: 10px;
    margin-right: 20px;
    margin-left: 5px;
    }
    
    #adobe{
    position: absolute;
    top: 120px;
    left: 800px;
    }
    
    
    /*start Bellows page*/
    
    
    #bellone {
    position: relative;
    top: 25px;
    margin-bottom: 50px;
    }
    
    /*finish Bellows page*/
    
    /* SSP starts*/
    
    #sspcontent {
    width: 750px;
    color:#A57E5F;
    background-color:#DDD9C5;
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto; 
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-top: 10px;
    border: solid 1px;
    }
    
    #sspcontent img{
    float: left;
    margin-right: 14px;
    border-style: none;
    margin-top: 17px;
    }
    
    
    /* Irish starts*/
    
    #irishcontainer{
    width: 750px;
    color:#A57E5F;
    background-color:#DDD9C5;
    margin-top: 9px;
    margin-right: auto;
    margin-left: auto; 
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border: solid 1px;
    text-align: center;
    }
    
    .frontpic img {
    position: relative;
    padding-top: 5px;
    border-style: none;
    }
    
    .frontpic a {
    text-decoration: none;
    }
    
    #irishcontent {
    text-align: center;
    line-height: 0.5;
    }
    
    /* Irishpic.gal starts*/
    
    #irishpicontainer {
    width: 750px;
    color:#A57E5F;
    background-color:#DDD9C5;
    margin-top: 9px;
    margin-right: auto;
    margin-left: auto; 
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border: solid 1px;
    text-align: center;
    }
    
    #irishpicontainer img {
    border-style: none;
    margin-right: 10px;
    margin-top: 10px;
    }
    
    
    /* style for Sounds page starts */
    
    #navcontainer { 
    position: relative;
    margin-left: 220px;
    top: 10px;
    margin-bottom: 30px;
    }
    
    #navcontainer li{
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    }
    
    #navcontainer a{
    font-size: 1.1em;
    margin-bottom: 2px;
    color: #A57E5F;
    display: block;
    padding-top: 5px;
    padding-bottom:5px;
    width: 200px;
    background-color: #D5D0BA;
    border:solid 1px;
    text-decoration: none;
    text-align: center;
    }
    
    #navcontainer a:link, .navlist a:visited
    {
    text-decoration: none;
    }
    
    #navcontainer a:hover
    {
    background-color: #D5CCA3;
    color: maroon;
    }
    
    
    /* style for Price page starts */
    
    #pricesnavcontainer {
    margin-top:50px;
    margin-bottom: 400px;
    padding-left:5px;
    }
    
    #pricesnavlist 
    {
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif;
    margin:0;
    padding: 0;
    }
    
    #pricesnavlist li
    {
    margin:2px;
    font-size: 1.2em;
    display: inline;
    list-style-type: none;
    }
    
    #pricesnavlist a { 
    padding:3px 10px;
    border: solid 1px; 
    }
    
    #pricesnavlist a:link, #pricesnavlist a:visited
    {
    color: #A57E5F;
    background-color: #D5D0BA;
    text-decoration: none;
    }
    
    
    #pricesnavlist a:hover
    {
    color: maroon;
    background-color: #D5CCA3;
    text-decoration: none;
    }
    
    
    #pricesfooter h3 {
    font-style: italic;
    }
    #pricesfooter {
    text-align: center;
    }
    
    /* style for LINKS page starts */
    
    #linkscontainer {
    width: 80%;
    color:#A57E5F;
    background-color:#DDD9C5;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    border: solid 1px;
    text-align: left;
    }
    
    
    #linkscontainer a{
    text-decoration: none;
    color: maroon;
    padding: 5px;
    align: left;
    }
    
    #linkscontainer a:hover{
    background-color: #D5CCA3;
    border: solid 1px;
    }
    
    /*scotpic.galstarts*/
    
    .goback {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    }
    
    .goback a{
    text-decoration: none;
    color: maroon;
    }
    
    .goback a:hover{
    background-color: #D5CCA3;
    border: solid 1px;
    padding: 10px 10px 10px 10px;
     }
    
    #scotsection1{
    list-style-type: none;
    margin-left:20px;
    }
    
    #scotsection1 li {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    color: #333333;
    }
    
    #scotsection1 img {
    display: block;
    width: 90px;
    height: 100px;
    border: 1px solid;
    }
    
    #scotsection2{
    list-style-type: none;
    margin-left: 6px;
    }
    
    #scotsection2 li {
    float: left;
    margin-right: 19px;
    margin-bottom: 10px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    color: #333333;
    }
    
    #scotsection2 img {
    display: block;
    width: 40px;
    height: 100px;
    border: 1px solid;
    }
    
    #scotsection3 {
    list-style-type: none;
    margin-left: 20px;
    }
    
    #scotsection3 li {
    float: left;
    margin-right: 6px;
    margin-bottom: 10px;
    font: bold 0.8em Arial, Helvetica, sans-serif;
    color: #333333;
    
    }
    
    #scotsection3 img {
    display: block;
    width: 90px;
    height: 100px;
    border: 1px solid;
    }

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello wediv,
    It looks like you can make your CSS read
    Code:
    #navcontainer { 
    float: right;
    top: 10px;
    margin-bottom: 30px;
    }
    to get your menu over there.

    You will need to clear the float then.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Nov 2006
    Posts
    57
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi excavator,

    Thanks for that, bit it hasn't worked. However it may be me becasue I am still new to this and was not quite sure exactly where to clear, although because of that I tried it in each of the nav rules.I tried clear:both as well as right. Exactly where would I have to put the clear ?

    Thanks

    webdiv


  •  

    Posting Permissions

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