PDA

View Full Version : Navigational problem - not in the centre!



Bankzy108
Feb 12th, 2010, 06:32 PM
I am having problem with my navigational bar for my site. For some reason it won't position in the place I want it to be positioned. I have tried doing all sorts to it, but I just want it placed in the centre for both IE and FF but it sort of is in the centre for FF but not for IE.

Can anyone help please?

The site is hosted here for testing purposes and is a tester site within itself.
Ultimate Website Designs (http://ultimatewebdesigns.clanteam.com)

Here is the HTML Markup:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/indexFF.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to Ultimate Website Designs!</title>
</head>

<body>

<div id="container">

<div id="logo">

</div>

<div id="navbar" class="navcorners">
<ul>
<li id="active">Home</li>
<li><a href="#">Services</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

<div class="clear"></div>

<div id="banner" class="corners">

</div>

<div class="clear"></div>

<div id="mainsection">

<div id="leftcolumn" class="corners">

<p class="headlinetext">
Welcome To <span class="ultimatebig">Ultimate</span> Website Designs!
</p>

<p class="separator"></p>

<p class="questiontext">
Looking to have a website built for your business?
</p>

<p>
If the answer is <strong>yes</strong>, then you have come to the right place. Here at <span class="ultimate">Ultimate</span> Website Designs we aim to please our clients by producing a website that looks astetically pleasing to the eye and has only the content you want on it. We work hand in hand with our clients to ensure along the process that we have created what they want, and have asked for. We also work closely with them to allow them to see what the website looks like through-out the entire process allowing them to see what has been done, and what needs to be done.
</p>

<p>&nbsp; </p>

<p class="questiontext">
How does it work?
</p>

<p>
First of all we will have a consultation with you to see what you would like and what needs to be done. We ask you various questions - from what colours you would like the site to be (optional) to how many pages your website will consist of. Once we have met with you and gathered more information we will then estimate a quote. If the client still wants to go ahead a second consultation takes place where we go into a little more detail. From there we go onto creating your site and will have regular meetings (when you want them). Once the website has been complete we can offer to setup a host for you - yet again this is optional to the client.
</p>

<p>&nbsp; </p>

<p>
To find out more information then please feel free to visit the other pages via the navigational bar at the top.
</p>

</div>

<div id="rightcolumn" class="corners">

<p class="questiontext">
Got a question?
</p>
<p>
If you canít find what your looking for on our other pages then donít hesitate to contact us via the ĎContact Usí page on the navigational menu at the top right hand corner.
</p>

<p>&nbsp;</p>

<p>
We make sure that all the sites we develop are fully W3C compliant. For more information on W3C compliancy please click here. If you want we can also add the W3C compliant image to your site to let other users know that your site has passed the W3C compliancy rules.
</p>

</div>

<div class="clear"></div>

</div>

<div id="copyright" class="corners">

<p>© All Rights Reserved to <span class="ultimate">Ultimate</span> Website Designs - 2010</p>

</div>

</div>

</body>
</html>


Here is the CSS code:


body{
background:#f4f4f4;
margin:0px;
padding:0px;
height:100%;
outline:none;

}

#container{
display:block;
width:963px;
margin:0 auto;
}

#logo{
display:inline;
float:left;
width:398px;
height:51px;
background: url(../images/ultimatewebsitedesigns_logo.jpg);
margin-top:23px;
margin-left:20px;
}

#navbar{
width:500px;
display:inline;
float:right;
height:40px;
margin:20px 20px 0px 0px;
background:#FFF;
/*padding:0px px 11px 0px;*/
}

a{
text-decoration: none;
color:#11aef7;
}

.navcorners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #FFF;
padding:0px 0px 11px 0px;
border: 1px solid #999;
}

.corners{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background:#FFF;
border: 1px solid #999;
}

#navbar ul {
list-style-type: none;
}

#navbar ul li {
display: inline;
float:left;
margin:0px 10px 0px 10px;
font-size:18px;
font-weight: bold;
}

#active{
color:#000;
font-size:18px;
font-weight: bold;
}

#banner{
width:921px;
height:200px;
margin:20px 20px 0px 20px;
background-image:url(../images/banner.jpg);
border: 1px solid #999;
}

#leftcolumn{
width:666px;
float:left;
background:#FFF;
margin: 20px 20px 0px 20px;
padding: 10px 10px 10px 10px;
}

#rightcolumn{
width:193px;
float:right;
background:#FFF;
margin: 20px 20px 0px 0px;
padding: 10px 10px 10px 10px;
}

#copyright{
width:923px;
background:#FFF;
margin: 20px 20px 20px 20px;
text-align:center;
padding:0px;
}

.clear{
clear:both;
}

p{
font-family:Arial, Helvetica, sans-serif;
color:#2bc2d4;
font-size:14px;
}

.headlinetext{
font-family:Arial, Helvetica, sans-serif;
color:#2bc2d4;
font-size:24px;
padding:0px;
margin:0px;
}

.ultimatebig{
font-family:Arial, Helvetica, sans-serif;
color:#959595;
font-size:24px;
padding:0px;
margin:0px
}

.ultimate{
font-family:Arial, Helvetica, sans-serif;
color:#959595;
}

.questiontext{
font-family:Arial, Helvetica, sans-serif;
color:#2bc2d4;
font-size:16px;
font-weight:bold;
font-style:italic;
}

.separator{
background:url(../images/maincontent_separator.gif);
width:646px;
height:6px;
}



Thanks in advance. :)

Excavator
Feb 13th, 2010, 12:29 AM
Hello Bankzy108,
I think your seeing different browser default margin/padding in action here. Try some variation of this (my changes highlighted in red) -

#navbar{
width:500px;
float: right;
height: 40px;
line-height: 40px;
margin:20px 20px 0px 0px;
background:#FFF;
/*padding:0px px 11px 0px;*/
}

a{
text-decoration: none;
color:#11aef7;
}

.navcorners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #FFF;
padding:0px 0px 11px 0px;
border: 1px solid #999;
}

.corners{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #FFF;
border: 1px solid #999;
}

#navbar ul {
list-style-type: none;
overflow: auto; /*to clear the floated li's*/
margin: 0; /*removes browsers default margin*/}

#navbar ul li {
display: inline;
float:left;
margin:0px 10px 0px 10px;
font-size:18px;
font-weight: bold;
}