0

I have a form which holds multible labels and textboxes.

This form is centered in the page, and each labels are text-aligned to the left. It works as intended on firefox, jsbin, jsfiddle, but not on chrome. What am I doing wrong for it to not work on chrome?

Follows is the asp.net code

<asp:Panel ID="PNL_Order" runat="server" HorizontalAlign="Center" Visible="False">
    <h1>Contact Details</h1>
    <asp:Label ID="label001" runat="server" Text="Name (First/Last)&lt;span style='color: red;'&gt;*&lt;/span&gt;" CssClass="labels"></asp:Label>
    <asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
    <br />
    <!-- Removed other textboxes for clarity and readability -->
    <asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</asp:Panel>

And here is the CSS linked to it:

.labels
{
    width: 175px;
    text-align: left;
    display: inline-block;
}

In Firefox it displays as intended :

Firefox styling working as intended

And Chrome not displaying as intended :

Chrome styling not working as intended

Even IE8 interprets it properly:

IE8 styling

Footnote

I want to add also that on Firefox the labels are 175 pixels wide, while on Chrome they are 125 pixels wide, it doesn't follow the width specified either.

Sifu
  • 1,082
  • 8
  • 26
  • If you post the URL's to the images ( host with imgur... ) we can edit the question to insert them to... – Mathlight Jul 02 '14 at 12:54
  • @Mathlight I added the URL's in the question, would you kindly edit it to have the images inserted properly? Thanks. – Sifu Jul 02 '14 at 13:01
  • Basic questions - are you using doctype at top of page? Is it in standards or quirks mode? Also you should associate the labels with their inputs using AssociatedControlId attribute as per http://stackoverflow.com/questions/493801/html-label-tag-and-asp-net – Ruskin Jul 02 '14 at 13:07
  • @Ruskin ` ` It should be in standard mode (it is by default, right?). Thanks on the tip for associating the labels with their inputs, I've just added that function. – Sifu Jul 02 '14 at 13:24
  • It looks like Chrome interprets asp:label as a span (which I had no idea about, I'm fairly new to this). Is there another style that's overriding your CSS that may be associated with spans? (could test by adding !important to the text-align:left) Because it looks fine in Chrome for me. Not sure if you use this, but in Chrome right click the field and select "inspect element"... then review and edit on the fly from there. That's saved me numerous times. – deebs Jul 02 '14 at 13:36
  • @deebs Both Firefox and Chrome interpret it as a span on my side. I have set this application to be available on lan at my workplace and it would do the same thing on chrome on every computer. – Sifu Jul 02 '14 at 13:41
  • Can you put the labes/textboxes in a container that is aligned left? (ex:
    )
     – deebs Jul 02 '14 at 15:01
  • @deebs If I do that then it overrides the `asp:panel HorizontalAlign="Center"`, which I want to keep to have it centered in the page. – Sifu Jul 02 '14 at 15:10
  • What if you add margin:0 auto; to the div? That should fix that issue. – deebs Jul 02 '14 at 17:49

2 Answers2

2

Try adding a div container inside the panel that holds the labels and textboxes:

<asp:Panel ID="PNL_Order" runat="server" Visible="False">
    <h1>Contact Details</h1>
<div style="text-align: center;">
    <asp:Label ID="label001" runat="server" Text="Name (First/Last)&lt;span style='color: red;'&gt;*&lt;/span&gt;" CssClass="labels"></asp:Label>
    <asp:TextBox ID="TXT_Name" runat="server" TabIndex="1" type="text" Width="150px" />
    <br />
    <!-- Removed other textboxes for clarity and readability -->
    <asp:Button ID="BT_confirmOrder" runat="server" TabIndex="5" Text="Confirm and send Query" Width="158px" />
</div>
</asp:Panel>
deebs
  • 1,390
  • 10
  • 23
  • 1
    That would do [that](http://jsfiddle.net/3J2FH/). While I want it to do [that](http://jsfiddle.net/erjSg/). I found out how due to your post: placing the div you inserted like this `
    `. I'll accept your answer including this change. Thanks a lot for your help.
     – Sifu Jul 02 '14 at 19:00
1

I just found out what caused this problem with the comments made from deebs.
It appears that asp:Panel HorizontalAlign="Center" overrides any text-align (in boxes) made afterward.

The solution to that problem is to surround your centered area with a centered div :

<asp:Panel ID="PNL_Order" runat="server" Visible="False">
    <div style="text-align:center;">
        <!-- Your centered items with text-align=left -->
    </div>
</asp:Panel>

This fixed it for Chrome.

I still find this weird to only bug in Chrome, any thought on why it was happening?

Sifu
  • 1,082
  • 8
  • 26