How do I measure width?

I have a <td>

I want to set a width to this td.

I am not sure how big width I should set . so I want to measure width and set .

problem is …how do I measure width ?

(basically I am confused whether I should set width=50 or width = 80 …but I am not sure how big they would appear in browser.)

Is there any lightweight tool to measure width ?

There are some nice screen measuring tools, like xScope. (I use this all the time.)

But in a browser like Chrome, you can right click Inspect Element, and as you hove over the element in the inspector, it tells you the current dimensions, which is handy too.

Neither. Set widths via CSS. :slight_smile:

I have installed firefox measureIT plugin.

I don’t find this tool in pop up window …how to find plugin in a pop up window ?

I have a td in pop up window and I want to set width there .

ok…but I need to measure by a ruler …then only I may get the exact width value.

I don’t have that tool, so you’ll have to experiment. Anyhow, just set some CSS values randomly and you’ll quickly find one that is right.

I have firebug also… I can open firebug on a pop up window.

Now I want to set style=“width:50” in a TD element in pop up window… …but firebug is not allowing adding TD attributes on live … Is there any workaround here ?

Is it possible adding style=“width:50” on live to check ?

Try right clicking on the popup and see if Firebug opens for that window. Otherwise, just put it straight into your style sheet. Anyhow, you need “width: 50px”—you need to set a unit value of some kind.

yes…it opens…I can inspect element…but how do I add CSS here ? does firebug allow adding styles on the live ? if so …how ? I’m stuck right here.

Yes. If you double click the styles on the right, you can edit them. But really, you need to put these styles in the style sheet eventually anyway, so I would do it from the start.

my issue is resolved… thanks.

one more thing …instead of 50px …I’d prefer the style in % …How do I convert this into % ?

Is there any easy work around for this ?

Change “px” to “%”. :slight_smile:

Obviously, 50% is not likely to equal 50px, so you’ll have to recalculate the value as well. 50% means half the width of the element’s container.

I use Web Developer Toolbar by chrispederick for Firefox for screen measurement. It has a very good ruler option under ‘Miscellaneous’ tab. Alternatively you can download and install a tool called ‘MB-Ruler - the triangular screen ruler’. Please make search in Google to find it. Thanks.

i like in px i not like % because in % i always mistake

If you want to set the width in percents, you can do it just by trial and error. Or knowing the total width of the parent element (table) - you can calculate how much % of that width represents 50px.