Problems with formatting

[CliffLandin]

I have a problem with a navigation bar that I created. Here is a link to the site

http://www.soprisinteractive.com/pmmoto

It looks fine when I look at it on my Linux box using Firefox, but when I look at it using the Windows box using either Firefox or IE the navigation bar justifies to the left and I can't seem to get it to center. I have tried tables, divs, p aligns and most of the other tricks that I know. I have tried position on the stylesheet and that didn't seem to help.

This is the code for the navigation bar:

<ul id="nav">
<li><a href="

http://www.soprisinteractive.com/pmmoto">Home</a></li>

<li><a href="showroom.php">Showroom</a>
<div align="left">
<ul>
<li><a href="showroom.php?page=1">Dirt Bikes</a></li>
<li><a href="showroom.php?page=2">Street Bikes</a></li>
<li><a href="showroom.php?page=3">Mountain Bikes</a></li>
<li><a href="showroom.php?page=4">Snowmobiles/ATVs</a></li>
<li><a href="showroom.php?page=5">Miscellaneous</a></li>
</ul>
</div>
</li>
<li><a href="shopping.php">Shop Online</a>
<div align="left">
<ul>
<li><a href="shopping.php">Parts<font color="#cc0000">_</font>&amp;<font color="#cc0000">_</font>Assecories</a></li>
<li><a href="

http://stores.ebay.com/Ponderosa-Mountain-Moto-LLC_W0QQssPageNameZl2QQtZkm"

target="EBAY">Ebay Store</a></li>
</ul>
</div>
</li>
<li><a href="services.php">Dealer Services</a>
<div align="left">
<ul>
<li><a href="services.php?page=1">Suspension<font color="#cc0000">_</font>Services</a></li>
<li><a href="services.php?page=2">Service</a></li>
<li><a href="services.php?page=3">Parts Request</a></li>
</ul>
</div>
</li>
<li><a href="info.php">Dealer Info</a>
<div align="left">
<ul>
<li><a href="info.php?page=1">Contact</a></li>
<li><a href="info.php?page=2">Map and Hours</a></li>
<li><a href="info.php?page=3">Links</a></li>
</ul>
</div>
</li>
<li><a href="events.php">Events</a>
<div align="left">
<ul>
<li><a href="events.php?page=1">Events</a></li>
<li><a href="events.php?page=2">Instruction</a></li>
<li><a href="events.php?page=3">Tykes on Bikes</a></li>
</ul>
</div>
</li>
</ul>
[/color red]
and this is the stylesheet:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
font-size: .9em;
font-weight: bold;
}

#nav a {
display: block;
width: 8em;
text-decoration: none;
color: #FFFFFF;

}

#nav a:hover {
display: block;
width: 8em;
text-decoration: none;
color: #000000;

}

#nav li {
float: left;
width: 8em;
background-color: #CC0000;
}

#nav li ul {
position: absolute;
width: 12em;
left: -999em;
font-size: .8em;
background-color: #CC0000;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

a {
color: #CC0000;
text-decoration: none;
font-family: sans-serif;
}
p {
font-size: 15px;
}

.bground {
background-image: url(imgs/soon.jpg);
background-repeat: no-repeat;
background-position: center;
}

h1 {
font-family: sans-serif;
font-size: 60px;
color: #333366;
}

h2 {
font-family: sans-serif;
font-size: 20px;
color: #333366;
line-height: 3px;
}

h3 {
font-family: sans-serif;
font-size: 12px;
color: #CC0000;
letter-spacing: 6px;
line-height: 1px;
}

h4 {
font-family: sans-serif;
font-size: 16px;
color: #000066;
}
[/color red]
If someone could help me out it would be greatly appreciated.
Thanks,
Tom

When in doubt, go flat out!

http://www.soprisinteractive.com

 

[Vragabond]

Problem is, that ul is a block element and will not be aligned with the align attribute. To center block level elements you need to give the left and right margins auto value to ensure same spacing on both sides. However, this does not seem to work for your ul, namely because it does not have any width specified. As an alternative, you can set the fixed margins on both sides. Something along the lines of:

#nav ul {
    padding: 0;
    margin: 0 6%;
    list-style: none;
    font-size: .9em;
    font-weight: bold;
}

 

[oppcos]

Your menu happens to be 44em wide, so you could set your width: attribute to that and make the auto margins Vragabond mentioned work.

Because of the way you made your menus, using the "em" measure instead of pixels makes sure that no matter what font size is being used they will still center correctly.

 

[CliffLandin]

Okay I tried defining the width as 100% and the margins as 0% 0% and width as 98% and margins as 1% 1%. Neither one of these has done anything to the justifying in Windows. I have tried defining the width as 800px and the margins as 0 0, but that didn't help either. The really frustrating thing is that it works fine on the Linux box! But how many people will see this site using a linux box? Me and five others maybe.

When in doubt, go flat out!

http://www.soprisinteractive.com

 

[CliffLandin]

Okay oppcus, I'll try that.

When in doubt, go flat out!

http://www.soprisinteractive.com

 

[CliffLandin]

Okay, defining the width as 48em did the trick!!! Thanks for you help and your time.


When in doubt, go flat out!

http://www.soprisinteractive.com

 

[oppcos]

I just encompassed your lists in a div I named id="menudiv" and used this css:

#menudiv  {
  width:44em;
  padding: 0;
  margin: 0em auto 0em auto;
  }

Looks good on all the browsers I have access to. Interesting that Firefox worked different in Linux than on Windows. Are they the same version?

 

[oppcos]

Didn't see you got two posts in before me! I'm a slow typer.

 

[CliffLandin]

Yeah, it is strange that they would render pages differently and they are both v.1.0. If I didn't play games or use Photoshop I would never use the Windows comp. Okay I do use it to see how other people will see pages that I create but that games and PS are the only things.

When in doubt, go flat out!

http://www.soprisinteractive.com