CODEWITHSUNDEEP
css
Stichy
Stichy

Reputation: 1515

Line-height won't work

I've got a problem that's bothering me. The line-height seems to be based on the inherit by a previous font-size.

The code within the div "textruta" is generated by CKeditor, therefore a lot of crap code..

EDIT:

Here's the code:

<!DOCTYPE html>
<head>
  <meta charset="iso-8859-1">
  <title> timesheets.js :: Slideshow Engine </title>

<link href='http://fonts.googleapis.com/css?family=Frijole' rel='stylesheet' type='text/css'>
<style>

* {
margin: 0;
padding: 0;
}
body {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 28px;
}
</style>
<div id="textruta" class="textruta" style="width: 280px; height: 116px; position: absolute; top: 100px; left: 120px; visibility: visible;">
<span id="previewtext1">
<p>
<span style="font-size:28px">
    <span style="font-family:frijole">
        <span style="background-color:#FFFF00">Hello There!</span>
    </span>
<br><br>
    <span style="font-size:18px">
        <span style="font-size:26px">
            <span style="color:#FFFFFF"><span style="background-color:#FF0000">123:-</span>
         <br><span style="font-size:18px"><em><span style="background-color:#FF0000">(234:-)</span></em>
         </span>
     </span>
     </span>
     </span>
     </span>
</p>
</span>
</div>

</body>
</html>

The result:

enter image description here

Desired result:

enter image description here

Any ideas?

Here's a link to the test page

Upvotes: 0

Views: 654

Answers (5)

Stichy
Stichy

Reputation: 1515

Wierd!

I solved it by changing the head:

<!DOCTYPE html>

Into:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Anyone know why? :)

Upvotes: 1

Andrew Ice
Andrew Ice

Reputation: 841

First of all, (semantics here). Set your the textruta div/class to overflow hidden. You don't want anything that's meant to be inside the container to be outside right? So that's a good start.

I don't prefer line-height for your method, but I don't know exactly what you're trying to do.

Anyways, if you set the top paragraphs line-height to some sort of percentage...(Which may have been your mistake, perhaps you set it in the wrong spot or didn't user pecentages). It works perfectly fine. As such:

.textruta{
  overflow: hidden;
}
.textruta > p{
  line-height: 80%;
}

Upvotes: 0

Dexter_ns88
Dexter_ns88

Reputation: 540

yes the
html item create extra space , if you can move out from html or you can remove element into css

br {
  display: none;
}

but it's not recommend to do thet.

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

You have some serious looking code here:

<div id="textruta" class="textruta" 
     style="padding:10px; height:116px; text-align: left; 
            left:160px; top:100px; width:280px;">
    <p>
    <span style="font-size:28px">
    <span style="font-family:frijole">
    <span style="background-color:#FFFF00">
      Hello There!
    </span>
    </span>
        <br></br>
        <br></br>
    <span style="font-size:18px"><span style="font-size:26px">
    <span style="color:#FFFFFF"><span style="background-color:#FF0000">
      123:-
    </span>
    <br></br>
    <span style="font-size:18px">
    <em>
    <span style="background-color:#FF0000">
      (234:-)
    </span>
    </em>
        </span>
        </span>
        </span>
        </span>
        </span>
    </p>
</div>

You see these hard coded line breaks: <br><br>, that is probably the cause of the extra white space.

You must be using some type of WYSISWG editor to generate this stuff, it is rather incredible!

Upvotes: 2

electrikmilk
electrikmilk

Reputation: 1043

Try doing this:

.hellomessage {
margin-bottom: -20px;
}

and it's ok I went to it and the code is kinda long

hope this helps :)

Upvotes: 0

Related Questions