[FireflyX]

Ok so I've been searching around the web and trying out a few solutions but not having any luck So I'm hoping someone here can show me a good way to do this. Basically I just want my navigation in the center rather than left aligned.

HTML

HTML Code:

                <div id="nav">
                <ul>
                        <li>
                        <a href="index.php">Home</a>
                        </li>

                        <li>
                        <a href="index.php?page=sites">Websites</a>
                        </li>

                        <li>
                        <a href="index.php?page=games">Games</a>
                        </li>
                                
                        <li>
                        <a href="index.php?page=other">Other Projects</a>
                        </li>
                                
                        <li>
                        <a href="index.php?page=about">About</a>
                        </li>
                                
                        <li>
                        <a href="index.php?page=contact">Contact</a>
                        </li>

                </ul>
                </div>

CSS

HTML Code:

#nav{

        background-image: url(images/link.png);
        height: 26px;

}

#nav ul{

text-align: center;

}

#nav li{

        list-style: none;
        float: left;
        height: 26px;
display: inline;

}

#nav a{

        color: #FFFFFF;
        text-decoration: none;
        display: block;
        padding: 6px;

}

#nav a:hover{

        color: #000000;
        text-decoration: none;
        cursor: pointer;

}

Thanks for your time.

[_matt1313]

try this

Code:

#nav {
	background-image: url(images/link.png);
	height: 26px;
}
#nav ul {
	list-style-type: none;
	text-align: center;
}
#nav li {
	list-style: none;
	height: 26px;
	display: inline;
}
#nav a {
	color: #000;
	text-decoration: none;
	padding: 6px;
}
#nav a:hover {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
}

[FireflyX]

No change

Cept you turned my links black

[_matt1313]

what browser are you using as this worked in FF

[FireflyX]

Yeh I'm using FF too. Unfortunately I don't have the site live atm or I could have sent you the link...

[_matt1313]

this is how I see it. Look at attachment

[FireflyX]

Ok I just tried that bit code on its own page and it worked fine I guess I must have something else in the css file that's causing it to mess up.

[FireflyX]

Code:

*{

        margin: 0;
        padding: 0;
        border: 0;

}


body{

        margin: 25px;
        background-color: #F0F0F0;
        background-image: url(images/bg.png);
        background-repeat: repeat-x;
        font-family: verdana;
        font-size: 12px;
        color: #919191;

}

#container{

        text-align: left;
        width: 775px;
        margin: auto;


}

#banner{

        height: 80px;
        background-image: url(images/banner.png);

}

That's everything that appears before the #nav

[_matt1313]

the border is on the #nav

everything looks good

[FireflyX]

I'm going to start deleting other stuff off the page and see if that helps. It works fine when I put it on it's own but there's something on that page screwing it up