...

View Full Version : Login Box, Top of header positioning



jayemvee
01-27-2007, 08:53 PM
I would like to add either a "If you already have an application Sign In" Or a simple login at the top. Floating it right and giving it margin-top seems to work in everything but IE ( haven't checked 7 ) Here's my approach what should i modify

XHTML



<div id="header">
<div id="login">Login Goes Here</div>
<div id="nav_container">
<ul id="nav">
<li id="nhome"><a class="selected" href="#">Home</a></li>
<li id="npurch"><a href="#">Home Purchase</a></li>
<li id="nrefi"><a href="#">Refinance</a></li>
<li id="nequity"><a href="#">Equity</a></li>
<li id="nbeta"><a href="#">Beta</a></li>
</ul>
</div>
</div><!--end header-->



Here's the pertaining CSS..




#header{
width:800px;
height: 120px;
background: url(../images/header_BG.jpg) no-repeat;
}

#login{
float:right;
margin-top: 45px;
margin-right: 10px;
}
#nav_container {padding-top: 90px; padding-left: 20px;}
#nav {margin: 0; padding: 0;height: 30px;list-style: none;display: inline;overflow: hidden; border:none;}
#nav li {margin: 0;padding: 0; list-style: none;display: inline;}
#nav a {float: left;padding: 30px 0 0 0;overflow: hidden; border:none; height: 0px !important; height /**/:30px;}
#nav a:hover {background-position: 0 -30px;}
#nav a.selected {background-position: 0 -60px;}
#nhome a { width: 72px; background: url(../images/TAB_home.jpg) top left no-repeat;}/*the other tabs follow suit*/




The tabbing goes across the bottom of the header... In IE it displays all the tabs properly except the #login pushes all the tabs on the left side down... I understand what is causing it, I am unsure how to fix, or a better way to mark it up..

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum