Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Left floating column not aligning

    I have this CSS -

    Code:
    	.titleDiv
    {
    	text-align: center;
    	position: relative;
    	font-family: Arial Black;
    	font-size: 40pt;
    	color: #FFCECE;
    	margin-bottom:20px;
    }
    
    
    	.ColDivLeft
    {
    	position:relative;
    	float: left;
    	text-align:right;
    	height:350px;
    	width:565px;
    }
    
    	.ColDivRight
    {
    	position:relative;
    	float: right;
    	text-align:left;
    	height:350px;
    	width:425px;
    }
    And this HTML -

    Code:
     <div class ="titleDiv" >
       
    	Some Text
       
     </div>
       
     <div class = "ColDivLeft"> 
    	<br />
    	<br />
          
    	<asp: ASP Login Control />
    
      
     </div>
        
     <div class = "ColDivRight">
       
           <asp:Image ID="Image1" runat="server"/>
       
     </div>
    all of the Dividers are in a divider of 990px in width, therefore the two floating divs fit perfectly under the title div. I then want the two controls, a image in the right div and a login control in the left div to meet in the middle, so the login control is aligned right and the image left. In my designer it looks perfect, but when run the login control is aligned to the left of the div.

    Any suggestions or alternatives to achieve what I want?

    Here are images of what I mean.

    in my designer -
    http://img237.imageshack.us/img237/3472/designeri.png

    in runtime -
    http://img243.imageshack.us/img243/6166/runtime.png
    Last edited by jaYKay; 10-19-2009 at 05:34 PM. Reason: added image links

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    In my designer it looks perfect, but when run the login control is aligned to the left of the div.

    Any suggestions or alternatives to achieve what I want?
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Could you post a link to your page?

    Sorry it is not live yet, but here are some screenshots -

    in my designer -
    http://img237.imageshack.us/img237/3472/designeri.png

    in runtime -
    http://img243.imageshack.us/img243/6166/runtime.png

  • #4
    met
    met is offline
    Regular Coder
    Join Date
    Oct 2009
    Location
    United Kingdom
    Posts
    728
    Thanks
    4
    Thanked 119 Times in 119 Posts
    wheres the container div?

    I was able to recreate the problem you described with the code you provided, but by adding a container div of width:990 the problem was resolved.

    post all your code.

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by met View Post
    wheres the container div?

    I was able to recreate the problem you described with the code you provided, but by adding a container div of width:990 the problem was resolved.

    post all your code.
    I have CSS applied to the form element of the page with a width of 990px. I have tried what you said and put a div around the two floating divs with a width of 990px too, but I still get the same issue. Where is your 990 div positioned?
    Last edited by jaYKay; 10-19-2009 at 06:11 PM.

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    It seems to be an issue with the login control itself......

    If I add a simple button control to the Left Div it positions inself correctly, aligned to the right.
    If I removed the two floating divs and just use the one center aligned div the login control still renders to the left of the div!!

    Has any one else had this problem with the ASP.net 2.0 security controls? They all seem to do it, including forgotten password and change password controls too.
    Last edited by jaYKay; 10-19-2009 at 08:25 PM.

  • #7
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Can someone test this code for me.... this is driving me mad!

    Code:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="LogIn.aspx.vb" Inherits="LogIn" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    
    <title></title>
        
        <link href="MainStyles.css" rel="stylesheet" type="text/css" />
          
    </head>
    <body>
    
       <form id="Form1" runat="server" class="content">
       
             
       <div class ="titleDiv" >
       
       Client Area Login
       
       </div>
          
          
      <div class="mainDiv">
       
      
          
        <asp:Login ID="Login1" runat="server" Font-Names="Verdana" Font-Size="Large" 
               ForeColor="#333333" Height="215px" 
               PasswordRecoveryText="Forgot Password?" 
               PasswordRecoveryUrl="~/ForgotPassword.aspx" Width="356px" TitleText="" 
               EnableTheming="True">
               <CheckBoxStyle HorizontalAlign="Center" />
               <TextBoxStyle Font-Size="Medium" />
               <LoginButtonStyle BackColor="#CCCCCC" BorderColor="#CCCCCC" BorderStyle="Solid" 
                   BorderWidth="1px" Font-Names="Verdana" Font-Size="Medium" ForeColor="Black" />
               <InstructionTextStyle Font-Italic="True" ForeColor="Black" 
                   HorizontalAlign="Center" />
               <LabelStyle HorizontalAlign="Right" />
               <FailureTextStyle HorizontalAlign="Center" />
               <TitleTextStyle HorizontalAlign="Center" />
               <HyperLinkStyle HorizontalAlign="Center" />
       </asp:Login>
    
       <br />
          
       
       
       </div> 
      
      <div class ="footerButtons" >
        <asp:ImageButton ID="imgbtnContact" runat="server" ImageUrl="~/Images/ContactMe.png" />
      </div>
      
        <br /> 
                
        <div class="footer">
            <hr />
            © 2009 All rights reserved.  
        </div>
        
        </form>
    </body>
    </html>
    Using CSS Sheet , MainStyles.css

    Code:
       body
    {
     background-image: url('Images/mypic.png');
    }
    
    
     .content 
    {
     background-color: White;
     margin: auto auto auto;
     margin-top: 14px;
     width: 992px;
     position: relative;
    } 
    
    
     .mainDiv
    {
     text-align:center;
     position:relative; 
     border-color:Red;
     border-style:solid;
     border-width:1px;
     z-Index:0;
    }
    
    
     .footerButtons
    {
     text-align:center;
     position:relative; 
     margin-top: -20px;
     z-Index:1;
     top: 0px;
     left: 0px;
    }
    
    
     .footer
    {
     text-align:center; 
     font-family: Verdana; 
     font-size: x-small; 
     color: #C0C0C0; 
    
    }
    
    
     .titleDiv
    {
     border-color:Red;
     border-style:solid;
     border-width:1px;
     text-align: center;
     position: relative;
     font-family: Arial Black;
     font-size: 40pt;
     color: #FFCECE;
    }
    Last edited by jaYKay; 10-20-2009 at 08:46 AM.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can someone test this code for me.... this is driving me mad!
    Please post the parsed HTML output taken from browser's view source option.

    btw, you don't need to apply floats on both columns to get a 2 column layout. Refer http://www.bonrouge.com/2c-hf-fixed.php (Your issue might be the box model bug)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Sure ok here it is -
    Code:
     
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1"><title>
     
    </title><link href="MainStyles.css" rel="stylesheet" type="text/css" /></head>
    <body>
     
       <form name="Form1" method="post" action="LogIn.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="Form1" class="content">
    <div>
    <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
    <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTYzNzA0MTUxNGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgMFEUxvZ2luMSRSZW1lbWJlck1lBRdMb2dpbjEkTG9naW5JbWFnZUJ1dHRvbgUNaW1nYnRuQ29udGFjdIRSCLv+4ZLy4XP55GhyD9oYxGx4" />
    </div>
     
    <script type="text/javascript"> 
    //<![CDATA[
    var theForm = document.forms['Form1'];
    if (!theForm) {
        theForm = document.Form1;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
            theForm.submit();
        }
    }
    //]]>
    </script>
     
     
    <script src="/RedGecko/WebResource.axd?d=ob8XmGFnq2f8IBbhwKRwqw2&amp;t=633802693995006876" type="text/javascript"></script>
     
     
    <script src="/RedGecko/WebResource.axd?d=1wPv6TKUt60m9ZFc2LLqz7SHG9MlHtNcIc5UkyHb1ts1&amp;t=633802693995006876" type="text/javascript"></script>
    <script type="text/javascript"> 
    //<![CDATA[
    function WebForm_OnSubmit() {
    if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
    return true;
    }
    //]]>
    </script>
     
    <div>
     
    	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLh+anUBQKUvNa1DwL666vYDAKC0q+kBgKnz4ybCAL50qKgDTA8nZ9ExF5MLTC+opAEVSSVXBY5" />
    </div>
       
             
       <div class ="titleDiv" >
       
       Client Area Login
       
       </div>
          
          
      <div class="mainDiv">
       
      
          
        <table cellspacing="0" cellpadding="1" border="0" id="Login1" style="border-collapse:collapse;">
    	<tr>
    		<td><table cellpadding="0" border="0" style="color:#333333;font-family:Verdana;font-size:Large;height:215px;width:356px;">
    			<tr>
    				<td align="right"><label for="Login1_UserName">User Name:</label></td><td><input name="Login1$UserName" type="text" id="Login1_UserName" style="font-size:Medium;" /><span id="Login1_UserNameRequired" title="User Name is required." style="color:Red;visibility:hidden;">*</span></td>
    			</tr><tr>
    				<td align="right"><label for="Login1_Password">Password:</label></td><td><input name="Login1$Password" type="password" id="Login1_Password" style="font-size:Medium;" /><span id="Login1_PasswordRequired" title="Password is required." style="color:Red;visibility:hidden;">*</span></td>
    			</tr><tr>
    				<td align="center" colspan="2"><input id="Login1_RememberMe" type="checkbox" name="Login1$RememberMe" /><label for="Login1_RememberMe">Remember me next time.</label></td>
    			</tr><tr>
    				<td align="right" colspan="2"><input type="submit" name="Login1$LoginButton" value="Log In" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;Login1$LoginButton&quot;, &quot;&quot;, true, &quot;Login1&quot;, &quot;&quot;, false, false))" id="Login1_LoginButton" style="color:Black;background-color:#CCCCCC;border-color:#CCCCCC;border-width:1px;border-style:Solid;font-family:Verdana;font-size:Medium;" /></td>
    			</tr><tr>
    				<td align="center" colspan="2"><a id="Login1_PasswordRecoveryLink" href="ForgotPassword.aspx">Forgot Password?</a></td>
    			</tr>
    		</table></td>
    	</tr>
    </table>
     
       <br />
          
       
       
       </div> 
      
      <div class ="footerButtons" >
        <input type="image" name="imgbtnContact" id="imgbtnContact" src="Images/ContactMe.png" style="border-width:0px;" />
      </div>
      
        <br /> 
                
        <div class="footer">
            <hr />
            © 2009 Red Gecko UK. All rights reserved.  
        </div>
        
        
    <script type="text/javascript"> 
    //<![CDATA[
    var Page_Validators =  new Array(document.getElementById("Login1_UserNameRequired"), document.getElementById("Login1_PasswordRequired"));
    //]]>
    </script>
     
    <script type="text/javascript"> 
    //<![CDATA[
    var Login1_UserNameRequired = document.all ? document.all["Login1_UserNameRequired"] : document.getElementById("Login1_UserNameRequired");
    Login1_UserNameRequired.controltovalidate = "Login1_UserName";
    Login1_UserNameRequired.errormessage = "User Name is required.";
    Login1_UserNameRequired.validationGroup = "Login1";
    Login1_UserNameRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
    Login1_UserNameRequired.initialvalue = "";
    var Login1_PasswordRequired = document.all ? document.all["Login1_PasswordRequired"] : document.getElementById("Login1_PasswordRequired");
    Login1_PasswordRequired.controltovalidate = "Login1_Password";
    Login1_PasswordRequired.errormessage = "Password is required.";
    Login1_PasswordRequired.validationGroup = "Login1";
    Login1_PasswordRequired.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
    Login1_PasswordRequired.initialvalue = "";
    //]]>
    </script>
     
     
    <script type="text/javascript"> 
    //<![CDATA[
     
    var Page_ValidationActive = false;
    if (typeof(ValidatorOnLoad) == "function") {
        ValidatorOnLoad();
    }
     
    function ValidatorOnSubmit() {
        if (Page_ValidationActive) {
            return ValidatorCommonOnSubmit();
        }
        else {
            return true;
        }
    }
            //]]>
    </script>
    </form>
    </body>
    </html>
    Like I said before, it is not actually related to the floating divs, as in these code examples I am just using a standard center aligned div. It seems to be the login control itself, I have just noticed looking at the parsed code that that control is actually made up of table rows. Would that have anything to do with the problem perhaps?

    Thanks.
    Last edited by jaYKay; 10-20-2009 at 09:02 AM.

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Sure ok here it is -
    Now, the CSS in your OP doesn't match with the above html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Now, the CSS in your OP doesn't match with the above html
    My original post was looking at floating dividers, as I thought that was the issue, since then I have discovered it's nothing to do with those divs and it is the login control itself (all ASP.net 2.0 login security controls for that matter). I came to this conclusion as when I remove the divs and just use a standard center aligned div, the login control still aligns to the left. When I add a simple button to the div the button is centered.

    The HTML the parsed code is relating to is POST 7.

    Sorry about the confusion.

    I have noticed looking at the parsed code that that control is actually made up of table rows. Would that have anything to do with the problem perhaps?

  • #12
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Just realised if I switch to compatability mode (I'm using IE8) it displays correctly. So at least I know it is an IE8 issue now.

    Any ideas on a work around?

  • #13
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Apparently it is bug with IE8 and centre align that has not been fixed yet and the only work around I can find is adding this to each page.

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Apparently it is bug with IE8 and centre align
    Have you a link to more info on this?

  • #15
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    There is not a statement from MS accepting it as a bug, in fact they say text-align: center; in IE8 should work fine. But doing a quick google shows that the online community across several sites says otherwise.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •