Line height question

Hi,
I am using the boilerplate. There are sections of content individually assigned styles - for example, <p>, <dt>, <dd>.
As these tag styles flow the same way and generally appear the same way on the page - if I want to increase the line height of the text for the entire page, instead of adding line-height to all 3 independent tag styles, is it best to set globally and define in the body tag?
Just wondering what would be the best method here?
Thanks!

Now, we're fishing in the dark here because we cannot see your code because you have not given us a link with which to view it, so we're offering pretty generic suggestions here…
There are two ways to call a text style in HTML. Either call it with the attribute for your text or call it as a <span> element.
So like osgood suggested, you can have a class that will define a line height that is pleasing to you that can be applied to anything thusly:
<ul>
     <li class="this">List item one</li>
     <li class="this">List item two</li>
     <li>This list item is not styled with the line height "this" because there is no class element.</li>
</ul>
<p class="this">This text will have osgood's line height, assuming you have added that class to your style sheet.</p>
<p>This text will <em>not</em> have osgood's line hight because there is no class="this" after the paragraph element in the HTML</p>
Or you can use the span element thusly:
<p>this text has no line height attribute <span class="this">but this text does</span></p>
(please understand that the line height adjustment in the above paragraph may be set entirely by the part with the line-height adjustment because that is the way web browsers work, applying line height for the entire line and not just the part that has the adjustment, so if there was a line break before your span element, there would be two different line heights.
And you can set up multiple line heights to affect any of your HTML in your CSS either by calling the class in your HTML or by simply defining all of the elements in your HTML page with the combination in your style sheet thusly:
p dt dd {
     line-height: 16px;
Got it?
-Mark

Similar Messages

  • How can I set the default line height?

    Greetings,
    I have a report that displays observed behavior in a list format like the one below:
    Behavior Observed:   
        Withdrawn           
        Happy
        Sad
        angry
    There are 5 responses as to the severity of the behavior or it is left blank if the behavior was within normal limits.
    So the output would look like this:  
    Behavior Observed:   
        Withdrawn            (mild)
        Happy
        Sad                      (moderate)
        angry
    The problem is that when this report was designed the details sections were not uniformy formatted and the spacing between data elements is hard to follow from the label to the data field.  I tried to set the details to be uniform by selecting "Arrange Lines",  however when I do this, the data is displayed too close horizontally.  So my question is how do I set the default line height for each field so that they are uniform in distance from each other but not too close due to the font height?
    Does this make sense?
    Thank you,
    Kevin

    I'm confused... How are you associating line height with horizontal field spacing???
    If you have this...
    Behavior Observed:     Severity:
    Withdrawn          (mild)
    Happy
    Sad               (moderate)
    angry
    But want it to look like this...
    Behavior Observed:
    Withdrawn (mild)
    Happy
    Sad (moderate)
    angry
    all you have to do is create a concatenation formula. Something like this...
    {TableName.BehaviorObserved} & " (" & {TableName.Severity} &")"
    Sorry if I've misunderstood what you are trying to do.
    Jason

  • Modify line height

    Hi all.
    We have a report to do invoices.
    In this report, we have LineType = LINE and TAX.
    On the LineType=LINE, we create variables that we print on LineType=TAX.
    The problem is that we have blank line, printed line, blank line, printed line and so on.
    My question is : how to do to put the line height of the blank lines to 0 ?
    Thanks
    Fred

    Hi Tim.
    I tried your solution but she doesn't work.
    I think I am not clear with what we want to do.
    We must read the LineType 'LINE' to memorize some data and we print them on the LineType 'TAX' but actually we see a blank line on the invoice for the LineType 'LINE' then we don't see this blank line.
    Do you see what we want ?
    Regards
    Fred

  • An easy one: line height or padding-bottom?

    I have an <h2> that I want to put a graphic on as a background image.  It's like a hand-drawn underline that's about 6px high.
    To stop the underscore being behind the text I notice I can increase the line-height a bit or add padding-bottom.  Both give the desired end result and both have the same impact on the page.
    My question: is one wrong or right or is one better than the other?
    If there is a clear reason why I should go with one, it would be great to have a clue as to why?
    Thanks
    Martin

    Thanks Murray,
    That's good enough for me.
    Martin

  • New to CSS, text-align and line-height ok in 'Design', but not in browsers (IE 10 & Chrome) on Win8

    [DREAMWEAVER CC]
    I'm now learning CSS, and find that where I specify in an external style sheet
    h1 {
              font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
              text-align:center;
              color: black;
              font-size: 1em;
              font-weight: normal;
              font-style: normal;
              line-height: 3.0;
              letter-spacing: 0px;
              word-spacing: 10px;
    text-shadow: 3px 3px 5px #333;
    text-decoration: none ;
    text-transform: none;
    That, in DW Design, they look fine, but in Windows 8, IE 11 and ChromeVersion 31.0.1650.63 m   that the text-align: center; and the line-height: 3.0;  are ignored.
    I work around by specifying <tr align="center" height = "77">   shouldn't the text-align: center; and the line-height: 3.0;  be specifiable in my CSS??
    Thanks for any help!
    <tr height="77" align="center">
            <h1>
                <td bgcolor="CornSilk">1/28/2014</td>
                <td>the Sky</td>
                <td>Fate is the Hunter</td>
              <td >Ernest Gann</td>
                <td >John</td>
                <td >Jessica</td>
              <td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1_1?s=books&ie=UTF8&q id=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
            </h1>
        </tr>

    hemmi1 wrote:
    [DREAMWEAVER CC]
    I'm now learning CSS, and find that where I specify in an external style sheet
    Not sure what it is you are trying to do but what you have at the moment is invalid code which is most likely why it doesn't work cross browser. (of cousre this css does not help  - line-height: 3.0; - 3.0 what? - px, ems?)
    Here's an example below of how you could do it. Give your table a class (below it is called .myTable) then you can start styling the <td> cell, and anything inside it by appending the element like an <h2> tag to the class name - .myTable h2
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style>
    .myTable {
        width: 900px;
        margin: 0 auto;
    .myTable td {
    font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
    width: 150px;
    .myTable h2 {
        margin: 0;
        padding: 0;
    text-align:center;
    color: black;
    font-size: 1em;
    line-height: 50px;
    word-spacing: 10px;
    text-shadow: 3px 3px 5px #333;
    .myTable a {
        display: block;
        text-align: center;
    </style>
    </head>
    <body>
    <table class="myTable" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td><h2>1/28/2014</h2></td>
    <td><h2>the Sky</h2></td>
    <td ><h2>Ernest Gann</h2></td>
    <td ><h2>John</h2></td>
    <td ><h2>Jessica</h2></td>
    <td><a href="http://www.amazon.com/FATE-HUNTER-Ernest-K-Gann/dp/0671636030/ref=sr_1 _1?s=books&ie=UTF8&qid=1387462831&sr=1-1&keywords=ernest+gann">Learn More</a></td>
    </tr>
    </table>
    </body>
    </html>

  • Line-height problem in publishing after update!

    This was how it looked before the update.
    This is how it look now.
    same line-height value. but it only happens when i publish it when i view it locally there's no problem.

    Fisrt, this problem only happens in the published content which has edge runtime js file in minified form.
    There is one issue with the minification due to which this issue happens.
    1. What´s the difference between the code you gave me and the "textShadow" with ts:"textStyle" you gave that other guy?
         Since your edge runtime code is hosted in CDN which we don't have acces to modify, that's why you need to add one line extra code. If edge runtime is hosted in your server itself then you can modify it as I suggested earlier. But I would recommend to add extra one line code, which will be cleaner way to do it.
    2. Should I always insert the code you gave me before starting a new project? So this problem doesn´t happen along the way?
         You can add this one line to every new project if it's using line-height. One we fix the issue in the next release, you no longer need to do that then. But till then, use it.
    -Vivekuma

  • CSS validator having a problem with shorthand line-height

    Hi,
    Suddenly noticed a CSS error with a simple CSS:
    h1 { font: 20px/100% "Times New Roman", Times, serif; }
    "Value Error : font  / is not a font-family value :  20px / 100% "Times New Roman",Times,serif "
    That's the way I've always written "font." And Dreamweaver agrees. Is there a new standard here?
    http://www.wellesley-hotel.com/test2.html
    http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. wellesley-hotel.com%2Ftest2.html

    With CSS Shorthand on fonts, you should express ALL attributes.
    font: style | variant | weight | size/line-height | font-family "font name", "font name", font;
    If all attributes are not required, better to use font-size, line-height and font-family.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • Calculating line height

    Usually I specify a line height based on 120% or so, just as
    I would in publishing distinguish between, say, an 11 point font
    and 13 point line height leading. However, I am perplexed as to how
    the browsers do this by default. It is more than 100% yet less than
    120%. Does anyone know about this? Is it safer to leave the setting
    at default? I have got a tight layout...

    Paevo,
    > Usually I specify a line height based on 120% or so,
    just as I would in
    > publishing distinguish between, say, an 11 point font
    and 13 point line height
    > leading. However, I am perplexed as to how the browsers
    do this by default. It
    > is more than 100% yet less than 120%. Does anyone know
    about this? Is it safer
    > to leave the setting at default? I have got a tight
    layout...
    The CSS2.1 recommends that user agents (e.g. browsers) use "a
    used value
    for 'normal' between 1.0 to 1.2" (where 1.0 means 100%, and
    1.2 means
    120%), so there is some room for interpretation:
    http://www.w3.org/TR/CSS21/visudet.html#propdef-line-height
    If you want to try to get your layout more consistent between
    browsers,
    so you can really tighten things up, then try using a "reset"
    stylesheet:
    http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
    On an unrelated note, you should use a relative a font size
    like 'em'
    instead of fixed point sizes so users can adjust the size to
    their own
    screen resolution and eyesight.
    HTH,
    Randy

  • Is there a way to do percentage based line heights?

    For example if I have a 24px font and want the line height to be 140%.

    Things are harder these days. In the old days displays were all low resolution 100 DPI or below, all also had a 4:3 aspect ratio. Displays had a had a small limited number of pixels typically  640x480 800x600 and 1024x768.  So web pages were design to fit with a small number of pixels like 800x600 so a page would fit on a typical display.   Then in 2001 IBM showed up with a 22.2" LCD with 9.2 mega pixels with a 204DPI resolution 16:10 Aspect ratio 3840x2400 pixels. The marketplace was not ready for that display normal PC images display very small at 204DPI and display adapters could not support 3840x2400 pixels.
    In recent years mobile devices have come on the scene with high resolution and as many pixels ad PC displays. However PC pages displayed so small on these high resolution displays web pages had to be reformatted and scaled up in size to be readable on these devices.  Next Apple came out with high resolution retina displays and again things needed to be scaled up in pixel size to be readable on these devices.  Laptop and Tablets followed suit high resolution displays are becoming the norm for all computer devices except desktop machines.
    Manufactures see profits in mobile devices  and do not want to invest in desktop display.  Its hard to understand for they are manufacturing the needed LCD panels but only packaging them in mobile devices,  Top executives think they they know what best to increase profits to bad the don't have technical knowledge.  Look at how IBM made Microsoft a household word.
    CSS is part of your answer however these days you need to take into consideration the device the end user is using to display your web page and you need to serve up pages appropriate for their current browsing device they will have more then one.  The one page for all devices days are gone.
    Photoshop is a good Web tool however if web design is your job responsibility Photoshop should not be your main application. 

  • Code view line height

    I am on Mac OS X Yosemite using DW CC 2014. Code view is set to Source Code Pro. The problem is that line height in code view is smaller than the font height -- or something like that.
    This screenshot demonstrates what I mean. Look at these characters: {,},y,g and see how they are cut off at the bottom. I've tried to fix this by changing fonts but most other fonts show the same problem. Changing font size in DW preferences also does not fix it. I tried changing the Source Code Pro set altogether using Suitcase Fusion. That did not help either. When I try to use Source Code Pro in other apps it works fine. So this seems to be a DW-specific problem.
    Any ideas?

    Hello Almir,
    The issue is due to missing fonts: Tahoma and Verdana. We have a bug logged for the issue and will looked into.
    Kindly follow the below workaround till the issue is fixed.
    1. Launch Font Book from /Applications/
    2. If Tahoma and Verdana fonts are disabled, enable the fonts
        Or if the fonts are missing, install the fonts.
    3. Launch Dreamweaver
    Let me know if the workaround is able to fix the issue for you.
    Regards.

  • Extraction of font-sizes and line height is completely bugged.

    Hello,
    I have been using projectparfait / (now assets) since a very long time and I must say it changed my whole workflow regarding front end development. Being able to quickly look up the font-sizes and line height is/was for me one of the most valuable features. Now since a little while, all the font-sizes/line heights have a scaling factor applied to it which is more than annoying, it basicly make this tool useless to me, there are still features like the measuring tool which are great but  ultimately i have to open the files with photoshop which I try to avoid as much as I can.
    It would be great if you guys could look into this.
    Best regards Thomas

    Hi Futureburo, sorry that you're having problems with Extract!
    Just to check, have you changed the Preferred Font Unit or Base Font Size? That would change the measurements your getting in the CSS.
    If not would you mind sending me the PSD you're having trouble with? You can get a link from the top right:
    and either message me or post a reply here.

  • How to give line height to text in AI Script

    how to give line height to text in AI Script

    I want to increase these three lines line height differently means i want script to increase the line height of outlined text

  • Line-height problem

    I'm changing the line height but there's no difference. I can see a difference at larger browser sizes, but with lower sizes (when the font gets smaller due to @media) the line height doesn't change anything.
    If you go to the sample page, you can see the name "jonathan grant". At browser sizes under like 700px width there is too much space between the first and last name. I've tried changing the line height to as little as 0% and it doesn't change at all. Any idea what the problem is?
    You can see in this screenshot what I"m talking about:

    Add display:block and adjust your line height like
    .friend_name a{
        display: block;    font-size: 90%;
        line-height: 0.9;

  • CSS unordered list {line spacing question}

    Hi everyone.
    I am trying to make a bulleted list, and I have 5 elements.
    Some require one line, while others require two lines. But the
    thing is, I want the leading to be lets say 20pt between items. But
    since some of the items require two lines, i want those items to
    have their line spacing closer so they can seem that they are part
    of the same bullet point. Is there any way I can do this? Is it
    even possible?
    Any help would be appreciated.
    Thanks
    -Ce

    Use <ol> or <dl> or <ul> list container and
    wrap your bullets in individual <li> tags.
    use css to style the line-height of the lis. Use a class on
    each group of lis to set the line-height.
    <ul>
    <li class = "double_height">Item 1</li>
    <li class = "single_height">Item 2</li>
    <li class = "double_height">Item 3</li>
    </ul>
    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    .double_height {
    line-height: 2.5em;
    .single-height {
    line-height: 1.2em;
    You can play with the settings to get the best results but
    this code will give you an idea of what is possible.
    regards
    Nick Barling
    www.barkingweb.com

  • Change line height in code view?

    Hello,
    Using DW8. In code view, I need to use a large font size but
    in so doing the lines are very close together. Is there any way to
    adjust the line height of the code?
    Thanks.

    If you referring to the actual text of the web page, yes. For
    example, in a
    paragraph:
    p{
    line-height:1.5em
    If you're referring to the code editor, I don't think there
    is.
    "EL11" <[email protected]> wrote in message
    news:eqatot$4i$[email protected]..
    > Hello,
    >
    > Using DW8. In code view, I need to use a large font size
    but in so doing
    > the lines are very close together. Is there any way to
    adjust the line
    > height of the code?
    >
    > Thanks.

Maybe you are looking for

  • Help! Error msg for Itunes. please please help!

    Hey there ok so I have used my itunes `John Limewire Tunes`forever to listen to on the computer...so today i went and pushed on my tunes..and get teh error message: `The shared library `Johns Limewire Tunes` is not responding (-3259)Check any firewal

  • My iphone 4s saw could not activate

    this iphone 4s......i unlock alrd now still cannot activate pls help MODEL: IPHONE 4S 16GB WHITE SERIAL: DN*******TD0 iOS: 6.1.3 MAC Address: 4CB199F00000 Network Unlocked: False Activation Status: No Original Carrier: Unlock (Connect to Itunes) Appl

  • How can I change my backup e-mail?

    My Apple ID has an email that is not mine and i cannot reset my security info. Is there a way i can change my backup email?

  • Has anyone downloaded 'pdf converter pro' for windows 8?

    Files don't open to allow editing, marking,etc

  • Photos are not sharp

    i have my new ipod repaired due to backlight issue, but the new one i got doesn't show sharp photos... and i tried getting into the settings to refine but it has no opption of refining! what should i do?