overflowing text and more!

[PunkSktBrdr01]

I'm having problems with overflowing text. I'm using a div to hold the main content on a page, and the content text won't stay in the div. My other problem is that the page is really messed up in IE. Here's my CSS:


A {
font-family:Arial, sans-serif;
font-size:12px;
cursor:pointer;
color:#3333BB;
background-color:transparent;
}
A:link {
text-decoration:none;
}
A:visited {
text-decoration:none;
}
A:hover {
text-decoration:underline;
}
A.navlink {
text-decoration:none;
}
body {
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:5px;
color:#5588DD;
background-color:#0F0F0F;
font-family:Arial, sans-serif;
font-size:12px;
}
img {
border:0;
}
img.nav {
border:0;
cursor:pointer;
text-decoration:none;
}
table {
background-color:transparent;
border:0;
}
tr {
border:0;
}
td {
font-size:12px;
vertical-align:top;
}
div#headerdiv {
position:fixed;
left:200px;
top:0px;
z-index:5;
display:block;
width:580px;
color:#5588DD;
background-color:#0F0F0F;
text-align:center;
}
div#navdiv {
position:fixed;
left:20px;
top:140px;
z-index:5;
display:block;
text-align:center;
background-color:#0F0F0F;
color:#5588DD;
}
div#content {
position:absolute;
left:200px;
top:140px;
z-index:0;
display:block;
padding:5px;
width:570px;
background-color:#5588DD;
color:#0F0F0F;
}
hr {
background-color:#0F0F0F;
color:#000000;
}
hr.contsep {
width:90%;
height:2px;
color:#000000;
background-color:#0F0F0F;
border:0;
}
.left {
text-align:left;
}
.center {
text-align:center;
}
.right {
text-align:right;
}
.justify {
text-align:justify;
}


Here's a link to the actual page:

http://www.radioactiverabbit.com/writing/index.php

Thanks!

[xataku_nakusute]

well...first off, i didnt see any overflow attributes within your css, but anyway, to keep your text from expanding the divs width, you can add this to your divs' style attributes:

wrap: virtual;

[PeOfEo]

http://forums.webdeveloper.com/showthread.php?s=&threadid=16422 we are talking about overflow differences on ie and mozilla right there and that might help you sove your problems.

[PunkSktBrdr01]

Thanks. I tried your suggestions, but they didn't seem to work. I think you misunderstood the problem, but that's my fault, 'cause I gave you a bad test page. The problem isn't that the div expands, it's that the text keeps doesn't wrap inside the div. It just keeps going until there's a line break. Here's the new CSS:


div#headerdiv {
position:absolute;
left:200px;
top:0px;
z-index:5;
display:block;
white-space:normal;
width:580px;
height:140px;
color:#5588DD;
background-color:#0F0F0F;
text-align:center;
}
div#navdiv {
position:absolute;
left:20px;
top:140px;
z-index:5;
display:block;
white-space:normal;
text-align:center;
background-color:#0F0F0F;
color:#5588DD;
}
div#content {
position:absolute;
left:200px;
top:140px;
z-index:0;
display:block;
white-space:normal;
clip:auto;
padding:5px;
width:570px;
background-color:#5588DD;
color:#0F0F0F;
}


Here's a link to a better example page:

http://www.radioactiverabbit.com/writing/viewstory.php?id=18

Thanks!