Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Float Centering Fix Doesn't Work!

Status
Not open for further replies.
binjured

binjured

Programmer
Nov 2, 2004
2
US
Ok, I am at my wits end here, I have tried so many things. Here is all the information you need, I want the horizontal navigation to be in the center. It refuses.

HTML:

<body>
<div class="container">
<div class="top">
<h1>Binjured.com</h1>
<span class="small">Web Design and Development</span>
</div>
<ul id="nav">
<li><a href="Test">Home</a></li>
<li><a href="Test1">About</a></li>
<li><a href="Test1">Services</a></li>
</ul>
</div>
</body>


CSS used (validated):

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

.container {
text-align: left;
margin: 0px auto;
width: 800px;
}

#nav {
margin:0px auto;
width:800px;
text-align:center;
}


#nav ul, #nav li
{
margin: 0px 1px;
padding: 0px;
display: inline;
list-style-type: none;
float:left;
}

#nav a:link, #nav a:visited
{
display:block;
height: 25px;
width: 80px;
line-height: 30px;
border-bottom: 5px #000;
border-top: 1px #A9A9A9;
border-left: 1px #CCCCCC;
border-right: 1px #000000;
border-style: solid;
font-weight: bold;
text-decoration: none;
color: #C10007;
}

#nav a:hover, #nav a:link#current
{
border-bottom: 5px solid #C10007;
background: transparent;
color: #000;
}


WEBPAGE MAKING ME WANT TO KILL EVERYONE:

As you can see, I have the "container" for the whole thing yet the navigation refuses to be centered properly. I have been screwing with this for hours on end, changing things, rearranging... PLEASE HELP!!
 
Sort by date Sort by votes
Does it happen with every browser or just IE? According to the code, standards-compliant browsers should understand the margins and center your navigation. As for IE, you should center the content of the parent element for it to work:
Code: 
.container {
  text-align: [b]center;[/b]
  margin: 0px auto;
  width: 800px;
}
 
Upvote 0 Downvote
I've benn playing with your code and got the following code to work:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test Center</title>
<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

.container {
text-align: center;
  margin-right:auto;
  margin-left: auto;
  width: 800px;
  }

#nav {
margin-left: auto;
margin-right: auto;
width:auto;
text-align:center;
display: block;
}


#nav ul
{
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 246px;
padding: 0px;
display: block;
list-style-type: none;

}

#nav li {
 float: left;
 display: inline;
 }

#nav a:link, #nav a:visited
{
display:block;
height: 25px;
width: 80px;
line-height: 30px;
border-bottom: 5px #000;
border-top: 1px #A9A9A9;
border-left: 1px #CCCCCC;
border-right: 1px #000000;
border-style: solid;
font-weight: bold;
text-decoration: none;
color: #C10007;
}

#nav a:hover, #nav a:link#current
{
border-bottom: 5px solid #C10007;
background: transparent;
color: #000;
}
</style>
<body>
<div class="container">
<div class="top">
    <h1>Binjured.com</h1>
        <span class="small">Web Design and Development</span>
</div>

<div id="nav">
<ul>
    <li><a href="Test">Home</a></li>
    <li><a href="Test1">About</a></li>
    <li><a href="Test1">Services</a></li>
</ul>
</div>
</div>
</body>
</html>
A few things came to me:
[ul]
[li]No DOCTYPE, so IE goes into quirks mode.[/li]
[li]I put your <ul> into a <div>[/li]
[li]I added a width to your ul so it centers[/li]
[/ul]

Ken
 
Upvote 0 Downvote
Thanks guys, I finally figured it out thanks to someone mentioning the lack of a width on some part. I did have a DOCTYPE, it is this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
Now, I have yet another problem :-\. This being that the margins / "top" settings are different for IE/Mozilla. You can see this discrepency by looking at the page again and looking at the spacing between nav and main in both IE and FF/Mozilla. When set to zero, in IE the "main" block lays right beneat the nav buttons BUT in FF/Mozilla it actually sits up under the button nav border (a different of 5 pixels, the .main sits literally under the bottom border). Any ideas guys??

Thanks a ton!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
226
lmcate
lmcate
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
643
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
698
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top