How can I get the text within this div to center?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • bigguyjoe
    New Member
    • Jun 2010
    • 2

    #1

    How can I get the text within this div to center?

    I am using modx to create a site at www.mmwri.com.
    The navigation is dynamically generated by Wayfinder. I am trying to style the text with the navigation div. I can make it look fine in any Mac browser but the spacing overflows the navigation to a second line in Windows Browsers. Any input would be appreciated. Thanks!

    Here is the CSS:
    Code:
    #navigation		{	 background-color: white; width: 800px;   display:block;
    
    					height:40px;  padding-bottom:10px;  margin-left: auto; margin-right: auto; }
    					
    #navigation ul	{	margin: 0; padding: 10px 0 0 0;  list-style:none;  }
    
    #navigation	li	{	display:block; float:left; padding: 0 15px; text-align: center;
    					border-right: 2px solid #00266D;  margin-left: auto; margin-right: auto; }
    					
    #navigation li.last	{	border-right: none; padding-right:0; margin-right:0;	}	
    
    #navigation a	{	color:#09003A; font-family: Arial Narrow; 
    					font-size:20px;text-decoration:none; }
    #navigation a:hover {text-decoration: underline; color: black; }
  • JKing
    Recognized Expert Top Contributor
    • Jun 2007
    • 1206

    #2
    I made a few edits to the following lines.
    Give it a try.

    Code:
    #navigation ul    {    margin: 0; padding: 10px 0 0 0;  list-style:none; text-align:center; }
     
    #navigation    li    {    display:inline; padding: 0 15px; text-align: center;
                        border-right: 2px solid #00266D;  margin-left: auto; margin-right: auto; }

    Comment

    • bigguyjoe
      New Member
      • Jun 2010
      • 2

      #3
      Awesome, seems to work well. Thanks so much.

      Comment

      Working...