CSS Alignment Issue - please help

BuffyKicksButt · 18th August 12, 03:57 PM

Hello,

I need some assistance with getting my CSS to align properly. I am using an ASPX Master page. The misaligned code is the LoginView portion of the header. Code is attached along with the CSS. I know it is something in the CSS that is doing it - I just can't figure out what. Hoping someone can help me save whats left of my hair

Before Login: Buttons look appropriate
After Login: Welcome Text & Links are too low - falling underneath the nav bar

ASPX Code (Master Page):

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head runat="server"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 
    <title>Farms 4 Lease</title> 
    <!--[if lt IE 9]><script type="text/javascript" src="js/ie9.js">IE7_PNG_SUFFIX=".png";</script><![endif]--> 
    <link rel="shortcut icon" href="/favicon.ico" /> 
    <link rel="stylesheet" type="text/css" href="~/Styles/style.css" /> 
 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder> 
</head> 
<body> 
     <form id="Form1" runat="server"> 
    <ajaxToolkit:ToolkitScriptManager ID="scriptMgr" runat="server"> 
    </ajaxToolkit:ToolkitScriptManager> 
     <div class="wraper"> 
     <!-- header --> 
     <div class="header"> 
      <a class="logo" href="Default.aspx">farms4lease</a> 
 
      <ul> 
       <li><a href="Default.aspx">HOME</a> 
        <ul> 
            <li><a href="HowItWorks.aspx">How it works</a></li> 
            <li><a href="GeneralTerms.aspx">Terms &amp; Conditions</a></li> 
        </ul> 
       </li> 
       <asp:Literal ID="ltlMyAuctions" runat="server"></asp:Literal> 
       <li><a href="Owners.aspx">LANDOWNERS</a> 
            <ul> 
            <li><a href="OwnerSetup.aspx">Set Up Account</a></li> 
            <li><a href="OwnerFAQ.aspx">Frequently Asked Questions</a></li> 
            <li><a href="OwnerTerms.aspx">Terms &amp; Conditions</a></li> 
        </ul> 
       </li> 
       <li><a href="Bidders.aspx">BIDDERS</a> 
       <ul> 
            <li><a href="BidderSetup.aspx">Set Up Account</a></li> 
            <li><a href="BidderFAQ.aspx">Frequently Asked Questions</a></li> 
            <li><a href="BidderTerms.aspx">Terms &amp; Conditions</a></li> 
        </ul> 
        </li> 
       <li><a href="#">FARMS 4 SALE</a></li> 
      </ul> 
        <div class="loginDisplay"> 
                    <asp:LoginView ID="LoginView1" runat="server" EnableViewState="false"> 
                        <AnonymousTemplate> 
                            <div class="buttons"> 
                              <a href="Account/Login.aspx">LANDOWNER LOGIN</a><a href="Account/Login.aspx">BIDDER LOGIN</a> 
                            </div> 
                        </AnonymousTemplate> 
                        <LoggedInTemplate> 
                            <div class="loggedIn"> 
                            Welcome <asp:LoginName ID="HeadLoginName" runat="server" />! &nbsp;&nbsp;<a href="/Account/Profile.aspx" class="loggedIn2">My Profile</a> 
                            [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="./"  CssClass="loggedIn2" /> ] 
                            </div> 
                        </LoggedInTemplate> 
                    </asp:LoginView> 
      </div> 
     </div> 
     <!-- /header --> 
     <!-- content --> 
     <div class="content_block"> 
      <!-- left column --> 
      <div class="left_column"> 
       
         <div class="leftColumnContent"> 
             <asp:ContentPlaceHolder ID="MainContent" runat="server"/> 
         </div> 
 
 
       <!-- footer --> 
       <div class="footer"> 
        <ul> 
         <li><a href="AboutUs.aspx">About Us</a></li> 
         <li><a href="CustomerService.aspx">Customer Service</a></li> 
         <li><a href="ContactUs.aspx">Contact Us</a></li> 
         <li><a href="Advertise.aspx">Advertise</a></li> 
        </ul> 
       </div> 
       <!-- /footer --> 
      </div> 
      <!-- /left column --> 
      <!-- right column --> 
      <div class="right_column"> 
       
          <asp:ContentPlaceHolder ID="RightPanelContent" runat="server"/> 
 
      </div> 
          
     </div> 
    </div> 
 
    </form> 
 
</body> 
</html>

CSS:

Code:

/* CSS Document */ 
body {height:100%;font:14px 'Trebuchet MS', Arial, Tahoma, Verdana, Sans-Serif;color:#414142;background:#fff;} 
div, html, body, p, ul, ol, li, a, form, img, table, td, h1, h2, h3, h4, h5, h6, blockquote, header, section, footer, aside, nav, article, figure, figcaption {margin:0;}  
header, section, footer, aside, nav, article, figure, figcaption {display: block;} 
table {border-collapse:collapse;} 
img {border:none;} 
ul, li {list-style:none;} 
a, a:active, a:visited {text-decoration:none;color:#414142;} 
a:hover {text-decoration:none;color:#414142;} 
input:focus, textarea:focus {outline:none;} 
h1, h2, h3, h4, h5, h6 {margin-top: 0em;margin-bottom: 20px;} 
 
/*  All  */ 
.wraper {width:960px;margin:0 auto;} 
.content_block:after {content:'';clear:both;display:block;height:0;} 
 
/* header */ 
.header {position:relative;padding:160px 0 0 0;min-height:43px;border-bottom:2px solid #bdc48d;background:#899f3b url(../images/header.jpg) center top no-repeat; z-index:2;} 
.header .logo {position:absolute;top:18px;left:28px;display:block;width:385px;height:137px;background:url(../images/logo.png) no-repeat;text-indent:-999px;} 
.header ul {position:relative;padding-left:28px; height:46px;} 
.header ul li {float:left;height:46px;font-weight:bold;font-size:14px;color:#fff;padding:14px 0 0 0;text-transform:uppercase;} 
.header ul li ul{display:none;padding:0;} 
.header ul li:hover ul{display:block; position:absolute; top:48px; padding:0; margin-left:-22px;} 
.header ul li:first-child:hover ul{margin-left:-28px;} 
.header ul li:hover ul li{font-size:13px; text-transform:none; padding:0; height:auto; border-bottom:1px solid #D9DCCB;} 
.header ul li:hover ul li:last-child{border:none;} 
.header ul li:hover ul li:after{content:''; padding:0;} 
.header ul li:hover ul li a{ display:block; padding:5px 5px; background-color:#899F3B;} 
.header ul li:hover ul li a:hover{background-color:#D9DCCB; color:#000;} 
.header ul li ul li{float:none;} 
.header ul li:after {content:'|';padding:0 19px;} 
.header ul li:last-child:after {display:none;} 
.header ul li a, .header ul li a:visited {color:#fff;} 
.header .buttons {position:absolute;top:165px;right:3px;font-weight:bold;} 
.header .buttons a, .header .buttons a:visited {display:block;width:145px;height:23px;padding-top:7px;margin-right:10px;text-align:center;border:1px solid #d4d6d7;float:left;background:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;behavior: url(../Styles/PIE.htc);position:relative;} 
 
.header .loggedIn {float:right;font-size:13px;color:#fff;padding:14px 0 0 0;} 
.header .loggedIn2 {color:#fff;} 
.header .loggedIn .loggedIn2 a:hover {color: #000;}

BuffyKicksButt · 18th August 12, 04:47 PM

Solved:

Set max-width for your main ul element (you page width - max loginDisplay width - a pixel or two). Put loginDisplay in front of main ul element. Set loginDisplay to float:right.

18th August 12, 04:47 PM	#2
BuffyKicksButt WLC Member Join Date: Aug 2012 Posts: 2	Re: CSS Alignment Issue - please help Solved: Set max-width for your main ul element (you page width - max loginDisplay width - a pixel or two). Put loginDisplay in front of main ul element. Set loginDisplay to float:right.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode