I have problem with CSS menu on my page http://szmitek.winweb.pl/Default.aspx. The page uses style sheet http://szmitek.winweb.pl/StyleSheet.css. Menu is built with upper, always visible links and submenu displayed when mouse pointer is on menu. 
I want menu to be center not left. I would like also force Mozilla Firefox not to display break above menu. How to do this? XHTML code:
<?xml version="1.0" encoding="utf-8" ?>
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml">
...
<body>
<
form name="aspnetForm" method="post" action="Default.aspx" id="aspnetForm"><div>
<
input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" ... />
</
div>
<div id="ctl00_Main" class="Main">
<
div id="ctl00_Top" class="Top">
<h1>Kamil Szmit</h1>
</div>
<div id="ctl00_Nav" class="Nav">
<ul id="ctl00_Home" class="Current">
<li>
<a title="Przejd« na stron© g˘wnĄ" href="#nogo">
<strong>
Strona g˘wna
</strong></a>
</li>
</ul>
<ul class="Select">
<li><a href="#nogo"><strong>Joseph
Turner
</strong>
</a>
<div class="SelectSub">
<ul class="Sub">
<li><a href="#nogo">Fishermen
at Sea
</a>
</li>
<li><a href="#nogo">The
Shipwreck
</a>
</li>
<li><a href="#nogo">The
Vale of Ashburnham
</a>
</li>
...
</ul>
</div>
</li>
</ul>
<ul class="Select">
<li><a href="#nogo"><strong>John
Constable
</strong>
</a>
<div class="SelectSub Show">
<ul class="Sub">
<li><a href="#nogo">The
Hay Wain
</a>
</li>
...
</ul>
</div>
</li>
</ul>
...
</div>
<
p>Response.Write(CultureInfo.CurrentUICulture) returns pl</p>
...
</
div>
<div id="ctl00_Footer" class="Footer">
<div id="ctl00_FooterLeft" class="FooterLeft">
<p>E-mail: <a id="ctl00_EmailLink" title="Wylij mi wiadomo† e-mail" href="mailto:szmitek@hotmail.com">szmitek@hotmail.com</a></p>
</div>
<div id="ctl00_FooterRight" class="FooterRight">
<p>Komentuj na <a href="http://kamilszmit.cba.pl/blog/">blogu o mnie</a>, <a href="http://www.ivirtuaforums.com/could-you-rate-my-web-site-http-szmitek-winweb-pl-t10480">iVirtua</a></p>
</div>
</
div></form>
</
body>
</
html>
CSS 2.1 code:
body {
margin: 0;border: 0;
height: 100%;padding: 0;
background-color: #1E1E1E;
}
html {
margin: 0;border: 0;
height: 100%;padding: 0;background-color: #1E1E1E;
}
...
#aspnetForm {
position: relative;min-height: 100%;
height: auto !important;height: 100%;
}
.Main {
padding-bottom: 31px;overflow: auto;
}
.Top {
background: #333;border-bottom: 1px solid #555;
margin: 0;padding: 0;
}
.Top h1 {
margin:0;padding: 50px 30px 0 0;
...
text-align: right;
}
.Nav {
height: 35px;background: url( button1.gif) repeat-x;
position: relative;font-family: arial, verdana, sans-serif;
font-size: 11px;width: 100%;
z-index: 500;margin-top: 0;
padding-right: 0;text-align: center;
padding-top: 0;margin-left:auto;
margin-right:auto;padding-bottom: 20px;
}
}
.Nav .Select .Nav .Current {
padding: 0;list-style: none;
display: table-cell;white-space: nowrap;
text-align: center;margin-left:auto;
margin-right:auto;
}
.Nav li {
margin: 0;padding: 0;
height: auto;float: left;
list-style-type: none;text-align: center;
margin-left:auto;margin-right:auto;
}
.Nav .Select a {
display: block;height: 35px;
float: left;background: url( button1.gif);
padding: 0 30px 0 30px;text-decoration: none;
line-height: 35px;
...
text-align: center;margin-top: 0;
margin-left:auto;margin-right:auto;
}
.Nav .Current a {
display: block;height: 35px;
float: left;background: url( button3.gif);
padding: 0 0 0 15px;text-decoration: none;
line-height: 35px;
...
text-align: center;margin-top: 0;
}
.Nav .Current a strong {
display: block;padding: 0 30px 0 15px;
background: url( button3.gif) right top;text-align: center;
margin-top: 0;
}
.Nav .Select a:hover, .Nav .Select li:hover a {
background: url( button4.gif);padding: 0 0 0 15px;
...
text-align: center;margin-top: 0;
}
.Nav .Select a:hover strong, .Nav .Select li:hover a strong {
display: block;float: left;
padding: 0 30px 0 15px;
...
text-align: center;margin-top: 0;
}
.Nav .SelectSub {
display: none;
}
.Nav .Sub {
display: table;margin: 0 auto;
padding: 0;list-style: none;
text-align: center;margin-left:auto;
margin-right:auto;
}
.Nav .SubActive .CurrentSub a, .Nav .SubActive a:hover {
...
text-align: center;margin-left:auto;
margin-right:auto;
}
.Nav .Select :hover .SelectSub, .Nav .Current .Show {
display: block;position: absolute;
width: 100%;top: 35px;
background: url(back_0.gif);padding: 0;
z-index: 100;left: 0;
text-align: center;margin-left:auto;
margin-right:auto;
}
.Nav .Current .Show {
z-index: 10;text-align: center;
margin-left:auto;margin-right:auto;
}
.Nav .Select :hover .Sub li a, .Nav .Current .Show .Sub li a {
display: block;float: left;
background: transparent;padding: 0 10px 0 10px;
white-space: nowrap;border: 0;
color: #444;text-align: center;
margin-left:auto;margin-right:auto;
}
.Nav .Current .Sub li.SubShow a {
...
text-align: center;margin-left:auto;
margin-right:auto;
}
.Nav .Select :hover .Sub li a:hover, .Nav .Current .Sub li a:hover {
visibility: visible;
...
text-align: center;margin-left:auto;
margin-right:auto;
}
.Footer {
width: 100%;height: 31px;
position: absolute;bottom: 0 !important;
margin-top: auto;
}
.FooterLeft {
float: left;
}
.FooterRight {
float: right;text-align: right;
}
How to force Internet Explorer 7 to center menu ("ul" tags in "<div id="ctl00_Nav" class="Nav">" and submenu "<ul class="Sub">") like Mozilla Firefox centers submenu? How to force MFF:
-
to center upper menu (always visible one; "ul" tags in "<div id="ctl00_Nav" class="Nav">");
-
to display whole menu without scrollbar like IE7 when mouse pointer is on "<ul class="Select">" items (eg. "Joseph Turner");
-
not to display break (which IE7 does not display) between "<div id="ctl00_Top" class="Top">" and menu;
-
to display footer "<div id="ctl00_Footer" class="Footer">" on the bottom of window like IE7 without scrollbar when content of page does not fill the window.
Could you help me? 