Which Scale for the Width parameter provides the most uniform result?

[mtbvfr]

Hi,

Which Scale (px, pt, em, %, etc) for the Width parameter provides the most uniform result across browsers and screen resolutions and browser text size settings?

Thanks,

[deathshadow]

px is the only one you can rely on as 'consistant' - since images are measured in px and a lot of images (like line-art or dithers) resize like crap, but if you use any of the other metrics for fonts without a dynamic layout, it's going to break...

Best rule of thumb is once you choose a metric, be it px, pt, em, etc... stick with it and use it for everything. Attempting to mix and match usually results in a really bad failure be it a different font renderer (freetype or OSX) or different font metric (windows 120dpi/large fonts, 100dpi linux in browsers other than firefox (which is locked at 96dpi even when the OS runs at 75 - WTF) and quite possibly the upcoming OSX leopard), especially on fixed-width layouts.

In general, font sizes and container sizes are a train wreck, especially if you get anything px sized (like images, especially backgrounds since you can't even make those scale - sticking you with trying to 'slide') is a headache and a half, and it takes a lot of experimenting, recoding and try, try, try, TRY again to get something that works well in all browsers at all the possible resolutions and metrics...

You'll likely have some people say "EM/%" like some cultish mantra - ignore that... At least, I do since I've yet to see a production site using that technique that renders anything approaching desirable on my own machine (which isn't THAT far from mainstream - win XP w/large fonts) usually with broken containers and overlapping elements. /FAIL/ hard... sure, you'll see templates all the time that look great - until you actually start plugging content into them.

[AutisticCuckoo]

The most consistent should be a physical unit like in or cm. An inch is an inch no matter what.

Pixels are different sizes on different monitors, and when you get to other output devices (like laser printers) it's a whole new ballgame.

Points ought to be physical units (1/72"), but because of different screen resolutions (real resolutions, not the pixel display size that people insist on calling resolution) they cause problems anyway.

Em, ex, and % are relative units which will rarely be very consistent. Despite that, they are very useful simply because they are relative. For a layout that adapts to the user's wishes, relative units are the only way.

But when you need real, physical consistency, I think you need to use physical units.

[deathshadow]

The most consistent should be a physical unit like in or cm. An inch is an inch no matter what.

That's the dream, which will never happen so long as users are too lazy to calibrate their displays to the 'optimal' resolution, screen manufacturers (especially LCD ones) use wildly different dot pitches, and all the software out there is designed with zero clue to what an inch actually corresponds to in pixels. Computer screens are measured in pixels, and on the whole the operating system, and by extension the browser, have NO CLUE how many pixels an inch is... Even when there's a mechanism in place to SET the value

With 'small fonts' windows assuming all displays are 96dpi, 'large fonts' windows assuming 120dpi, OSX assuming (internally) 72dpi and the browser doing 96 (oh yeah, THAT works well), gecko following the windows metric on pt and in, but not %/em, *nix (technically X11) assuming either 75 or 100dpi... with ZERO compensation for the physical size of the screen or that the user might be running a resolution five miles away from being anywhere NEAR 96dpi (case in point, most windows and linux users tend to run their screens at a physical 75dpi, modern OSX users seem to favor way down at 50dpi or LESS (unless on a laptop where they seem to go for 120dpi or MORE), while most old-school X11 users tend to run theirs at a physical 96dpi - completely reverse)... it's a giant mess.

The devil is in the implementation (or lack therin)...

[AutisticCuckoo]

That's why I said should instead of is.

[mtbvfr]

Thanks for your replies guys! A Train Wreck would be a good description for what I am about to show you from an application I inherited a while back . I have tried to determine what's going on but no joy yet.

What prompted me to initiate this topic is what I have experienced with the following.

I have a 17" LCD monitor running at 1280*1024 at 130dpi.

Mozilla is set to a Minimum Font Size of 20 and IE6 is using a Text Size of Larger.

The pertinent section of HTML for the first set of images is as follows:

<table cellSpacing=0 cellPadding=0 width="100%" border=0>
  <tr>
    <td align=center>
      <table cellSpacing=0 cellPadding=0 width="70%" align=center border=0>
        <tr>
          <td align=left>
            <asp:validationsummary id=valSummary runat="server" displaymode="BulletList" enableclientscript="True" headertext="Please correct the following errors:" showmessagebox="False" showsummary="True" cssclass="tableValidationSummary" width="100%"></asp:validationsummary>
          </td>
        </tr>
      </table>
      <asp:label id=lblStatus runat="server" visible="False"></asp:label>
      <table cellSpacing=0 cellPadding=6 width="95%" border=0>
        <tr>
          <td class=txtLabel vAlign=top width="50%">
            Site:&nbsp;<img src="images/icon_mandatory.gif" align=top >
            <br><asp:dropdownlist id=SiteID runat="server" enabled="False" cssclass="inputStyle" width="100%"></asp:dropdownlist>
            <asp:requiredfieldvalidator id=reqSite runat="server" enableclientscript="True" controltovalidate="SiteID" display="None" errormessage="Site is mandatory and cannot be blank" initialvalue=""></asp:requiredfieldvalidator>
          </td>
          <td width="5%">&nbsp;</td>
          <td class=txtLabel vAlign=top width="45%">
            Estimated Admin. Hours:
            <br><asp:textbox id=EstimatedAdministritiveHours runat="server" cssclass="inputStyle" width="50%" maxlength="6"></asp:textbox>
            <asp:regularexpressionvalidator id=rxpAdministritiveHours runat="server" enableclientscript="True" controltovalidate="EstimatedAdministritiveHours" display="None" errormessage="Estimated Administrative Hours must be a number" validationexpression="^\d+$"></asp:regularexpressionvalidator>
          </td>
        </tr>
        <tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Service Category:&nbsp;<IMG src="images/icon_mandatory.gif" align=top >
            <br><asp:dropdownlist id=ServiceCategoryId runat="server" cssclass="inputStyle" width="100%"></asp:dropdownlist>
            <asp:requiredfieldvalidator id=reqServiceCategoryId runat="server" enableclientscript="True" controltovalidate="ServiceCategoryId" display="None" errormessage="Service Category is mandatory and cannot be blank" initialvalue=""></asp:requiredfieldvalidator>
          </td>
          <td>&nbsp;</td>
          <td class=txtLabel vAlign=top>
            Estimated Job Hours:
            <br><asp:textbox id=EstimatedTestingHours runat="server" cssclass="inputStyle" width="50%" maxlength="6"></asp:textbox>
            <asp:regularexpressionvalidator id=rxpTestingHours runat="server" enableclientscript="True" controltovalidate="EstimatedTestingHours" display="None" errormessage="Estimated Testing Hours must be a number" validationexpression="^\d+$"></asp:regularexpressionvalidator>
          </td>
        </tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Job Category:&nbsp;<IMG src="images/icon_mandatory.gif" align=top >
            <br><asp:dropdownlist id=JobCategoryId runat="server" cssclass="inputStyle" width="100%"></asp:dropdownlist>
            <asp:requiredfieldvalidator id=reqJobCategoryId runat="server" enableclientscript="True" controltovalidate="JobCategoryId" display="None" errormessage="Job Category is mandatory and cannot be blank" initialvalue=""></asp:requiredfieldvalidator>
          </td>
          <td>&nbsp;</td>
          <td class=txtLabel vAlign=top>
            Estimated Items Tested:
            <br><asp:textbox id=EstimatedItemsTested runat="server" cssclass="inputStyle" width="50%" maxlength="6"></asp:textbox>
            <asp:regularexpressionvalidator id=rxpItemsTested runat="server" enableclientscript="True" controltovalidate="EstimatedItemsTested" display="None" errormessage="Estimated Items Tested must be a number" validationexpression="^\d+$"></asp:regularexpressionvalidator>
          </td>
        </tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Common Job Description:&nbsp;<IMG src="images/icon_mandatory.gif" align=top >
            <br><asp:dropdownlist id="CommonJobDescriptionId" runat="server" cssclass="inputStyle" width="100%"></asp:dropdownlist>
            <asp:requiredfieldvalidator id="reqCommonJobDescriptionId" runat="server" enableclientscript="True" controltovalidate="CommonJobDescriptionId" display="None" errormessage="Common Job Description is mandatory and cannot be blank" initialvalue=""></asp:requiredfieldvalidator>
          </td>
          <td>&nbsp;</td>
          <td class=txtLabel vAlign=top>
            Estimated Strike Rate:
            <br><asp:textbox id=EstimatedStrikeRate runat="server" cssclass="inputStyle" width="50%" maxlength="6"></asp:textbox>
            <asp:regularexpressionvalidator id=rxqEstimatedStrikeRate runat="server" enableclientscript="True" controltovalidate="EstimatedStrikeRate" display="None" errormessage="Estimated Strike Rate must be a number" validationexpression="^\d+$"></asp:regularexpressionvalidator>
          </td>
        </tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Job Description:
            <br><asp:textbox id=JobDescription runat="server" cssclass="inputStyle" width="100%" maxlength="500" textmode="MultiLine" rows="2"></asp:textbox>
          </td>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Job Status:
            <br><asp:radiobuttonlist id=JobStatusID runat="server" cssclass="inputStyle" repeatdirection="Vertical"></asp:radiobuttonlist>
          </td>
          <td>&nbsp;</td>
          <td class=txtLabel vAlign=top height=0%>
            Comments:
            <br><asp:textbox id=Comments runat="server" cssclass="inputStyle" width="100%" maxlength="6000" textmode="MultiLine" rows="4"></asp:textbox>
          </td>
        </tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Scheduled Date<br>(dd/mm/yyyy):
            <br><bdp:basicdatepicker id=ScheduledDate runat="server" buttonimageheight="16" buttonimagewidth="18" dateformat="ShortDate"><textboxstyle cssclass="inputStyle"></textboxstyle></bdp:basicdatepicker>
          </td>
          <td>&nbsp;</td>
          <td class=txtLabel vAlign=top>
            Confirmed Date<br>(dd/mm/yyyy):
            <br><bdp:basicdatepicker id=ConfirmedDate runat="server" buttonimageheight="16" buttonimagewidth="18" dateformat="ShortDate"><textboxstyle cssclass="inputStyle"></textboxstyle></bdp:basicdatepicker>
          </td>
        </tr>
        <tr>
          <td class=txtLabel vAlign=top>
            Job Start Date<br>(dd/mm/yyyy):
            <br><bdp:basicdatepicker id=TestingStartDate runat="server" buttonimageheight="16" buttonimagewidth="18" dateformat="ShortDate"><textboxstyle cssclass="inputStyle"></textboxstyle></bdp:basicdatepicker>
            <br><span class=txtSmall style="FONT-WEIGHT: normal"><A onclick="javascript:setStartDate();return false;" href="#" >Click to set start date</A></span>
          </td>
          <td>&nbsp;</td>
          <td class=txtLabel vAlign=top>
            Job Completion Date<br>(dd/mm/yyyy):
            <br><bdp:basicdatepicker id=TestingCompletionDate runat="server" buttonimageheight="16" buttonimagewidth="18" dateformat="ShortDate"><textboxstyle cssclass="inputStyle"></textboxstyle></bdp:basicdatepicker>
          </td>
        </tr>
        <tr>
          <td vAlign=top align=center colSpan=3>
            <br><br>
            <asp:button id=btnCancel runat="server" cssclass="button" width="100px" causesvalidation="False" text="Cancel"></asp:button>&nbsp;&nbsp;&nbsp; 
            <asp:button id=btnSave runat="server" cssclass="button" width="100px" text="Save"></asp:button>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

This HTML is for an ASCX file that is inserted into a table for a Default.aspx file. I made 2 sets of changes to this HTML for which the image for Mozilla remained the same (1st image). However, for IE6 you will notice significant differences. The 1st image for IE6 shows the result for the HTML I have included. The 2nd image is the result of removing the WIDTH parameter for each of the 4 Drop Down Lists(DDLs). For the 3rd image I removed the WIDTH parameter of only the first Drop Down List. The last 2 images show the 1st Drop Down activated with the WIDTH parameters as per the included HTML.














The following section of HTML is for the 2nd set of images:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<td align="center">
		<table width="70%" border="0" cellpadding="0" cellspacing="0" align="center">
		<tr>
			<td align="left">
				<asp:validationsummary runat="server" id="valSummary" displaymode="BulletList" enableclientscript="True" headertext="Please correct the following errors:" showmessagebox="False" showsummary="True" cssclass="tableValidationSummary" width="100%" />
			</td>
		</tr>
		</table>
		<asp:label runat="server" id="lblStatus" visible="False" />
		<table width="95%" border="0" cellpadding="0" cellspacing="0" class="DataEntryTable">
		<tr>
			<td valign="top" width="25%" class="DataEntryLabel">
				Client:&nbsp;<img src="images/icon_mandatory.gif" align="top" >
			</td>
			<td width="75%">
				<asp:dropdownlist runat="server" id="ClientsID" enabled="False" autopostback="True" />
				<asp:requiredfieldvalidator runat="server" id="reqClient" controltovalidate="ClientsID" display="None" enableclientscript="True" errormessage="Client is mandatory and cannot be blank" initialvalue="" />
				<asp:label runat="server" id="lblProspectClientName" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Site Name:&nbsp;<img src="images/icon_mandatory.gif" align="top" ></td>
			<td>
				<asp:textbox runat="server" id="SiteName" cssclass="inputStyle" width="300px" maxlength="200" />
				<asp:requiredfieldvalidator runat="server" id="reqSiteName" controltovalidate="SiteName" display="None" enableclientscript="True" errormessage="Site Name is mandatory and cannot be blank" initialvalue="" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Service Level:</td>
			<td>
				<asp:dropdownlist runat="server" id="ServiceLevelID" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Address 1:</td>
			<td>
				<asp:textbox runat="server" id="Address1" cssclass="inputStyle" width="300px" maxlength="200" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Address 2:</td>
			<td>
				<asp:textbox runat="server" id="Address2" cssclass="inputStyle" width="300px" maxlength="200" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">City:</td>
			<td>
				<asp:textbox runat="server" id="City" cssclass="inputStyle" width="300px" maxlength="80" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel" style="HEIGHT: 6px">State:</td>
			<td style="HEIGHT: 6px">
				<asp:dropdownlist runat="server" id="State" cssclass="inputStyle">
					<asp:listitem value="">Select a State</asp:listitem>
					<asp:listitem value="QLD">Queensland</asp:listitem>
					<asp:listitem value="NSW">New South Wales</asp:listitem>
					<asp:listitem value="VIC">Victoria</asp:listitem>
					<asp:listitem value="ACT">Australian Capital Territory</asp:listitem>
					<asp:listitem value="SA">South Australia</asp:listitem>
					<asp:listitem value="WA">Western Australia</asp:listitem>
					<asp:listitem value="NT">Northern Territory</asp:listitem>
					<asp:listitem value="TAS">Tasmania</asp:listitem>
				</asp:dropdownlist>
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Postcode:</td>
			<td>
				<asp:textbox runat="server" id="Postcode" cssclass="inputStyle" width="150px" maxlength="4" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Notification Period (weeks):&nbsp;<img src="images/icon_mandatory.gif" align="top" ></td>
			<td>
				<asp:textbox runat="server" id="NotificationPeriod" cssclass="inputStyle" width="150px" maxlength="4" />
				<asp:requiredfieldvalidator runat="server" id="reqNotificationPeriod" controltovalidate="NotificationPeriod" display="None" enableclientscript="True" errormessage="Notification Period is mandatory and cannot be blank" initialvalue="" />
				<asp:regularexpressionvalidator runat="server" id="rxpNotifcationPeriod" controltovalidate="NotificationPeriod" validationexpression="^\d+$"  display="None" enableclientscript="True" errormessage="Notification Period must be a number" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Induction Arrangements:</td>
			<td>
				<asp:radiobutton runat="server" id="radInductionYes" cssclass="inputStyle" text="Yes" groupname="rgpInduction" />&nbsp;<asp:radiobutton runat="server" id="radInductionNo" text="No" groupname="rgpInduction" checked="True" />
				<br><br>
				<asp:dropdownlist runat="server" id="InductionArrangementsID" />
				<asp:textbox runat="server" id="InductionArrangements" maxlength="4000" textmode="MultiLine" rows="4" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Key Requirements:</td>
			<td>
				<asp:textbox runat="server" id="KeyRequirements" maxlength="4000" textmode="MultiLine" rows="4" />
			</td>
		</tr>
		<tr>
			<td class="DataEntryLabel">Profile Documentation:</td>
			<td>
				<asp:textbox runat="server" id="ProfileDocumentation" maxlength="1000" textmode="MultiLine" rows="4" />
			</td>
		</tr>
		<tr>
			<td colspan="2" class="DynamicDataEntry">
				<asp:placeholder runat="server" id="plcDynamicAttributes" />
			</td>
		</tr>
		</table>
		<asp:panel runat="server" id="pnlPrimaryContactDetails">
      <table cellspacing=0 cellpadding=6 width="95%" border=0>
        <tr>
          <td class=tdHeadingBreaker colspan=3><br>Primary Site Contact 
            Details </td></tr>
        <tr>
          <td class=txtLabel colspan=3><br>Select an existing 
            contact:&nbsp;&nbsp; <asp:dropdownlist id=ddlExistingContacts cssclass="inputStyle" runat="server" enableviewstate="True" Width="282"></asp:dropdownlist><input 
            id=hidSelectedContactID type=hidden runat="server"> <br><br>OR 
            <br><br>
            <h5>Add a New Contact</h5></td></tr>
        <tr>
          <td class=txtLabel valign=top width="45%">Title: <br><asp:dropdownlist id=Title width="50%" cssclass="inputStyle" runat="server">
					<asp:listitem value="">Select a title</asp:listitem>
					<asp:listitem value="Dr.">Dr.</asp:listitem>
					<asp:listitem value="Miss.">Miss.</asp:listitem>
					<asp:listitem value="Mr.">Mr.</asp:listitem>
					<asp:listitem value="Mrs.">Mrs.</asp:listitem>
					<asp:listitem value="Ms.">Ms.</asp:listitem>
				</asp:dropdownlist></td>
          <td width="10%">&nbsp;</td>
          <td class=txtLabel valign=top width="45%">First Name:&nbsp;<img 
            src="images/icon_mandatory.gif" align=top> <br><asp:textbox id=FirstName width="100%" cssclass="inputStyle" runat="server" maxlength="50"></asp:textbox></td></tr>
        <tr>
          <td class=txtLabel valign=top>Last Name:&nbsp;<img 
            src="images/icon_mandatory.gif" align=top> <br><asp:textbox id=LastName width="100%" cssclass="inputStyle" runat="server" maxlength="50"></asp:textbox></td>
          <td>&nbsp;</td>
          <td class=txtLabel valign=top>Job Title:&nbsp;<img 
            src="images/icon_mandatory.gif" align=top> <br><asp:textbox id=JobTitle width="100%" cssclass="inputStyle" runat="server" maxlength="50"></asp:textbox></td></tr>
        <tr>
          <td class=txtLabel valign=top>Address: <br><asp:textbox id=Address width="100%" cssclass="inputStyle" runat="server" maxlength="500" rows="4" textmode="MultiLine"></asp:textbox></td>
          <td>&nbsp;</td>
          <td class=txtLabel valign=top>Postcode: <br><asp:textbox id=Textbox1 width="50%" cssclass="inputStyle" runat="server" maxlength="4"></asp:textbox><asp:regularexpressionvalidator id=rxpPostcode enableclientscript="True" runat="server" errormessage="Postcode must be a number" display="None" controltovalidate="Postcode" validationexpression="^\d+$"></asp:regularexpressionvalidator></td></tr>
        <tr>
          <td class=txtLabel valign=top>Phone Number: <br><asp:textbox id=PhoneNumber width="100%" cssclass="inputStyle" runat="server" maxlength="16"></asp:textbox></td>
          <td>&nbsp;</td>
          <td class=txtLabel valign=top>Mobile Number: <br><asp:textbox id=MobileNumber width="100%" cssclass="inputStyle" runat="server" maxlength="16"></asp:textbox><asp:regularexpressionvalidator id=Regularexpressionvalidator1 enableclientscript="True" runat="server" errormessage="Mobile Number can only contain numbers, spaces, and brackets" display="None" controltovalidate="MobileNumber" validationexpression="^[0-9() ]{0,16}"></asp:regularexpressionvalidator></td></tr>
        <tr>
          <td class=txtLabel valign=top>Fax Number: <br><asp:textbox id=FaxNumber width="100%" cssclass="inputStyle" runat="server" maxlength="16"></asp:textbox><asp:regularexpressionvalidator id=Regularexpressionvalidator2 enableclientscript="True" runat="server" errormessage="Fax Number can only contain numbers, spaces, and brackets" display="None" controltovalidate="FaxNumber" validationexpression="^[0-9() ]{0,16}"></asp:regularexpressionvalidator></td>
          <td>&nbsp;</td>
          <td class=txtLabel valign=top>E-mail Address: <br><asp:textbox id=EmailAddress width="100%" cssclass="inputStyle" runat="server" maxlength="100"></asp:textbox></td></tr>
        <tr>
          <td class=txtLabel valign=top>Contact Role(s): <br><asp:listbox id=ContactRoles width="100%" cssclass="inputStyle" runat="server" rows="3" selectionmode="Multiple"></asp:listbox></td>
          <td>&nbsp;</td>
          <td class=txtLabel valign=top>Invoicing Contact Method: <br><asp:dropdownlist id=InvoicingContactMethodID width="100%" cssclass="inputStyle" runat="server"></asp:dropdownlist></td></tr>
        <tr>
          <td class=txtLabel valign=top>Job Notification Contact Method: <br><asp:dropdownlist id=JobNotificationContactMethodID width="100%" cssclass="inputStyle" runat="server"></asp:dropdownlist></td>
          <td>&nbsp;</td>
          <td class=txtLabel valign=top>Add User Login: <br><asp:checkbox id=chkAddAsUser runat="server"></asp:checkbox></td></tr></table>
		</asp:panel>
		<table width="95%" border="0" cellpadding="6" cellspacing="0">
		<tr>
			<td valign="top" align="center" width="100%">
				<br><br>
				<asp:button runat="server" id="btnCancel" text="Cancel" width="100px" cssclass="button" causesvalidation="False" />
				&nbsp;&nbsp;&nbsp;
				<asp:button runat="server" id="btnSave" text="Save" width="100px" cssclass="button" />
			</td>
		</tr>
		</table>
	</td>
</tr>
</table>

Adding a WIDTH parameter, % or px, for the DDLs of the Site Control had no effect in Mozilla but did in IE. Notice how in Mozilla the list expands outwards (as far as the dimensions of the table cell permits) to enable a User to see all or most of the text of an Item whereas in IE the List remains the same width as the Control.





What I would like to do is have the DDLs for the Job Page behave the same way as you see for the Site page in Mozilla in both browsers.

There are some variances, I know, in the Mark Up but I think there is more going on then meets the eye.

Whew,

[mtbvfr]

bump