SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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 ?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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.

    Quote Originally Posted by windowsxp View Post
    basically I am confused whether I should set width=50 or width = 80
    Neither. Set widths via CSS.

  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 .

  4. #4
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post

    Neither. Set widths via CSS.
    ok...but I need to measure by a ruler ...then only I may get the exact width value.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by windowsxp View Post
    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.

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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 ?

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by windowsxp View Post
    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.

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by windowsxp View Post
    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.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 ?

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,213
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by windowsxp View Post
    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.

  12. #12
    SitePoint Member
    Join Date
    Apr 2013
    Location
    Mumbai, India
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i like in px i not like % because in % i always mistake

  14. #14
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,480
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •