how do I measure width ?

[windowsxp]

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 ?

[ralph.m]

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.

basically I am confused whether I should set width=50 or width = 80

Neither. Set widths via CSS.

[windowsxp]

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 .

[windowsxp]

Neither. Set widths via CSS.

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

[ralph.m]

I don't find this tool in pop up window ..

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.

[windowsxp]

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 ?

[ralph.m]

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.

[windowsxp]

Try right clicking on the popup and see if Firebug opens for that window.

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.

[ralph.m]

does firebug allow adding styles on the live ?

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.

[windowsxp]

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 ?

[ralph.m]

instead of 50px ....I'd prefer the style in % ....How do I convert this into % ?

Change "px" to "%".

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.

[sageshark]

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.

[umairsaleem229]

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

[webcosmo]

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.