CSS - Text Overflow

I have a problem with a page on my website. Some of the text on the bottom of the page floats over the text at the top of the page. The only browser where it looks good is IE6.

So i dragged my page through de XHTML checker of W3C and debugged until it had no errors. Next I did the same with my css file.

I used the browsercam to see if it made any difference. Unfortunately it didn't.

It still has the error and i don't know how to fix it or where to start. I hope someone can help me out here.

Or maybe someone can tell me where i can find some info about these problems. Browsing this forum, i see that i am not the only one who is having problems with different browsers.

You can see here how the webpage looks in IE6 on XP (This is how it should look in other browsers).
You can see here how the webpage looks in Safari
You can see here how the webpage looks in IE5 on Win 98.

This is my css:

Quote:
body {
background-color: White;
color: Black;
}

a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color: Black;
}

a:link {
color: #F0027F;
}

a:visited {
color: #F0027F;
}

a:active {
color: #F0027F;
}

a:hover {
color: Black;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {
position:absolute;
left:50%;
width: 600px;
margin-left: -300px;
border: 1px solid Black;
background-color: White;
}

}

#banner {
background-color: White;
border-bottom: 1px solid White;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
height: 42px;
padding: 0px;
text-align: left;
width: 310px;
padding-left: 0px;
}

#banner-commentspop {
background-color: White;
border-bottom: 1px solid Black;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: x-large;
font-weight: bold;
padding: 0px 10px;
text-align: left;
width: 310px;
}

#banner a {
color: #FFFFFF;
text-decoration: none;
}

#banner1 {
font-size: xx-large;
font-weight: bold;
width: 600px;
padding-left: 0px;
border-bottom-width: 1px;
border-bottom: 1px dashed #F0027F;
color: #F0027F;
height: 0px;
}



#content {
background-color: #FFFFFF;
color: Black;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
overflow: hidden;
padding: 5px 5px 5px 0px;
width: 350px;
border-right-width: 10px;
border-style: none dashed none none;
border-right: 1px dashed #F0027F;
margin-right: 20px;
padding-bottom: 20px;
}
#menu {

font-family: Arial, Helvetica, sans-serif;
margin-bottom :15px;
color: Black;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size: 8pt;
overflow: hidden;
padding: 0px 0px 0px 10px;
background-color: White;
border-style: none none none dashed;
}

.blog {
background-color: White;
padding: 10px 0px;
width: 310px;
margin-top: 45px;
}

.blog p {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
}

.blog blockquote {
}

.blog li {
}

.blog h2 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
border-bottom: #000000;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
padding: 0px 70px 30px;
}

.blog h3 {
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 17pt;
text-align: left;
font-weight: bold;
margin-bottom: 0px;
}

.blog .blogphoto {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
width: 30px;
float: left;
text-align: left;
padding-top: 40px;
}


.blog .blogbody {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
width: 250px;
margin-left: 70px;
float: right;
margin-top: -155px;
}

.blog .posted {
color: #2CB0CF;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
line-height: normal;
text-align: left;
border-bottom: 1px dotted #F0027F;
width: 245px;
margin-bottom: 40px;
font-style: italic;
border-bottom-width: 1px;
padding-bottom: 10px;
}

#links {
background-color: White;
overflow: hidden;
width: 190px;
margin-left: 0px;
border-left: 1px dashed EF1385;
padding-left: 30px;
border-left-width: 1px;
border: 1px dashed #F0027F;
border-bottom: 0px;
border-right: 0px;
border-top-width: 0px;
padding-bottom: 700px;
padding-top: 30px;
}

.side, .syndicate, .powered {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
padding: 3px 15px 10px 0px;
text-align: left;
}

.side a {
text-decoration: none;
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
}

.side a:link {
color: #F0027F;
font-weight: bold;
}

.side a:visited {
color: #F0027F;
}

.side a:active {
}

.side a:hover {
color: Black;
}


.calendar {
line-height: 140%;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}

.calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font: 8pt;
font-weight: bold;
}

.calendar caption {
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
border-bottom: 1px solid #999999;
text-align: left;
font-weight: bold;

text-transform: uppercase;
padding: 3px;
letter-spacing: .3em;
}

.calendar th {
text-align: center;
font-weight: normal;
}

.calendar td {
text-align: center;
}

.sidetitle {
border-bottom: 1px solid Black;
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
letter-spacing: normal;
text-transform: uppercase;
}

.side ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

.side li {
color: #000000;
text-align: left;
margin-top: 0px;
list-style-type: none;
}

.side img {
border: 1px solid Black;
float: left;
}

.photo {
text-align: left;
float: left;
}

.link-note {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
text-align: left;
padding: 2px;
margin-bottom: 15px;
}

.comments-head {
border-bottom: 1px dashed #F0027F;
color: #F0027F;
font-family: Arial, Helvetica, sans-serif;
font-size: 17pt;
font-weight: bold;
margin-bottom: 10px;
text-align: left;
margin-left: 70px;
}

.comments-body {
color: Black;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
text-align: left;
margin-bottom: 10px;
margin-left: 70px;
}

.comments-body textarea {
width: 75%;
}

.comments-post {

border-top: 1px dotted #F0027F;
color: #2CB0CF;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
line-height: normal;
padding: 3px;
text-align: left;
}

.extended {
font-size: 8pt;
font-style: normal;
margin-bottom: 1ex;
width: 400px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: Black;
}

I currently have a PRE tag inside a DIV tag. The DIV tag has a limited size.
Often a long line of text will stretch outside the PRE tag. I do not mind this horisontal overflow as
the contents has more meaning when it is not wrapped.

My problem is that this overflow text flows under the right hand navigation column on my site. I would like the
PRE tag to be above everything else on my site. How can I do this?

The overflow text seems to have no background, making it hard to read if it is over an image.
Is there any way to get overflow text to have a brackground without expanding the PRE tag?

My CSS works in IE and Mozilla but not Netscape or Opera
I have a 2 column website, built with 2 relative position DIVs, with overflow set to auto. Because of this, I turned off overflow on the body tag and on the html tag (overflow: hidden;). I didn't want to have 2 scroll bars on the right side of the window. When I first tested this on 4 browsers, IE, Mozilla, Netscape and Opera, it worked great, only having one scroll bar on the right side of the window when the page was longer than the window height. But when I moved to a new host server recently, I discovered that Netscape and Opera stopped working. They now simply give me blank screens. When I remove the "overflow: hidden;" specifications from the body tag and the HTML tag in my CSS file, Netscape and Opera once again display my web pages. However, now I get 2 scrollbars on the right side of all 4 browsers (in IE, the second scrollbar isn't actually there, but the space holder for the scrollbar is there).

Is there a cross browser way for doing what I'm trying to do? Or am I faced with detecting the browser type on the server-side, and setting the style sheet appropriately?

Here are the related parts of my CSS:

/* CSS styles */
BODY {
font-family : Verdana, Arial, Helvetica, sans-serif ;
font-size : 10pt;
background : Black;
color : White;
margin: 0;
padding: 0;
border-width: 0;
overflow: hidden;
}


HTML {
overflow: hidden;
}


#LeftNavDIV {
position:relative;
width:185px;
height:100%;
float:left;
padding:2px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:1px solid white;
overflow:auto;
}


#ContentDIV {
position:relative;
height:100%;
width:75%;
float:right;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border:0px dashed #336699;
overflow:auto;
}

Hi all,
I'm working on the site http://boolarongpress.com.au and have hit a problem.

In IE7 if you click into either the title or author search fields in the left hand nav menu the cpu usage maxes out and IE7 hangs.

There is no javascript attached to these inputs.

The problem seems to be caused by a line in the css,

overflow: auto;

This is set for the content div so that it scrolls as if it were a frame.

If I remove this line from the css the problem dissappears but of course the content div no longer scrolls.

Has anyone got any ideas on how I can fix/work around this issue?

Cheers,
Peter

How do I make the DIV overflow in the below codes? It works in IE but not
firefox.



<html >
<head>
<style type="text/css">
html, body { height : 100%; }
</style>
</head>
<body>

<table style="height : 100%; width : 100%">
<tr style="height : 64px; background-color : Blue;">
<td></td>
</tr>

<tr style="height : auto; background-color : red;">
<td>
<!-- THIS IS THE PROBLEM -->
<div style="height :auto; overflow-y : scroll">
<!-- THIS IS THE PROBLEM -->

asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
asd<br />
</div>
</td>
</tr>

<tr style="height : 64px; background-color : Blue;">
<td></td>
</tr>
</table>

</body>
</html>