Stromgren 1 Posted March 28, 2012 Report Share Posted March 28, 2012 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.. Quote Link to post Share on other sites
eTianbun 51 Posted March 28, 2012 Report Share Posted March 28, 2012 (edited) (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 Quote Link to post Share on other sites
Stromgren 1 Posted March 28, 2012 Author Report Share Posted March 28, 2012 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. Quote Link to post Share on other sites
dsonesuk 925 Posted March 28, 2012 Report Share Posted March 28, 2012 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. 1 Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.