Controls out of line on different PC's

**Jigabyte** · Jul 10th, 2013, 06:19 AM

Hi,

I have a webpage with labels on the left and textboxes to the right. In my css I have set each textboxes margin-left so they all line up. Do I need to set the font / size in the body of the webpage? Also how do I find out what font / size Im using on my development PC? I have spent hours getting all my webpages lined up.

Many Thanks

Jiggy

**kfcSmitty** · Jul 10th, 2013, 10:28 AM

Show us your CSS and HTML.

Different browsers render CSS and HTML differently, the most obvious offender being Internet Explorer. Making sure you have the appropriate doctype specified at the top of the page will help minimize the issues, though.

**Jigabyte** · Jul 11th, 2013, 03:48 AM

Hi ,

This is the code for my doc type in my master page:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This is the css:-

body
{
font-size: 12px;
font-weight:normal !important;
font-family: Times New Roman;
}

And this is some of my html:-

<wijmo:C1Accordion ID="MainAccordion" runat="server" Height="590px" Width="1098px" style="top: 0px; left: 0px">
<Panes>
<wijmo:C1AccordionPane ID="C1Accordion1Pane1" runat="server" ButtonName="Search">
<Header>Search</Header>
<Content>
<wijmo:C1GridView ID="Sites" runat="server" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" PageSize="20"
ShowFilter="True" AutoGenerateSelectButton="True" ClientSelectionMode="None">
<Columns>
<wijmo:C1BoundField DataField="ST_REFNO" HeaderText="ST_REFNO" Visible="False">
</wijmo:C1BoundField>
<wijmo:C1BoundField DataField="ST_SITENAME" HeaderText="Site Name">
</wijmo:C1BoundField>
<wijmo:C1BoundField DataField="ST_ADDRESS1" HeaderText="Address 1">
</wijmo:C1BoundField>
<wijmo:C1BoundField DataField="ST_ADDRESS2" HeaderText="Address 2">
</wijmo:C1BoundField>
<wijmo:C1BoundField DataField="ST_ADDRESS3" HeaderText="Address 3">
</wijmo:C1BoundField>
<wijmo:C1BoundField DataField="ST_ADDRESS4" HeaderText="Address 4">
</wijmo:C1BoundField>
<wijmo:C1BoundField DataField="ST_POSTCODE" HeaderText="Post Code">
</wijmo:C1BoundField>
</Columns>
<EmptyDataRowStyle Height="22px" />
</wijmo:C1GridView>
</Content>
</wijmo:C1AccordionPane>
<wijmo:C1AccordionPane ID="C1Accordion1Pane2" runat="server" ButtonName="Site Details">
<Header>Site Details</Header>
<Content>
<asp:Label ID="lblGroup" runat="server" cssclass="lblGroup" Text="Company Group"></asp:Label>
<asp

ropDownList ID="cboGroups" runat="server" CssClass="cboGroups">
</asp

ropDownList>
<br />
<asp:Label ID="lblNavCode" runat="server" cssclass="lblNavCode" Text="Navision Code"></asp:Label>
<asp:TextBox ID="txtNavCode" runat="server" CssClass="txtNavCode"></asp:TextBox>
<br />
<asp:Label ID="lblSiteName" runat="server" cssclass="lblSiteName" Text="Site Name"></asp:Label>
<asp:TextBox ID="txtSiteName" runat="server" CssClass="txtSiteName"></asp:TextBox>
<asp:Label ID="lblDatabaseName" runat="server" cssclass="lblDatabaseName" Text="Database Name"></asp:Label>
<asp:TextBox ID="txtDatabaseName" runat="server" CssClass="txtDatabaseName"></asp:TextBox>
<br />
<asp:Label ID="lblAddress" runat="server" cssclass="lblAddress" Text="Address"></asp:Label>
<asp:TextBox ID="txtAddress1" runat="server" CssClass="txtAddress1"></asp:TextBox>
<asp:Label ID="lblDailyCleans" runat="server" cssclass="lblDailyCleans" Text="Run Daily Cleans"></asp:Label>
<asp:CheckBox ID="chkDailyCleans" runat="server" cssclass="chkDailyCleans"/>
<br />
<asp:TextBox ID="txtAddress2" runat="server" CssClass="txtAddress2"></asp:TextBox>
<asp:Label ID="lblNonDailyCleans" runat="server" cssclass="lblNonDailyCleans" Text="Run Non Daily Cleans"></asp:Label>
<asp:CheckBox ID="chkNonDailyCleans" runat="server" cssclass="chkNonDailyCleans"/>
<br />
<asp:TextBox ID="txtAddress3" runat="server" CssClass="txtAddress2"></asp:TextBox>
<asp:Label ID="LblTitle_1" runat="server" cssclass="lblTitle_1" Text="Days To Run Archive Routine"></asp:Label>
<br />
<asp:TextBox ID="txtAddress4" runat="server" CssClass="txtAddress2"></asp:TextBox>
<asp:Label ID="lblMonday" runat="server" cssclass="lblMonday" Text="Monday"></asp:Label>
<asp:CheckBox ID="chkMonday" runat="server" cssclass="chkMonday"/>
<asp:Label ID="lblTuesday" runat="server" cssclass="lblTuesday" Text="Tuesday"></asp:Label>
<asp:CheckBox ID="chkTuesday" runat="server" cssclass="chkTuesday"/>
<asp:Label ID="lblWednesday" runat="server" cssclass="lblWednesday" Text="Wednesday"></asp:Label>
<asp:CheckBox ID="chkWednesday" runat="server" cssclass="chkWednesday"/>
<asp:Label ID="lblThursday" runat="server" cssclass="lblThursday" Text="Thursday"></asp:Label>
<asp:CheckBox ID="chkThursday" runat="server" cssclass="chkThursday"/>
<asp:Label ID="lblFriday" runat="server" cssclass="lblFriday" Text="Friday"></asp:Label>
<asp:CheckBox ID="chkFriday" runat="server" cssclass="chkFriday"/>
<br />
<asp:Label ID="lblPostcode" runat="server" cssclass="lblPostcode" Text="Post Code"></asp:Label>
<asp:TextBox ID="txtPostcode" runat="server" CssClass="txtPostcode"></asp:TextBox>
<asp:Label ID="lblSaturday" runat="server" cssclass="lblSaturday" Text="Saturday"></asp:Label>

Hope this helps, if I put font-family in one of my label classes it works but I don't really want to have to do this. The big problem is I have margin-left in all my textboxes so they all line up but on some PC's I think it's using a different font / size and it loses the alignment. I may have to put them in a table but I thought tables were a no no now.

Thanks for getting back to me,

Jiggy

**Jigabyte** · Jul 11th, 2013, 04:05 AM

I've just noticed it's only doing it one content page. The others are being set.

**brin351** · Jul 11th, 2013, 05:04 AM

Are you wanting the layout/alignment to appear like 2 columns labels in one and controls in 2nd? css classing every lbl and control is cumbersom I'd suggest a different approach.

**Jigabyte** · Jul 11th, 2013, 05:44 AM

That's correct Brin351. Do you have any other suggestions?

**Jigabyte** · Jul 11th, 2013, 05:50 AM

Here is a screen shot:-

**sapator** · Jul 11th, 2013, 04:22 PM

I've only managed to do something identical with a table - tables as, when zoomng the browser it get's messed up by using div's. As i can see, you can use 2 br's in every tr or even 4 br's in every tr . If you use 4 br's make sure to use a smaller br width for the labels so your textbox will align close to the labels.
I would love to see another way as css is not my best field and i had a heck of a time to align correctly.

**brin351** · Jul 11th, 2013, 08:49 PM

You can certainly use tables as a fail safe - if you want to use css I posted some markup in a previous thread here

From that example I'd drop the <fieldset> and use 2 divs 1 for each set/column of label-control

Code:

css

.formDiv{float:left; width:300px;} //assuming 2 x 300 wide columns fits
.formDiv p {margin: 2px 12px 10px 10px;}
.formDiv formLbl{width:120px;display: block;float:left;}




html

<div class=formDiv>
<p> 
<asp:Label ID="lblNavCode" runat="server" cssclass="formLbl" Text="Navision Code"></asp:Label>
<asp:TextBox ID="txtNavCode" runat="server" CssClass="formCtr"></asp:TextBox>
</p>
etc.....
</div>
<div class=formDiv>
<p> 
<asp:Label ID="lblSiteName" runat="server" cssclass="formLbl" Text="Site Name"></asp:Label>
<asp:TextBox ID="txtSiteName" runat="server" CssClass="formCtr"></asp:TextBox>
</p>
etc.............
</div>

Thread: Controls out of line on different PC's

Thread Tools

Display

Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Re: Controls out of line on different PC's

Posting Permissions