Chateau – Safari problem

• 

  fartacus10 · Member · Jun 16, 2012 at 9:24 pm

  • Copy link
  • Add topic to favorites

  I’ve added the following code to my CSS to move the navigation menu below the header of my site:

  #menu {
  	position:absolute;
  	width:960px;
  	top:290px;
  	text-align:center;
  }
  
  #menu ul {
  	display:inline-block;
  }
  
  #branding {
  	padding-bottom:80px;
  }

  If works fine in Chrome, but in Safari and Firefox, the menu is placed over the first line of page content.
  Any idea how to move the nav menu below the header so that it works across all browsers?

  Thanks –
  Mike

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jun 17, 2012 at 11:05 pm

  • Copy link

  I think you’ll get a more consistent result if you make the absolute positioning for the #menu work relative to the #branding, like this:

  #branding {
  	position: relative;
  	padding-bottom:100px;
  }
  #menu {
  	position:absolute;
  	width:960px;
  	bottom:0;
  	text-align:center;
  	padding: 0;
  	margin: 0;
  	height: 30px;
  }

  Adjust the padding-bottom value to move the menu.

  I love what you’ve done with the Chateau theme. Hopefully, it will make things a little less obscurely misanthropic and a little more optimistically conspicuous. :)

• 

  fartacus10 · Member · Jun 18, 2012 at 2:58 am

  • Copy link

  Thanks, works like a champ!

  Any idea how to pull the dead space out from below the header so that menu fits snugly underneath?

  And thanks for the compliment. It’s taken me forever to figure out what little I’ve done.

• 

  fartacus10 · Member · Jun 18, 2012 at 8:03 pm

  • Copy link

  Ah… you already gave me the answer. Mission accomplished. Much gratitude.