if you view this on a web page anyone know how i can align the middle part to the center? IF you view in IE it looks ok alisgnment wise tho ixels are screwed up, if you view it in firefox inside looks ok but middle chunk is aligned left :/

http://i5.photobucket.com/albums/y161/lochii/ff-site-1.gif

http://i5.photobucket.com/albums/y161/lochii/ie-site-1.gif

help me!!

thanks :)

<HTML>
<HEAD>
<TITLE>| ::Gears Of War :: | </TITLE>
<style>

body{
background-color:black};
text-align:center;
}

.container{
    width:660px;
    height:100px;
    margin-left: auto;
    margin-right:auto;
    border:1px solid #AD9482;
    background-position: center;
    text-align: center;
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.title{
height:10;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.head{
height:100;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.links{
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c1{
width:70;
height:500;
float:left;
background-color:#e0e0e0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c2{
width:255;
height:500;
float:left;
background-color:#d0d0d0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c3{
width:255;
height:500;
float:left;
background-color:#c0c0c0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c4{
width:70;
height:500;
float:left;
background-color:#b0b0b0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.foot{
clear:both;
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

body,td,th {
    color: #55A0FF;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #FFFFFF;
}
a:hover {
    text-decoration: none;
    color: #750000;
}
a:active {
    text-decoration: none;
    color: #FFFFFF;
}
</style> 

<BODY>
<center>
<div class="container">

<div class="title">
:<a href="index.html">home</a>:
:<a href="news.html">news</a>:
:<a href="forum.html">community</a>:
:<a href="about.html">about us</a>:
:<a href="contact.html">contact</a>:
</div>



<div class="head"><img src="banner.JPG"></div>

<div class="links">



</div>

<div class="c1";>
  <div align="center">Column One</div>
</div>

<div class="c2">
  <div align="center">Column Two</div>
</div>

<div class="c3">
  <div align="center">Column Three</div>
</div>

<div class="c4">
  <div align="center">Column Four</div>
</div>

<div class="foot">
  <div align="center">footer</div>
</div>

</div>
</center>
</BODY>
</HTML>

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>| ::Gears Of War :: | </TITLE>
<style>

body{
background-color:black};
text-align:center;
}

.container{
width:660px;
height:100px;
margin-left: auto;
margin-right:auto;
border:1px solid #AD9482;
background-position: center;
text-align: center;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.title{
height:10;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.head{
height:100;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.links{
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c1{
width:70;
height:500;
float:left;
background-color:#e0e0e0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c2{
width:255;
height:500;
float:left;
background-color:#d0d0d0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c3{
width:255;
height:500;
float:left;
background-color:#c0c0c0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c4{
width:70;
height:500;
float:left;
background-color:#b0b0b0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.foot{
clear:both;
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

body,td,th {
color: #55A0FF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #750000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
</style>

<BODY>
<center>
<div class="container">

<div class="title">
:<a href="index.html">home</a>:
:<a href="news.html">news</a>:
:<a href="forum.html">community</a>:
:<a href="about.html">about us</a>:
:<a href="contact.html">contact</a>:
</div>



<div class="head"><img src="banner.JPG"></div>

<div class="links">



</div>
<div style="margin-left:auto; margin-right:auto; width: 300px;">

<div class="c1";>
<div align="center">Column One</div>
</div>

<div class="c2">
<div align="center">Column Two</div>
</div>

<div class="c3">
<div align="center">Column Three</div>
</div>

<div class="c4">
<div align="center">Column Four</div>
</div>
</div>

<div class="foot">
<div align="center">footer</div>
</div>

</div>
</center></body>
</html>

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>| ::Gears Of War :: | </TITLE>
<style>

body{
background-color:black};
text-align:center;
}

.container{
width:660px;
height:100px;
margin-left: auto;
margin-right:auto;
border:1px solid #AD9482;
background-position: center;
text-align: center;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}

.title{
height:10;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.head{
height:100;
width:650;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.links{
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c1{
width:70;
height:500;
float:left;
background-color:#e0e0e0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c2{
width:255;
height:500;
float:left;
background-color:#d0d0d0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c3{
width:255;
height:500;
float:left;
background-color:#c0c0c0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.c4{
width:70;
height:500;
float:left;
background-color:#b0b0b0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

.foot{
clear:both;
height:15;
width:650;
background-color:#a0a0a0;
font-family: verdana;
color: #000000;
font-size: 10px;
}

body,td,th {
color: #55A0FF;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #750000;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
</style>

<BODY>
<center>
<div class="container">

<div class="title">
:<a href="index.html">home</a>:
:<a href="news.html">news</a>:
:<a href="forum.html">community</a>:
:<a href="about.html">about us</a>:
:<a href="contact.html">contact</a>:
</div>



<div class="head"><img src="banner.JPG"></div>

<div class="links">



</div>
<div style="margin-left:auto; margin-right:auto; width: 300px;">

<div class="c1";>
<div align="center">Column One</div>
</div>

<div class="c2">
<div align="center">Column Two</div>
</div>

<div class="c3">
<div align="center">Column Three</div>
</div>

<div class="c4">
<div align="center">Column Four</div>
</div>
</div>

<div class="foot">
<div align="center">footer</div>
</div>

</div>
</center></body>
</html>

hey thanks for the reply, it doesnt work straight away so ill have to tweak it a lot and see how it goes, ill post back in a white and update ya on the progress thanks for your help man

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.