1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to Center a UL menu with unknown width?

Discussion in 'CSS' started by wd_2k6, Aug 31, 2009.

0
  1. #1
    Hi,

    OK when we know the width it's as simple as adding margin: 0 auto;

    But i've come accross a problem where i'm just adding padding, therefore the overall size of the menu is unknown.

    So how do we go about centering it. For example I was doing the following:

    
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
#menuWrap{
	background:pink;
	text-align:center; /*Centers the Menu*/
}
ul { 
	margin:0; padding:0; /*Reset Defaults*/
	display:inline-block; /*Centering Method*/
}
li {
	margin:0; padding:0; /*Reset Defaults*/
	display:inline; /*Also Removes Bullets*/
}
li a { 
	float:left; /*Triggers Display Block*/
	padding: 14px;
	border:2px solid #000;
	background:#ccc;
}
</style>
</head>

<body>
<div id="menuWrap">
	<ul>
		<li><a href="#">Link 1</a></li>
		<li><a href="#">Link 2</a></li>
		<li><a href="#">Link 3</a></li>
	</ul>
</div>
</body>
</html>
    Code (markup):
    This works fine in IE8 and the latest FF, but it doesn't center it in IE 7 or less? Any ideas?
     
    wd_2k6, Aug 31, 2009 IP
  2. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Also won't work in old FF (2 or K-meleon) but screw those nasty old browsers.

    IE likely needs you to add a special line for it:

    ul {
    display: inline;
    }

    because it doesn't support inline-block on native blocks without that statement. inline-block on native inlines is no problem. Since a ul is a block, you'll need that, and I usually do it like this

    
#menuWrap{
	background:pink;
	text-align:center; /*Centers the Menu*/
}
ul { 
	margin:0; padding:0; /*Reset Defaults*/
	display:inline-block; /*Centering Method*/
}
* html ul {display: inline;}
*+html ul {display: inline;}
    Code (markup):
    should work. You can also do it in an IE-only stylesheet if you don't like pollution in your main stylesheet.
     
    Stomme poes, Sep 1, 2009 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    Thanks for the reply.

    It does indeed work, i'm guessing *html targets pre IE7, and *+html targets IE7?

    Would you use this method for centering a the menu? The only current problem is that it doesn't work in FF2 and some other old browsers as you mentioned.
     
    wd_2k6, Sep 3, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I have used it. http://stommepoes.nl/Brandweer/brandweer3.html top menu. CSS is same address but brandweer3.css (cause there's a 1-5 in there I think lawlz)

    * html with the space between the * and html is the familiar IE6 hack. I know you've seen and used it before!

    the IE7 one is no spaces: *+html though on the googles there's another one floating around with like *first-child: html or some weird thing. Too much to type : )

    You can also just use an IE Conditional Comment with IE styles or whatever. I like to keep my hacks in my single CSS file myself.

    You can get FF2/K-Meleon to work with
    display: -moz-inline-box;
    not block, but "box". There's also a -moz-inline-block but they are different from each other and neither of them truly work like the real inline-block : (

    Also because you are using inline-block know that like other inlines, whitespace in your code will make real whitespace on the page, just like with text. So you can either make like a negative margin like Gary does or you can wrap your closing tags in the HTML:

    <ul>
    <li>blah blhja blha blha <li
    ><li>blah blahb blahjb <li
    ><li>blah blahb blah<li
    ></ul>
     
    Stomme poes, Sep 4, 2009 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Gah, overthinking this much? Lose the unneccessary wrapping div, the UL is already block level so you don't need that. Display:inline on li does NOT hide bullets on all browsers, so turn them off PROPERLY, though we want the LI inline... and instead of making the UL inline-block make the ANCHORS inline-block.

    Oh, and as to the inline-block issue - for all browsers EXCEPT webkit, word-spacing can be used to get rid of it, then you can guesstimate with letter-spacing for webkit. (make sure you plan for if they overlap in source order on that)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<title>
	Centered Menu
</title>

<style type="text/css" media="screen,tv,projection">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

#menu { 
	list-style:none;
	word-spacing:-2em;
	letter-spacing:-0.4em;
	text-align:center;
	zoom:1; /* actually need zoom as we're tripping MORE than haslayout! */
	background:pink;
}
#menu li {
	display:inline;
	zoom:1;
	word-spacing:0;
	letter-spacing:0;
}

#menu a { 
	display:-moz-inline-block;
	display:-moz-inline-box;
	display:inline-block;
	padding:14px;
	border:solid #000;
	border-width:2px 0 2px 2px;
	background:#CCC;
}

#menu .last a {
	border-width:2px;
}
</style>

</head><body>

<ul id="menu">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a></li>
	<li class="last"><a href="#">Link 3</a></li>
</ul>

</body></html>
    Code (markup):
    Works 100% perfect in IE 6, 7 & 8, FF 2, 3 and 3.5, Opera 9.64 and 10, and is 'close enough' in webkit so as not to matter - in webkit (safari/chrome) they may overlap by a pixel or two depending on the font, so just remember the depth sorting order (hence the left border on all items hiding any overlap, with the right border only on the last item).

    Where I say you have to use zoom:1; - you HAVE to use zoom:1; - it seems to trip some sort of 'other' fix in the rendering apart from the haslayout that heights or widths do. The 'spaces' between elements re-appear if you try to use the holly hack where I used zoom - oh well.
     
    Last edited: Sep 4, 2009
    deathshadow, Sep 4, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6 
    
#menu a { 
	display:-moz-inline-block;
	display:-moz-inline-box;
    Code (markup):
    When I was in a position to see the differences between these two, the second one simply overrides the first one. So the -moz-inline-block is never seen by a moz browser (unless there's some strange version of someone like seamonkey who doesn't override??).


    I gave up on the word-spacing thing because of Saffy-Chrome. We shouldn't have to mutilate HTML to remove spacing but it let's us avoid zoom and stupid safari problems.
     
    Stomme poes, Sep 4, 2009 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    Strangely enough, 2.0 and many linux 'offshoots' only see the first one and don't know the second. It was 'renamed' inline-box for 2.0.14

    Though setting the first one also throws some sort of flag that prevents absolute positioning errors in it's children, even though it's overrided by -moz-inline-box. It doesn't come up as a problem THAT often, but I use the full version because it's less than 20 characters just to be 'sure' it works.

    I've also found omitting the first can cause regular inline-block not to work right in FF 3.5 - so that's probably a regression - NOT that it's inline-block ACTUALLY works right in the first place... Though at least it's behavior is better than Safari's ignoring word-spacing and paying attention to letter-spacing...
     
    deathshadow, Sep 4, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Yeah that's where I saw the differences:
    I needed someone to act like run-in (but as that doesn't exist anywhere I used inline-block instead : (
    but also it needed to do image replacement. -moz-inline-box worked correctly as far as, let me set a height and width and otherwise act like an inline, but it could not be the rel-po'd positioned ancestor of an abso-po'd child (instead the child went to the viewport/body).
    -moz-inline-block didn't know how to make the element have height and width like a block, but DID know how to be a positioned ancestor. Basically making the whole thing worthless to do in K-Meleon and FF2. Oh well, sucks for them. I ended up staying with -box so at least we had styled run-in text without logos sitting over them... if "alt" could be styled richly the whole image-replacement bs could have been scrapped.

    But anyway that's where I noticed I could have one or the other. Both FF2 and K-Meleon ignored whoever came first in my tests, and so since then I've just used -box in things like menus (seems to work ok on my page I linked to above but no I didn't check in freaky browsers like old seamonkeys and whatever... just K-Meleon and an old copy of FF2).
     
    Stomme poes, Sep 7, 2009 IP