...

View Full Version : Left floating column not aligning



jaYKay
10-19-2009, 06:20 PM
I have this CSS -



.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 -



<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

abduraooft
10-19-2009, 06:28 PM
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?

jaYKay
10-19-2009, 06:36 PM
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

met
10-19-2009, 06:45 PM
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.

jaYKay
10-19-2009, 07:08 PM
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?

jaYKay
10-19-2009, 07:13 PM
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.

jaYKay
10-20-2009, 09:42 AM
Can someone test this code for me.... this is driving me mad! :mad:



<%@ 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



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;
}

abduraooft
10-20-2009, 09:50 AM
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 (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug))

jaYKay
10-20-2009, 09:53 AM
Sure ok here it is -




<!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="/wEPDwUKLTYzNzA0MTUxNGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgMFEUxvZ2luMSRSZW1lbWJlck1lBRdMb 2dpbjEkTG9naW5JbWFnZUJ1dHRvbgUNaW1nYnRuQ29udGFjdIRSCLv+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.

abduraooft
10-20-2009, 10:15 AM
Sure ok here it is -
Now, the CSS in your OP doesn't match with the above html :confused:

jaYKay
10-20-2009, 10:21 AM
Now, the CSS in your OP doesn't match with the above html :confused:

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. :o

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?

jaYKay
10-20-2009, 11:27 AM
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?

jaYKay
10-20-2009, 11:44 AM
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" />

SB65
10-20-2009, 11:53 AM
Apparently it is bug with IE8 and centre align

Have you a link to more info on this?

jaYKay
10-20-2009, 12:04 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum