Resolved Content editable div reduce line spacing [Archive]

View Full Version : Resolved Content editable div reduce line spacing

keyboard

02-08-2012, 09:09 AM

Hello everyone,

This is my code

<HTML>
<HEAD>
</HEAD>
<BODY STYLE="overflow:hidden; margin:0px; background-color:grey;">
<DIV ID="oDiv" CONTENTEDITABLE STYLE="height:60%; background-color:white; overflow:auto; width:30%; line-height:10%;">
</DIV>
</BODY>
</HTML>

Is there any way to remove the giant spacing between each line in the div?
I've tried css line-height.
Keyboard1333

jscheuer1

02-08-2012, 01:59 PM

Firefox 'gets it right' IE inserts a p for each line break from the enter key, Firefox a br tag. You can use style in the head of the page to 'fix' IE, or just don't hit the enter key unless you want a new paragraph.

The 'fix':

<style type="text/css">
#oDiv p {
margin: 0;
}
</style>

Full demo:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
}
body {
overflow: hidden;
margin: 0px;
background-color: gray;
}
#oDiv {
height: 60%;
background-color: white;
overflow: auto;
width: 30%;
}
#oDiv p {
margin: 0;
}
</style>
</head>
<body>
<div id="oDiv" contenteditable></div>
</body>
</html>

keyboard

02-08-2012, 09:27 PM

Thanks jschuer1