CSS - Text-align Doesnt Work....

Hi,

The text in my navigation bar is slightly off-centre, even though I have applied the text-align:centre property in my style sheet. Is there anything obvious that would be throwing it off?

Any help would be greatly appreciated.

Jimmy

Here is my style sheet:

body
{
padding:0px;
margin:0px;
background-color:#ffffff;
background-image:none
background-repeat:no-repeat;
font-family:verdana, arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
}
/*--------------------DIVs------------------------------*/
div#pagecenter
{
margin: 0 auto;
width: 1024px;
background-color:#ffffff;
}

div#header
{
height:312px;
background-color:#ffffff;
background-repeat:no-repeat;
background: ((address blocked: See forum rules));
padding:5px;
text-align:right;
text-display: none;
color:#FFFFFF;
}

div#desc
{
visibility: hidden;
text-align:left;
}

div#sitename
{
visibility: hidden;
}
div#oup h1 a {
margin-top: -30px;
margin-left: 10px;
margin-right: auto;
width: 100px;
height: 30px;
display: block;
font-size: 0px;
color: #003261
}
div#oup h1 a:hover {color: #003261}
div#clickableheader h1 a {
margin-top: 20px;
width: 1000px;
height: 200px;
display: block;
font-size:0px;
color: #003261;
}
div#clickableheader h1 a:hover {color: #003261}

/* nav */
#nav {
width: 400px;
margin-left: 0px;
margin-right: auto;
margin-top: -70px;
line-height: 20px;
height: 100px;
text-align: center;
font-size: 12px;}
#nav ul {list-style-type: none;}
#nav li {display: block; float:left; width: 50px; padding: 40px 20px 40px 25px; border: none; background: url("images/DBlueUp.jpg") no-repeat;}
#nav li.page-item-6 {padding: 23px 20px 20px 25px; border: none; background: url("images/PU.jpg") no-repeat;}
#nav li.page-item-6.current_page_item {padding: 23px 20px 20px 25px; border: none; background: url("images/PD.jpg") no-repeat;}
#nav li.current_page_item {border: none; background: url("images/DBD.jpg") no-repeat;}
#nav li.page-item-51 {text-align: center; padding: 20px 25px 20px 20px; border: none; background: url("images/GreenUpCentre.png") no-repeat;}
#nav li.page-item-51 a {text-align: center;}
#nav li.page-item-51.current_page_item {padding: 20px 25px 20px 15px; border: none; background: url("images/GD.jpg") no-repeat;}
/* navright */
#navright {
width: 400px;
margin-left: auto ;
margin-right: 0px ;
margin-top: -110px ;
line-height: 20px;
height: 100px;
text-align:center;
font-size: 12px;}
#navright ul {list-style-type: none;}
#navright li {display: block; float:left; width: 50px; padding: 20px 20px 20px 20px; margin: 5px; border: none; background: url("images/LBU.jpg") no-repeat;}
#navright li.page-item-2 {border: none; background: url("images/OU.jpg") no-repeat;}
#navright li.page-item-2.current_page_item {border: none; background: url("images/OD.jpg") no-repeat;}

#navright li.page-item-48.current_page_item {border: none; background: url("images/LBD.jpg") no-repeat;}
#navright li.page-item-13 {padding: 20px 20px 40px 20px; border: none; background: url("images/contact.jpg") no-repeat;}



div.left-navi-blog
{
width:255px;
margin-right:10px;
float:left;
}

div.left-widget
{
width:255px;
margin-top:40px;
background-color:#ffffff;
padding-top:1px;
padding-bottom:200px;
}

div#leftbarfooter
{
background-color:ffff00;
height:15px;
}

div#rightbarfooter
{
background-image:none;
height:15px;
}
div.center-gauche-area
{
width:755px;
margin-right:10px;
float:left;
margin-top:-50px;
}

div.center-blog
{
width:500px;
margin-right:10px;
float:left;
margin-top:-0px;
}

div.post-title
{
visibility: hidden;
margin:0px;
padding:5px;
height:16px;
background-color:#FFFFFF;
}

div.post-content
{
background-color:#FFFFFF;
margin:0px;
padding:5px;
text-align:center;
border-top:#000000 0px solid;
border-bottom:#000000 0px solid;
}

div.post-meta
{
color:#FFFFFF;
margin:0px;
padding:4px;
height:14px;
margin-bottom:10px;
background-color: #ffffff;
}

div.single-meta
{
border:#444 1px dashed;
padding:2px;
margin:5px;
margin-top:10px;
color:#202D32;
background-color:#B0BDC5;
font-size:10px;
}

div.main-meta
{
border:#ccc 1px dashed;
padding:2px;
margin:5px;
margin-top:10px;
color:#666;
background-color:ddd;
font-size:10px;
}

div.commentblog
{
background-color:#B0BDC5;
margin:0px;
padding:5px;
text-align:center;
border-top:#000000 1px solid;
border-bottom:#000000 0px solid;
}
div.singlecommentborder
{
float:left;
}

div.gravatorblog
{
float:left;
width:70px;
}

div.singlecomment
{
float:left;
width:410px;
}

div.right-navi-blog
{
width:200px;
float:left;
}
div.right-widget
{
margin-top:80px;
width:200px;
background-color:#ffffff;
padding-bottom:4px;
padding-right:5px;
}

div.widget-header
{
color:#000000;
font-weight:bold;
padding-left:10px;
padding-top:3px;
}

div.clear
{
clear: left;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}
div#sharebar
{ margin-right:auto;
margin-left:auto;
margin-bottom:0px;
background:#fff;
height:30px;
padding:25px;
color:#003261;
}
div.ouplegal
{
margin-top:0px;
background:#cbeefe;
height:12px;
text-align:center;
padding:5px;
color:#003261;
font-size:10px;
}
div#footer
{
margin-top:0px;
background:#003261;
height:40px;
text-align:center;
padding-top:20px;
color:white;
font-size:16px;
}
div#footer :link {text-decoration:underline}

/*--------------------textgestaltung--------------------*/
p{
margin:0px;
}
h1,h2,h3,h4,h5,h6{
color:#000000;
margin:0px;
padding:0px;
font-size:11px;
}

acronym, abbr, span.caps {
cursor: help;
}
acronym, abbr {

}
blockquote {

}
blockquote cite {

}

hr {

}


dl{
}
dt{
}
dd{
}
ul
{
margin:0px;
margin-left:12px;
list-style:none;
padding-left:8px;
}
ol{
}
li
{
list-style:square;
margin-top:3px;
padding-top:2px;
padding-bottom:2px;
color:#810000;
}
ul ul{
}
blockquote{
}
blockquote p{
}
code{
}
pre{
}
b, strong,i,em {
}
img{

padding:3px;
margin:2px;
}
address {
}

img.ogtzuq{
border:0px;
color:#3B4D56;
}
/*--------------------linkgestaltung--------------------*/

a {text-decoration:none;
color:#FFFFFF;
}
a:link {
text-decoration:none;
color:#FFFFFF;
}
a:visited {
text-decoration:none;
color:#FFFFFF;
}
a:link:focus{
}
a:link:hover, {
font-weight: bold;
}

.post-content a{
color:#333;
}
.post-content a:link
{
color:#333;
}
.post-content a:visited{ color:#333;
}
.post-content a:link:active,
.post-content a:visited:active{color:#333;
}

#single-meta a{
color:#333;
}
#single-meta a:link
{
color:#333;
}
#single-meta a:visited{ color:#333;
}
#single-meta a:link:active,
#single-meta a:visited:active{color:#333;
}
.commentblog a{
color:#333;
}
.commentblog a:link
{
color:#333;
}
.commentblog a:visited{ color:#333;
}
.commentblog a:link:active,
.commentblog a:visited:active{color:#333;
}
/*--------------------bilder als links--------------------*/
a img{

padding:3px;
margin:2px;
}
a:link img {
}
a:visited img {
}
a:link:active img,
a:visited:active img {
}

a:link:hover img,
a:visited:hover img {
padding:3px;
margin:2px;
}
/*--------------------smilies im text--------------------*/
body img.wp-smiley{
}

/*--------------------der weiterlesen link--------------------*/
.more-link{
}
/*--------------------die seiten wenn es mehrere gibt--------------------*/
p.serif{
}
/*--------------------suche--------------------*/
#searchform{
}
input#s{
}
input#searchsubmit{
}


/*--------------------Kommentare--------------------*/
.alt {

}
.commentlist { padding:0px;
margin:0px;

}

.nocomments {
text-align:center;

}

.commentlist li {
padding:0px;
margin:0px;
list-style:none;
color:#111;

}
.commentlist cite,
.commentlist cite a {

}
.commentlist p {
text-align:center;
padding:0px;
padding-top:5px;

}
#commentform p {

}
.commentmetadata {

}
#commentform input {
border:1px solid #333;
margin-bottom:3px;
}
#commentform textarea {
border:1px solid #333;
width:488px;
}
#commentform #submit {

}
/*--------------------fuer den wp kalender--------------------*/

#wp-calendar th {

}

#wp-calendar {
empty-cells: show;

}
#wp-calendar #next a {

}
#wp-calendar #prev a {

}
#wp-calendar a {

}
#wp-calendar caption {

}
#wp-calendar td {

}
#wp-calendar td.pad:hover {
}

/*-------------------- widgets---------------------*/
h2.widgettitle{
}
.widget {
}
/*--------------------Archive--------------------*/
li#archives{
}
.widget_archives{
}
/*--recent posts--*/

li#recent-posts{
}
.widget_recent_entries{
}

/*--------------------text widget--------------------*/
li.widget_text{
}
/*--id haengt von der nummer des text widgets ab*/
li#text-4{
}
div.textwidget{
}
/*--------------------links blogroll--------------------*/
li#links{
}
.widget_links{
}

/*--------------------kategorien--------------------*/
li#categories{
}
.widget_categories{
}
/*-------------------WP Requires------------------*/
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align:center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption-dd {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;

}

Hi folks, don't usually post in the CSS forum here, but in the php forum I have got great help so give it a go. Basically I need to know how to center two divs on a page which themselves have float:left attribute.

When I set text-align:center on the body a couple of other divs aligned perfectly so I did not have to worry about different res's. But I need these two divs (leftnav and content) next to each other and acheived this by setting the float:left attribute. The CSS code is below, I hope you can help, i have tried but these two divs in one outer div (without any float set) but didn't work.

Code:

body
{
	font-family: "Lucida Sans";
	font-size: 12px;
	margin: 0px 0px 10px;
	border-top: 0px none #000000;
	border-right: 0px none #000000;
	border-bottom: 5px none #000000;
	border-left: 0px none #000000;
	scrollbar-arrow-color: #D20000;
	scrollbar-3dlight-color: #4F4F82;
	scrollbar-darkshadow-color: #4F4F82;
	scrollbar-face-color: #f4f4f0;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #d0d0d0;
	scrollbar-track-color: #ffffff;
	text-align: center;
	display: block;
}


.leftnav {
	float: left;
	color: #000000;
	font-size: 12px;
	font-family: "Trebuchet MS";
	border-top: 1px solid #000000;
	border-right: 1px none #000000;
	border-bottom: 1px none #000000;
	border-left: 1px none #000000;
	padding: 0px;
	white-space: nowrap;
	width: 220px;
	margin: 10px 0px 0px 10px;
	clear: both;
	text-align: left;
}

.content {
	background-color: #FFFFFF;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	float: left;
	white-space: normal;
	margin-top: 10px;
	margin-left: 0px;
	margin-bottom: 10px;
	font-family: "Trebuchet MS";
	font-size: 13px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	width: 1000px;
	margin-right: 0%;
	list-style-type: none;
	text-align: left;

}

Thanks very much.

I've got this page here and for some reason, it works fine in Internet Explorer, but in Safari, everything is aligned to the left!?

Which is strange, because the Glish tutorial I'm using works just fine in both IE and Safari.

What have I done wrong in my code??

<ul> doesnt work in IE properly?
I have problem with IE7 and <

code:

html:

<ul>
<li><a href="A.html">A</a></li>
<li><a href="B.html">B</a></li>
<li><a href="C.html">C</a></li>
</ul>

If I open site with IE7 pages B.html and C.html works fine, whereas A.html loose its css for navigation (ul a:link etc..)

any ideas?

code for css:

#containerNavigation {
margin: 0;
float: left;
width: 100%;
background: #990000;
}


#navigationHorizontal {
zoom: 1;
width: 750px;
margin: auto;
padding-right: 0;
height: 35px;


}

#navigationHorizontal ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
width: 749px;




}

#navigationHorizontal li {
padding-right: 0;
margin: 0;
display: inline;

}

#navigationHorizontal li a {
float: left;
color: white;
text-decoration: none;
text-align: center;
background-color: #990000;
line-height: 35px;
margin: 0 0 0 0;
padding: 0 25px 0 28px;
font-size: 1.2em;

}



#navigationHorizontal li a:hover {
color: #FFF;
text-decoration: underline;
}

Hey gang,

My suckerfish menu wonk work properly in ie5.5 and ie6 but works fine in all the others... the problem is that if i hover over main link that drop down menu will appear but then wont stay there when i hover the mouse over the submenu.

i removed all the content from below the menu and suddenly it works, but my site needs content!

Has anyone had this problem before???

#navi
{
width: auto;
background: url(images/navi01.jpg) repeat-x top left;
}

#navi, #navi ul
{ /* all lists */
padding: 0px 0px 0px 26px;
margin: 0;
list-style: none;
height: 29px;
}

#navi a
{
font-weight: bold;
margin: 8px 0px 0px 0px;
color: #ffffff;
display: block;
width: auto;
padding: 0px;
text-decoration: none;
}

#navi li
{
float: left;

width: auto;
padding: 0px 26px 0px 26px;
}

#navi li ul
{
position: absolute;
width: 160px;
left: -999em;
padding: 7px 0px 0px 0px;
margin: 0px 0px 0px -17px;
}

#navi li ul li
{
width: 160px;
height: auto;
padding: 0px 0px 0px 0px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cfcfcf;
border-left: 1px solid #ffffff;
border-right: 1px solid #cfcfcf;
overflow: visible;
}

#navi li ul a
{
background-color: #f2f2f2;
color: #1989d1;
padding: 3px 16px 4px 16px;
margin: 0px;
}

#navi li.heading
{
border-top: 1px solid #7fa7bf;
border-bottom: 1px solid #67889b;
border-left: 1px solid #7fa7bf;
border-right: 1px solid #67889b;
}

#navi a.heading
{
background-color: #799eb5;
color: #ffffff;
padding: 3px 16px 4px 16px;
}

#navi li:hover ul, #navi li.sfhover ul
{ /* lists nested under hovered list items */
left: auto;
}




<script type="text/javascript">

<!--//--><![CDATA[//><!--

sfHover = function() {
var sfEls = document.getElementById("navi").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>

</script>
</head>
<body>
<div id="border">
<div id="container">
<div id="content_left">
<div id="header"><div id="header01"></div></div>
<ul id="navi">
<li>
<div><a href="">About Us</a></div>
<ul>
<li><a href="">History</a></li>
<li><a href="">Staff</a></li>
<li><a href="">Employment</a></li>
</ul>
</li>
<li>
<div><a href="">Products and Services</a></div>
<ul>
<li class="heading"><a href="" class="heading">Support Services</a></li>
<li><a href="">Customer Support</a></li>
<li><a href="">Advanced Support</a></li>
<li class="heading"><a href="" class="heading">Professional Services</a></li>
<li><a href="">Engineering Services</a></li>
<li><a href="">Project Managemant</a></li>
<li><a href="">Software Development</a></li>
<li><a href="">Consulting</a></li>
<li class="heading"><a href="" class="heading">Solutions</a></li>
<li><a href="">Voice over IP (VOIP)</a></li>
<li><a href="">Information Lifecycle Management (ILM)</a></li>
<li class="heading"><a href="" class="heading">Procurement Services</a></li>
</ul>
</li>
<li><div><a href="">Contact Us</a></div></li>
<li><div><a href="">Links</a></div></li>
<li><div><a href="">News</a></div></li>
</ul>