I want to make contenteditable div works like as it works on Chrome in firefox and chrome as if i dont hit Enter and keep pressing keys then content becomes overflow from div's width in Firefox(26 ver) and IE9 but in Chrome it automatically adjust in div's width here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
div {
width:20%;
height:100px;
border:1px solid;
}
</style>
</head>
<body>
<div contenteditable="true"></div>
</body>
</html>
and i have created bin here
You need to apply word-wrap property in css so it will work as expected.
CSS:
div {
width:20%;
height:100px;
border:1px solid;
word-wrap: break-word; /*Added property*/
}
DEMO
Related
I have a problem in IE8 when using text-overflow and overflow hidden. Although IE8 correctly trims the text and hides its overflow from the view, the span with the truncated text still blows out the width on the parent element.
Using a fixed width on either the span or its parent element works fine but unfortunately I can not use a fixed width. I have tried using a width:100% and max-width on the truncating span element as well as putting a max-width on the parent element with no luck in IE8.
Any suggestions would be very helpful.
fiddle here:
http://jsfiddle.net/cmoeser/aRvXg/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<style type="text/css">
.containerDiv {
float:right;
border:1px solid green;
overflow:hidden!important;
zoom:1;
}
.textDiv {
float:left;
zoom:1;
white-space: nowrap;
display:block;
max-width:128px;
overflow:hidden;
-ms-text-overflow: ellipsis;
text-overflow:ellipsis;
}
</style>
<body>
<div class="containerDiv">
<span class="textDiv">WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW</span>
</div>
</body>
</html>
what if you try
.textdiv {float:right; text-align:left;}
can't use js fiddle on ie8
Below is a simple code in which I have implemented multiple background images to body, but this code does not work in IE 7 and 8 whereas it works in all other browsers. I have used PIE.htc which is relative to the html document,but still no success. Please help me to solve this example.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body style="background: url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; behavior: url(http://localhost/mutliple_bg/PIE.htc);
-pie-background:url(header_top_border.png) repeat-x, url(bg_1px.jpg) repeat-x; position:relative; zoom:1; z-index:1;">
</body>
</html>
Sorry hasty read of your question, just noticed your using pie.
PIE doesn't support multiple backgrounds on BODY element;
Solution: create div container for body.
Multiple backgrounds are only supported by IE9 and above.
use div positionrelative and absolute
i think this is the easy way to fix cross browser problem hope it help...
click here for working fiddle
html
<div class="parent">
<div class="colorLeft"></div>
<div class="contentArea"></div>
</div>
css
.parent {
float:left;
width:100%;
height:200px;
background-color:#555;
position:relative;
z-index:1;
}
.colorLeft {
width:50%;
float:left;
height:200px;
background-color:blue;
position:absolute;
z-index:-1;
}
.contentArea {
width:400px;
background-color:#fff;
height:180px;
margin:10px auto;
}
I'm pulling my hair out here. I just want two divs side by side containing content that resizes the divs and their containing divs based on the content with all content visible, no scroll.
The following markup isn't my site but I have written it to demonstrate what I want:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style>
#outer{
width:400px;
}
#innerleft{
width:200px;
float:left;
}
#innerright{
width:200px;
color:#900;
float:left;
}
</style>
</head>
<body>
<div id="outer">
<div id="innerleft">
sdgfjfdbvkjfdbvkjfdbvkjdfbvkjdfbvkjdfbvkjdbvkjdfbvkjdfbvkjdfbvkjdfbvkjdfbjkfbvjkdfbdfkjdfbjkfdbkjdfjvfjkbfvbjkfvkjbvbfjdjdfdfbdfj
</div>
<div id="innerright">
dsufbjksvkudfsvkdfubvjkdfhbvkhdfbvksdbvkjsdbvkjdsbvkjsbdvkjbsdvkjbsdkjvbskjvbsdkjvbskdjbvksdbvksdjvbkjdsbvkjsbvkjsdbvkjdsbvkjdsksbdjv
</div>
</div>
</body>
</html>
I seem to have tried everything!
Apply word-wrap:
#outer > div
{
word-wrap: break-word;
}
http://jsfiddle.net/NEbj7/1/
To make it automatically resize you want to add more -- % percentage to make it automatically fill the space
#outer{
width:100%; /* 100% */
}
#innerleft{
width:50%; /* 50% */
float:left;
word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}
#innerright{
width:50%; /* 50% */
color:#900;
float:left;
word-break:break-all; /* Lines may break between any two characters for non-CJK scripts */
}
http://jsfiddle.net/eZpvr/1/
Browsers by default won't wrap the text which doesn't have any white space in it. To force the browser to wrap the text you must add the word-wrap property to #innerleft and #innerright
#innerleft, #innerright{
word-wrap: break-word;
}
reference: http://webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap
I'm having a CSS problem in IE8. The full height of .test_div is not showing when I add an opacity in #header. But the full height of .test_div will show when I remove the opacity.
This works in Chrome and Firefox, but not in IE8. Am I doing something wrong?
Thank you!! :)
The code is also here:
http://jsfiddle.net/VPkXu/
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header">
<div class="test_div">test square</div>
</div>
</body>
</html>
CSS:
#header {
position:absolute;
z-index:10;
height:100px;
width:300px;
background: #888;
/* remove the lines below, the full height of .test_div will be visible (IE8)*/
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter:alpha(opacity=70);
}
.test_div {
background:#CCC;
height:500px;
width:200px;
}
easiest way would be to take out this div from inside of #header
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="header"></div>
<div class="test_div">test square</div>
</body>
</html>
and apply position and z-index to .test_div
.test_div {
z-index: 11;
position:absolute;
}
see http://jsfiddle.net/7aXJD/
Specifically, I am referring to a situation where you need to have a total width of say 100% on a DIV, but a 10 pixel padding and 1 pixel border. (And don't rely on the browser automatically setting it to that width — say it's floated left for instance.)
Is there any simple way to accomplish this without using JavaScript?
No, there's no way to set this on one element that works with the currently major browsers.
You could use 2 nested divs. Set the 100% width on the outher div, and set the padding and border on the inner div.
If you use box-sizing: border-box you can set width: 100%; border: 1px solid black; padding: 10px; and the total of the width, border, margin, and padding will be what is specified for the width. Source
EDIT: True, browser support is a bit limited. FF 3.5 and Safari 4 support it, not sure about IE8 or Chrome.
What about the following solution?
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Content with Menu</title>
<style type="text/css">
.content .outer{
width:100%;
border:1px solid black;
background-color:green;
}
.content .inner{
margin-left:10px;
margin-right:10px;
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="outer">
<div class="inner">
<p>Hi!</p>
</div>
</div>
</div>
</body>
</html>
Update
OK, doesn't accomplish what you are talking about with just one element.
That's only possible with CSS 3.