Databases
StackOverflow2013
Postsdbo
POCSS compatibility with different browsers
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS compatibility with different browsers
    primarykey
    data
    text
    <p>I have an Asp.Net create user wizard and trying to modify and arrange its labels to look same in every browser.</p> <p>Now the problem is it looks fine in chrome but it looks same in IE9 and Firefox.</p> <p>This is how it looks in chrome:</p> <p><img src="https://i.stack.imgur.com/YAmnC.png" alt="enter image description here"> </p> <p>When I get into inspect here it shows the element .style property on the right which has two elements ie <code>position:absolute</code> and Z-index:2 which makes everything scrap.</p> <p><img src="https://i.stack.imgur.com/n51BS.png" alt="enter image description here"></p> <p>Here come the problem with IE and firefox:</p> <p><img src="https://i.stack.imgur.com/H4bYi.png" alt="enter image description here"></p> <p>When it comes to firefox and IE it neglects everything: <img src="https://i.stack.imgur.com/x7rt4.png" alt="enter image description here"></p> <p>I have give the below properties in my css file as shown below but this works only for chrome so I would like to know how would I change it for IE and as well as Firefox</p> <pre><code>.signtbl { z-index:2; position:relative !important; } </code></pre> <p>This is my entire code for my control:</p> <pre><code>&lt;asp:CreateUserWizard ID="CreateUserWizard1" runat="server" DisableCreatedUser="True" MailDefinition-BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" MailDefinition-From="noreply@imgaid.com" LoginCreatedUser="False" MailDefinition-IsBodyHtml="True" MailDefinition-Priority="High" MailDefinition-Subject="Pending Activation"&gt; &lt;ContinueButtonStyle BorderStyle="None" CssClass="btn big" Font-Size="12px"/&gt; &lt;CreateUserButtonStyle CssClass="btn big" Height="30px" Width="125px" BorderStyle="None" Font-Size="12px" /&gt; &lt;MailDefinition BodyFileName="~/EmailTemplates/NewAccountTemplate.htm" From="noreply@xyz.com" IsBodyHtml="True" Priority="High" Subject="Pending Activation"&gt; &lt;/MailDefinition&gt; &lt;WizardSteps&gt; &lt;asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server"&gt; &lt;ContentTemplate&gt; &lt;table&gt; &lt;tr&gt; &lt;td align="right"&gt; &lt;asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName" CssClass="signtbl"&gt;User Name:&lt;/asp:Label&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID="UserName" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD" AutoCompleteType="Disabled"&gt;&lt;/asp:TextBox&gt; &lt;asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red"&gt;*&lt;/asp:RequiredFieldValidator&gt; &lt;div id="divUsernameAvailability" runat="server"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="right"&gt; &lt;asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password" CssClass="signtbl"&gt;Password:&lt;/asp:Label&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID="Password" runat="server" TextMode="Password" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"&gt;&lt;/asp:TextBox&gt; &lt;asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red"&gt;*&lt;/asp:RequiredFieldValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="right"&gt; &lt;asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword" CssClass="signtbl"&gt;Confirm Password:&lt;/asp:Label&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"&gt;&lt;/asp:TextBox&gt; &lt;asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword" ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red"&gt;*&lt;/asp:RequiredFieldValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="right"&gt; &lt;asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email" CssClass="signtbl"&gt;E-mail:&lt;/asp:Label&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID="Email" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"&gt;&lt;/asp:TextBox&gt; &lt;asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red"&gt;*&lt;/asp:RequiredFieldValidator&gt; &lt;div id="divEmailAvailability" runat="server"&gt;&lt;/div&gt; &lt;/td&gt; &lt;/tr&gt; &lt;%--&lt;tr&gt; &lt;td align="right"&gt; &lt;asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question" CssClass="signtbl"&gt;Security Question:&lt;/asp:Label&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID="Question" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"&gt;&lt;/asp:TextBox&gt; &lt;asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question" ErrorMessage="Security question is required." ToolTip="Security question is required." ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red"&gt;*&lt;/asp:RequiredFieldValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="right"&gt; &lt;asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer" CssClass="signtbl"&gt;Security Answer:&lt;/asp:Label&gt; &lt;/td&gt; &lt;td&gt; &lt;asp:TextBox ID="Answer" runat="server" BorderStyle="Solid" BorderWidth="1px" BorderColor="#0099CC" BackColor="#FAFFBD"&gt;&lt;/asp:TextBox&gt; &lt;asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer" ErrorMessage="Security answer is required." ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1" CssClass="signupvalidators" ForeColor="Red"&gt;*&lt;/asp:RequiredFieldValidator&gt; &lt;/td&gt; &lt;/tr&gt;--%&gt; &lt;tr&gt; &lt;td align="center" colspan="2"&gt; &lt;asp:RegularExpressionValidator ID="UsernameLength" runat="server" ErrorMessage="Username should be minimum 5-10 characters." ControlToValidate="UserName" Display="Dynamic" ForeColor="Red" ValidationExpression="^[\s\S]{5,10}$" ValidationGroup="CreateUserWizard1"&gt;&lt;/asp:RegularExpressionValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center" colspan="2"&gt; &lt;asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match." ValidationGroup="CreateUserWizard1" ForeColor="Red"&gt;&lt;/asp:CompareValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center" colspan="2" style="color:Red;"&gt; &lt;asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"&gt;&lt;/asp:Literal&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center" colspan="2"&gt; &lt;asp:RegularExpressionValidator ID="PasswordLength" runat="server" Display="Dynamic" ErrorMessage="Password length minimum: 7. Non-alphanumeric characters required: 1" ControlToValidate="Password" ValidationExpression="(?=^.{7,51}$)([A-Za-z]{1})([A-Za-z0-9!@#$%_\^\&amp;amp;\*\-\.\?]{5,49})$" ForeColor="Red" ValidationGroup="CreateUserWizard1"&gt;&lt;/asp:RegularExpressionValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td align="center" colspan="2"&gt; &lt;asp:RegularExpressionValidator ID="EmailValidator" runat="server" Display="Dynamic" ControlToValidate="Email" ErrorMessage="Please enter a valid e-mail address." ValidationExpression="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" ForeColor="Red" ValidationGroup="CreateUserWizard1"&gt;&lt;/asp:RegularExpressionValidator&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;%-- &lt;asp:UpdateProgress ID="UpdateProgressUserDetails" runat="server" DisplayAfter="0"&gt; &lt;ProgressTemplate&gt; &lt;div style="position: absolute; top: 215px; left:140px;"&gt; &lt;img src="img/Loader.gif" alt="loading" /&gt;&lt;br /&gt; &lt;/div&gt; &lt;/ProgressTemplate&gt; &lt;/asp:UpdateProgress&gt;--%&gt; &lt;/ContentTemplate&gt; &lt;/asp:CreateUserWizardStep&gt; &lt;asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server"&gt; &lt;ContentTemplate&gt; &lt;table&gt; &lt;tr&gt; &lt;td align="center" colspan="2"&gt; Complete&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; Your account has been successfully created.&lt;/td&gt; &lt;/tr&gt; &lt;%--&lt;tr&gt; &lt;td align="right" colspan="2"&gt; &lt;asp:Button ID="ContinueButton" runat="server" BorderStyle="None" CausesValidation="False" CommandName="Continue" CssClass="btn big" Font-Size="12px" Text="Continue" ValidationGroup="CreateUserWizard1" /&gt; &lt;/td&gt; &lt;/tr&gt;--%&gt; &lt;/table&gt; &lt;/ContentTemplate&gt; &lt;/asp:CompleteWizardStep&gt; &lt;/WizardSteps&gt; &lt;/asp:CreateUserWizard&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. UScoder
    1. UScoder
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COWhat's your reason for using `position:absolute`? there should be no need. If you take this out the inputs should then line up with the labels in all browsers.
      singulars
      1. POCSS compatibility with different browsers
      1. USDeadlykipper
    2. COPosition absolute is indeed causing the collapse of the two elements(Indeed, WHY?). The DOM won't consider the width of both items because they are position absolutely. Therefore, the tabular structure you use collapses to this.
      singulars
      1. POCSS compatibility with different browsers
      1. USRickjaah
    3. CO@Deadlykipper-I didn't use any position:absolute the element.style property itself is showing as absolute and yes tha's what I have done in my stylesheet as mentioning it as position:relative !important.But this is neglecting with firefox and IE
      singulars
      1. POCSS compatibility with different browsers
      1. UScoder
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload