troubleshooting Question

Classic Question Center Inline float left list without known width

Avatar of Shaye Larsen
Shaye Larsen asked on
CSSHTMLScripting Languages
5 Comments1 Solution1769 ViewsLast Modified:
I know there is no known way of doing this. I have a navigation menu that is dynamic. People can edit and change their nav menu. It spans the width of the screen but the list needs to center within that bar.

Believe it or not I have this working in Firefox. But it is being more stubborn than a first generation Netscape in Internet Explorer 7.

I have seen others doing it and have tried to implement their stuff but it doesn't work for IE.

I need to center the list whose code is shown below.

How can I pull this off? Keep in mind this will be dynamic and users will be changing the styles. However, I could put a main width on it that they can edit but there would need to be something behind it to span the screen.

I have tried adding a width to the container called nav_div and set margin:0 auto; and text-align:center;, but this centers the whole thing but not the text/list elements inside of it in IE 7.

Here is the CSS and HTML:
CSS:
/*these styles effect the main top bar*/
#nav26 li.top {display:table-cell; float:left; height:38px; text-align:center;}
#nav26 li a.top_link {display:block; float:left; height:38px; line-height:38px; color:#2C4728; text-decoration:none; font-size:12px; font-weight:bold; padding:0 0 0 18px; vertical-align:middle; cursor:pointer;background: url(../jquery/plugins/pro_dropdown_2/thee.gif);}
#nav26 li a.top_link span {float:left; display:block; padding:0 18px 0 18px; height:38px; background: url(../jquery/plugins/pro_dropdown_2/tre_.gif) right top no-repeat;}
#nav26 li a.top_link span.down {float:left; display:block; padding:0 18px 0 18px; height:38px; background: url(../jquery/plugins/pro_dropdown_2/the0a.gif) no-repeat right top;}
 
/*these styles effect the main top bar hover*/
#nav26 li:hover a.top_link {color:#BCDFB7; background: url(../jquery/plugins/pro_dropdown_2/th_1.gif) no-repeat;}
#nav26 li:hover a.top_link span { background:url(../jquery/plugins/pro_dropdown_2/thr1.gif) no-repeat right top;}
#nav26 li:hover a.top_link span.down { background:url(../jquery/plugins/pro_dropdown_2/thea.gif) no-repeat right top;}
 
/*these styles effect the submenus*/
ul.topLevel {width:100%;}
#nav26 li:hover {position:relative; z-index:1060;}
#nav26 li:hover ul.sub{left:1px; top:38px; background: #61895B; padding:3px; border:1px solid #34672B; white-space:nowrap; width:90px; height:auto; z-index:1070; filter:alpha(opacity=90); opacity:.900; -moz-opacity:.900; -khtml-opacity:0.90;}
#nav26 li:hover ul.sub li{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav26 li:hover ul.sub li a{display:block; font-size:10px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000000; text-decoration:none;border:1px solid #61895B;}
#nav26 li ul.sub li a.fly{background:#61895B url(../jquery/plugins/pro_dropdown_2/arrow.gif) 80px 6px no-repeat;}
#nav26 li:hover ul.sub li a:hover{background:#34672B; color:#fff; border-color:#fff;}
#nav26 li:hover ul.sub li a.fly:hover{background:#34672B url(../jquery/plugins/pro_dropdown_2/arrow_over.gif) 80px 6px no-repeat; color:#fff;}
#nav26 li:hover li:hover ul, #nav26 li:hover li:hover li:hover ul, #nav26 li:hover li:hover li:hover li:hover ul, #nav26 li:hover li:hover li:hover li:hover li:hover ul{left:90px; top:-4px; background: #61895B; padding:3px; border:1px solid #34672B; white-space:nowrap; width:90px; z-index:1090; height:auto;}
#nav26 li:hover li:hover a.fly, #nav26 li:hover li:hover li:hover a.fly, #nav26 li:hover li:hover li:hover li:hover a.fly, #nav26 li:hover li:hover li:hover li:hover li:hover a.fly{background:#34672B url(../jquery/plugins/pro_dropdown_2/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav26 ul, #nav26 li:hover ul ul, #nav26 li:hover li:hover ul ul, #nav26 li:hover li:hover li:hover ul ul, #nav26 li:hover li:hover li:hover li:hover ul ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav26 li:hover li:hover li a.fly, #nav26 li:hover li:hover li:hover li a.fly, #nav26 li:hover li:hover li:hover li:hover li a.fly{background:#61895B url(../jquery/plugins/pro_dropdown_2/arrow.gif) 80px 6px no-repeat; color:#000000; border-color:#61895B;}
 
/*These styles effect the list containers*/
#nav_div{width:775px; z-index:1050; text-align:center; margin:0 auto;}
.del_nav{display:inline-block; text-decoration:none;}
 
<!--[if lte IE 7]>
.del_nav {display:inline-block;}
<!--[endif]-->
 
HTML:
<div id="nav_div">
<del class="del_nav">
<ul id="nav26" class="toplevel">
	<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
	<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
		<ul class="sub">
			<li><a href="#nogo3" class="fly">Cameras</a>
					<ul>
 
						<li><a href="#nogo4">Nikon</a></li>
						<li><a href="#nogo5">Minolta</a></li>
						<li><a href="#nogo6">Pentax</a></li>
					</ul>
			</li>
			<li><a href="#nogo7" class="fly">Lenses</a>
					<ul>
 
						<li><a href="#nogo8">Wide Angle</a></li>
						<li><a href="#nogo9">Standard</a></li>
						<li><a href="#nogo10">Telephoto</a></li>
						<li><a href="#nogo11" class="fly">Zoom</a>
							<ul>
								<li><a href="#nogo12">35mm to 125mm</a></li>
 
								<li><a href="#nogo13">50mm to 250mm</a></li>
								<li><a href="#nogo14">125mm to 500mm</a></li>
							</ul>
						</li>
						<li><a href="#nogo15">Mirror</a></li>
						<li><a href="#nogo16" class="fly">Non standard</a>
							<ul>
 
								<li><a href="#nogo17">Bayonet mount</a></li>
								<li><a href="#nogo18">Screw mount</a></li>
							</ul>
						</li>
					</ul>
			</li>
			<li><a href="#nogo19">Flash Guns</a></li>
 
			<li><a href="#nogo20">Tripods</a></li>
			<li><a href="#nogo21">Filters</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
		<ul class="sub">
			<li><a href="#nogo23">Printing</a></li>
 
			<li><a href="#nogo24">Photo Framing</a></li>
			<li><a href="#nogo25">Retouching</a></li>
			<li><a href="#nogo26">Archiving</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
		<ul class="sub">
 
			<li><a href="#nogo28">Support</a></li>
			<li><a href="#nogo29" class="fly">Sales</a>
				<ul>
					<li><a href="#nogo30">USA</a></li>
					<li><a href="#nogo31">Canadian</a></li>
					<li><a href="#nogo32">South American</a></li>
 
					<li><a href="#nogo33" class="fly">European</a>
						<ul>
							<li><a href="#nogo34" class="fly">British</a>
								<ul>
									<li><a href="#nogo35">London</a></li>
									<li><a href="#nogo36">Liverpool</a></li>
									<li><a href="#nogo37">Glasgow</a></li>
 
									<li><a href="#nogo38" class="fly">Bristol</a>
										<ul>
											<li><a href="#nogo39">Redland</a></li>
											<li><a href="#nogo40">Hanham</a></li>
											<li><a href="#nogo41">Eastville</a></li>
										</ul>
									</li>
 
									<li><a href="#nogo42">Cardiff</a></li>
									<li><a href="#nogo43">Belfast</a></li>
								</ul>
							</li>
							<li><a href="#nogo44">French</a></li>
							<li><a href="#nogo45">German</a></li>
							<li><a href="#nogo46">Spanish</a></li>
 
						</ul>
					</li>
					<li><a href="#nogo47">Australian</a></li>
					<li><a href="#nogo48">Asian</a></li>
				</ul>
			</li>
			<li><a href="#nogo49">Buying</a></li>
 
			<li><a href="#nogo50">Photographers</a></li>
			<li><a href="#nogo51">Stockist</a></li>
			<li><a href="#nogo52">General</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
		<ul class="sub">
 
			<li><a href="#nogo54">Online</a></li>
			<li><a href="#nogo55">Catalogue</a></li>
			<li><a href="#nogo56">Mail Order</a></li>
		</ul>
	</li>
	<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</del>
</div>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 5 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros