CSS Style with lineheight

I have a style that makes my grid row 34px high. But if the text wraps on two lines, it leaves too much linespacing between the lines.

How do I make my grid row height 34px, but make my linespacing 14/14.

thanks!
    .RadGrid_RTOGrid, .RadGrid_RTOGrid .rgMasterTable, .RadGrid_RTOGrid .rgDetailTable, .RadGrid_RTOGrid .rgGroupPanel table, .RadGrid_RTOGrid .rgCommandRow table, .RadGrid_RTOGrid .rgEditForm table, .RadGrid_RTOGrid .rgPager table {
        font-weight: 100;
        font-size: 14px;
        line-height: 34px;
        font-family: Tahoma, "Segoe UI",Arial,Helvetica,sans-serif;
    }

Open in new window

LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
Don't apply the line-height attribute but set the row/cell height attribute and leave the line height as it normally is.
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I need more assistance... what I did is not working... Please provide me with the proper elements. thanks!

        font-weight: 100;
        font-size: 14px;
        min-height: 34px;
        font-family: Tahoma, "Segoe UI",Arial,Helvetica,sans-serif;

Open in new window

0
rwniceingCommented:
Dear Author,

you could set line-height to 7px(space)+14px(font-size)+7px(space)=28px for the spacing between word to word equal to 14px if word wrapped.

But when you set the row height = 34px, the second word-wrap line will overflow the row. So, I suggest this if you have to keep row height 34px; don't set row height let it auto adjust and put row white-color border-width  with 3px to simulate row height to be 34px and if word wrapped, the line to line or word to wrod  spacing is also  keeping 14px;
.test{
font-size:14px;
line-height:28px;
border-color:#FFFFFF;
border-style:solid;
border-width:3px;
}

Open in new window

If you send us the complete or portion of html page with css , it will be easier to understand your question

Rwniceing
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Capture2.PNG
Above you see the User Name field. It wraps. I don't want that big gappy space between words. On average the line height should be 34. I don't want it tight like 14/14. It needs to minimum be 34px. It can go larger if the row wraps. It doesn't have to stay at 34px. But I don't want the wrap to be gappy.

Hope that helps.
'Thanks!
0
rwniceingCommented:
k*px(space)+14px(font-size)+k*px(space)=b*px

where b, word spacing, can be anything you want by k change

So read my previous post and set each side of border color can be different by CSS if need .

Rwniceing.
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
k*px(space)+14px(font-size)+k*px(space)=b*px

Can you please convert the above into a language I can understand?

Please just tell me what it would be for 14/14 line spacing with 34 minimum height on the panel, but center the text vertically in the panel.

thanks!
0
rwniceingCommented:
.test{
font-size:14px;
line-height:28px;
border-color:#FFFFFF;
border-style:solid;
border-width:3px;
}


you can  put the code above for your class style, you will know what I say. If not, please send us your html page with css file, and show us what you expect before or after(even this is not what you expect, but at least, we know what is problem there).

You can put it in http://jsfiddle.com or http://jsfiddle.net  website , others are able to read it
0
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
that did not work. I wrote telerik and asked for help on this and this is the result of what works.

I had to set the line height to 15px to make the word wraps not have gaps between them, then to make a minimal row height, I had to add padding on each row and header as below:



   .RadGrid_RTOGrid,
    .RadGrid_RTOGrid .rgMasterTable,
    .RadGrid_RTOGrid .rgDetailTable,
    .RadGrid_RTOGrid .rgGroupPanel table,
    .RadGrid_RTOGrid .rgCommandRow table,
    .RadGrid_RTOGrid .rgEditForm table,
    .RadGrid_RTOGrid .rgPager table {
        font-weight: 100;
        font-size: 14px;
        line-height: 15px; /* so won't be gappy on line breaks */
        font-family: Tahoma, "Segoe UI",Arial,Helvetica,sans-serif;
    }


/* remove the gaps between line breaks, but keep height consistent */
div.RadGrid_RTOGrid .rgRow td,
div.RadGrid_RTOGrid .rgAltRow td {
    padding-top: 10px;
    padding-bottom: 10px;
}

div.RadGrid_RTOGrid .rgHeader {
    padding-top: 10px;
    padding-bottom: 10px;
}


.RadGrid_RTOGrid .rgHeader, .RadGrid_RTOGrid .rgHeader a {
    color: black;
    font-weight: bold;
    font-size: 12px;
      line-height: 15px; /* so won't be gappy on line breaks */
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
None of the suggestions worked. Found a solution from telerik.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.