/prog/ - ☆ HTML5 ☆

Name: Anonymous 2010-05-26 1:45

There's something about HTML5 that doesn't allow you to use the line-height property on <code> tags.

This is terrible!

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

code {line-height:90%;}

p.big {line-height:270%;}

</style>

</head>



<body>

<p>

This is a paragraph with a standard line-height.

The default line height in most browsers is about 110% to 120%.

This is a paragraph with a standard line-height.

</p>



<code>

This is a paragraph with a smaller line-height.

This is a paragraph with a smaller line-height.

This is a paragraph with a smaller line-height.

</code>



<p class="big">

This is a paragraph with a bigger line-height.

This is a paragraph with a bigger line-height.

This is a paragraph with a bigger line-height.

</p>



</body>

</html>

Name: Anonymous 2010-05-26 2:26

There's something about HTML5 that doesn't allow you to use the line-height property on <code> tags.
i call bullshit. http://dev.w3.org/html5/spec/Overview.html#the-code-element specifies no such thing. also, line-height works fine with <code> tags in my browser:
data:text/html,<!DOCTYPE html>%0a<html><head><style type="text/css">p{border:1px solid black}code.big{line-height:1000%}</style></head><body><p><code>normal</code></p><p><code class="big">big</code></p></body></html>

your problem seems to be that your <code> is not in a paragraph.

Name: Anonymous 2010-05-26 2:33

>>3
code.big
<code class="big">
Here's the problem.

OP is:
code {line-height:90%;}
Try without using classes.

Name: Anonymous 2010-05-26 2:47

>>3
No, that's total bullshit. I don't want to increase the line-height to 1000%, I want to decrease it to 90%.

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

code {line-height:190%;}

</style>

</head>

<body>

<p>

<code>

This is a paragraph with a smaller line-height.<br>

This is a paragraph with a smaller line-height.<br>

This is a paragraph with a smaller line-height.

</code>

</p>

</body>

</html>

Try it.

Name: Anonymous 2010-05-26 3:39

>>5
whoops, that's supposed to be 90%, not 190%

Name: Anonymous 2010-05-26 5:49

Hmm, for some reason, CODE is defaulting to inline...

code {display:block; line-height:90%;}
That seems to fix it.
Also, inline-block works as well if you have specific need for inline.

Name: Anonymous 2010-05-26 5:57

>>7
You, sir, are a gentleman and a scholar.

Name: Anonymous 2010-05-26 5:59

>>7
Christmas and the Internets has been saved.

Name: Anonymous 2011-01-31 20:39

<-- check em dubz

Name: Anonymous 2011-02-04 19:11

Newer Posts

☆ HTML5 ☆

1 Name: Anonymous 2010-05-26 1:45

3 Name: Anonymous 2010-05-26 2:26

4 Name: Anonymous 2010-05-26 2:33

5 Name: Anonymous 2010-05-26 2:47

6 Name: Anonymous 2010-05-26 3:39

7 Name: Anonymous 2010-05-26 5:49

8 Name: Anonymous 2010-05-26 5:57

9 Name: Anonymous 2010-05-26 5:59

11 Name: Anonymous 2011-01-31 20:39

12 Name: Anonymous 2011-02-04 19:11