PDA

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