Problems aligning dropdown menu

[Stromgren 1]

Hello. I have some problems aligning a new dropdown menu here: http://byvejen.dk/lb/transport The dropdown menu will show if you hover your mouse over the name in the top right corner.. Here's the code: Header:

#header {width:100%; height:45px; background-color:#20558a; margin:0; padding:0;}			#header .container {width:960px; height:45px; padding:0; margin:0px auto 0px auto;}			#header .container .columns {height:45px; text-align:left; padding:0; margin:0;}					#header .container .columns .logo {float:left; width:210px;}					#header .container .columns .nav {float:left; width:200px; height:45px;}							#header .container .columns .search {float:left; width:380px;}					#header .container .columns .profile {float:left; width:168px; height:45px; border-right:1px #f7f8f9 solid; border-right:1px #f7f8f9 solid;}		

Dropdown menu:

#jsddm {width:auto; padding:0; margin:0px auto 0px auto; text-align:center;} 	#jsddm li {list-style:none; font-size:14px; margin:0; padding:0;}		#jsddm li a {background:#20558a; text-decoration:none; color:#FFF; font-weight:bolder; white-space:nowrap; margin:0; padding:0;}		#jsddm li ul {float:right; width:168px; position:absolute; margin:9px 0px 0px 770px; padding:10px; visibility:hidden; border-right:1px #1b4875 solid; border-bottom:1px #1b4875 solid; border-left:1px #1b4875 solid; z-index:2; text-align:left; background: #9bafc2;}				#jsddm li ul li	{display:inline; float:none; z-index:2; font-size:14px; font-weight:lighter; background-repeat:no-repeat; padding-left:22px; background-color:#9bafc2;}				#jsddm li ul li a {background-color:inherit;}				#jsddm li ul li a:hover {color:#20558a;}				#jsddm li ul li.min_profil {float:left; font-size:18px; background-image:url(../images/16x16_icons/user.png); background-position:0px 3px; padding-bottom:10px;}				#jsddm li ul li.rediger_profil {background-image:url(../images/16x16_icons/user_edit.png);}				#jsddm li ul li.rediger_annoncer {background-image:url(../images/16x16_icons/application_edit.png);}				#jsddm li ul li.mine_udlejninger {background-image:url(../images/16x16_icons/application_side_expand.png);}				#jsddm li ul li.mine_bookinger {background-image:url(../images/16x16_icons/application_side_contract.png);}

And the HTML:

<div id="header">	<div class="container">		<div class="columns">			<div class="logo">				<h1><a href="http://byvejen.dk/lb/">LejeBasen.dk</a></h1>			</div>			<div class="nav">				<--content-->			</div>			<div class="search">				<--content-->			</div>			<div class="profile">				<ul id="jsddm">					<li><a href="#">Casper Strømgren</a>						<ul>							<li class="min_profil"><a href="#">Min profil</a></li>							<li class="rediger_profil"><a href="#">Rediger profil</a></li>							<li class="rediger_annoncer"><a href="#">Rediger annoncer</a></li>							<li class="mine_udlejninger"><a href="#">Mine udlejninger</a></li>							<li class="mine_bookinger"><a href="#">Mine bookinger</a></li>						</ul>					</li>				</ul>				</div>		</div>	</div></div>

Now theres two problems.. First of all the two borders to the right and the left on the "profile" div wont show up in the header. And secondly, the name (Here its Casper Strømgren) isn't centered right in the div. I really hope someone can help, this has been driving me crazy for hours now..

[eTianbun 51]

(1)The short-hand declaration for border should be in this order:

• width
• type
• color

The .profile selecector should be:

.profile{border-right: width type color} //There are even two border declarations there, remove one 

(2) add

text-align:center

to '#jsddm li a' selector. Give those a shot!

Edited March 28, 2012 by eTianbun

[Stromgren 1]

Thanks eTianbun It seems the name i centered right now.. But the border still wont show.I changed the .profile selector properties to this:

#header .container .columns .profile {float:left; width:168px; height:45px; border-right:1px solid #f7f8f9; border-left:1px solid #f7f8f9;} 

I need a border on both sides.

[dsonesuk 913]

The profile container is in a different location compared to website location, and remove jquery script from top of page and place between <head>...</head>, placing it there forces it into Quirks mode, causing IE especially to freak out, and go all over the place, more than it normal does. Now you have corrected declaration, and set it for RIGHT and LEFT it should work, clear cache and reload.