...

View Full Version : menu positioning to the right in IE



webdiv
12-06-2006, 02:51 PM
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



#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;
}




<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>

ronaldb66
12-06-2006, 03:03 PM
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.

webdiv
12-06-2006, 05:08 PM
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



<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>





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;
}

Excavator
12-06-2006, 05:15 PM
Hello wediv,
It looks like you can make your CSS read
#navcontainer {
float: right;
top: 10px;
margin-bottom: 30px;
} to get your menu over there.

You will need to clear (http://www.positioniseverything.net/easyclearing.html) the float then.

webdiv
12-06-2006, 05:42 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum