Results 1 to 9 of 9

Thread: line height issues

  1. #1
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default line height issues

    Hello:

    I am trying to change my line height and it just is not working. I have copied code right off the internet and it still doesn't work. I have included a link to show the problem with a line height of 1px, just to test and is still doesn't work. Please help.


    http://www.pepelepew1962.x10.mx/corners.html


    Thanks

  2. #2
    Join Date
    Jan 2009
    Location
    NH
    Posts
    353
    Thanks
    51
    Thanked 9 Times in 9 Posts

    Default

    you code shows you are using PT, not PX

    Code:
    p
    {
      color: green;
      line-height: 1pt;
    }

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    I can't see a specific font-size so the page will be defaulting to 16px. A line-height of 1px or even 10px is rather inappropriate with that font-size and I suspect you may be confusing px with em (1em is the default equivalent of 16px)

    If you're working with px, 26px would be better. Try increasing your line-hight to a minimum of 20px to see a reasonable effect.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Ok, but if the default goes to 16px or any othersize for that matter, with a line-spacing of 1pt or 1px, would the next text not practically overwrite it? That is the part I don't understand. Other than learning, my ultimate goal is to get the XXX very large ( no, it is not x-rated ), with the title underneath smaller.

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Here's a px, pt, em, % chart to help you with sizing conversions http://reeddesign.co.uk/test/points-pixels.html
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    my ultimate goal is to get the XXX very large ( no, it is not x-rated ), with the title underneath smaller.
    it would be better to set an explicit font-size on the h1 and h6 elements rather than rely on default browser sizing;
    Code:
    h1 { font-size: 20px; }
    h6 { font-size: 10px; }
    use whatever font-size you like to get the desired sizing effect.

    But from a markup-meaning perspective, an h6 tag probably isn't appropriate for a title (at the top of a page). Unless you specifically intend to tell Google that your title is way down on the importance scale - h6 is the least important title - right down the list from all the other h tags (more likely expected towards the bottom of your page).

    I would suggest the your XXX/OOO titles are the most important and so the h1 tag is most appropriate there, but the lines directly underneath -- should they not hold greater importance in the structure of your page? Might a h2 or h3 tag be better? (As an importance indicator for Google anyway?)

    Use the h1-6 scale to rank the importance of your headings (h1 being the most important heading and h6 being the least important heading) but use CSS and font-size to control the visual sizing.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  7. The Following User Says Thank You to Beverleyh For This Useful Post:

    pepe_lepew1962 (04-01-2013)

  8. #7
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Okay, I have made a few changes that I hope help. FYI, thanks for your help and time. The company has no logo, so instead they want just text. So, the logo part is AJAX and the sub logo is business. For a text logo, it sux and I am trying to get the "business" part under the "AJAX", very snug. I also am trying to get the other 2 boxes to be on the same line ... so all 3 on the same line.

  9. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,965
    Thanks
    16
    Thanked 305 Times in 304 Posts
    Blog Entries
    11

    Default

    Ok - for all 3 rounded corner boxes to sit on one line you would need to set them all as;
    Code:
    display:inline-block; 
    float:left;
    There are other ways to manipulate the positioning - for example, you could use absolute positioning on the children with relative positioning on the parent http://css-tricks.com/absolute-posit...e-positioning/ - but floats are good too. Have a play and see what way you like best.

    With the floats make sure that their combined widths and margins are less than the width of their container otherwise they will push out and drop onto the line below. You can set them extra narrow and then expand them til they fit snugly in the container.

    Also you will probably need to clear the float on the container div with clear:left;

    Hope that helps.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  10. #9
    Join Date
    Nov 2008
    Posts
    42
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Okay, got something to work ... thank you !!!!

Similar Threads

  1. line height
    By 3dkingpin in forum CSS
    Replies: 4
    Last Post: 01-31-2012, 05:59 AM
  2. Get an element's computed line-height
    By David Sudweeks in forum JavaScript
    Replies: 2
    Last Post: 01-08-2010, 03:23 PM
  3. HVMenu line-height?
    By dmwhipp in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-29-2009, 02:11 AM
  4. Line Height Issue
    By mdisch in forum CSS
    Replies: 3
    Last Post: 07-16-2008, 11:53 PM
  5. Wrong line height
    By neo_philiac in forum Flash
    Replies: 5
    Last Post: 05-08-2008, 07:15 PM

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
  •