• 0

[CSS] Text Overflows from DIV

Asked by chuayw2000,

 Share

Question

Community Regular

chuayw2000

Posted
Posted

Here's my problem: I am trying to get text to fit into a fixed width DIV without overflowing from its container. IE displays this correctly

ie1.th.jpg

But not firefox.

firefox.th.jpg

<table> doesnt do anything. Below is the HTML

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;Warnborough Educational Centre - Home&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;link href="css.css" type="text/css" rel="stylesheet" /&gt;

&lt;/head&gt;
&lt;body bgcolor="#FFFFFF"&gt;
&lt;center&gt;
&lt;!-- ImageReady Slices (template4.psd) --&gt;
&lt;table id="Table_01" width="744" border="0" cellpadding="0" cellspacing="0" style="text-align: left;"&gt;
    &lt;tr&gt;
        &lt;td colspan="10"&gt;

            &lt;img id="header" src="images/header.png" width="744" height="10" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="2"&gt;
            &lt;img id="template4_02" src="images/template4_02.png" width="38" height="2" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img id="empty_left" src="images/empty_left.png" width="3" height="2" alt="" /&gt;&lt;/td&gt;
        &lt;td colspan="7"&gt;
            &lt;img id="template4_04" src="images/template4_04.png" width="703" height="2" alt="" /&gt;&lt;/td&gt;

    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="10"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="banner" src="images/banner.png" width="744" height="84" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="5"&gt;
            &lt;a href="index.php"&gt;

                &lt;img id="banner007" src="images/banner-07.png" width="126" height="1" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="3"&gt;
            &lt;a href="about.php"&gt;
                &lt;img id="about" src="images/about.png" width="126" height="40" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td colspan="3"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="banner009" src="images/banner-09.png" width="378" height="1" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="3"&gt;
            &lt;a href="course.php"&gt;

                &lt;img id="courses" src="images/courses.png" width="114" height="40" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="4"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="home" src="images/home.png" width="125" height="35" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;
            &lt;img id="template4_11" src="images/template4_11.png" width="1" height="39" alt="" /&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;

            &lt;a href="contact.php"&gt;
                &lt;img id="contact" src="images/contact.png" width="126" height="39" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;
            &lt;a href="teacher.php"&gt;
                &lt;img id="yeacher" src="images/yeacher.png" width="126" height="39" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
        &lt;td rowspan="2"&gt;
            &lt;a href="course.php"&gt;
                &lt;img id="courses015" src="images/courses-15.png" width="126" height="39" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;

    &lt;tr&gt;
        &lt;td&gt;
            &lt;img id="template4_15" src="images/template4_15.png" width="4" height="4" alt="" /&gt;&lt;/td&gt;
        &lt;td colspan="3"&gt;
            &lt;a href="index.php"&gt;
                &lt;img id="home017" src="images/home-17.png" width="121" height="4" border="0" alt="" /&gt;&lt;/a&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="10" style="white-space:nowrap;width:744px;background-image:url('images/content.png');background-repeat:repeat-y;"&gt;&lt;div style="position: relative; left:10px;width:728px;"&gt;

                &lt;!-- Content --&gt;
                &lt;table style="width:100%; height:20px;"&gt;&lt;tr&gt;&lt;td style="vertical-align:center;"&gt;
                &lt;!-- Tree --&gt;
                 &lt;a href="index.php"&gt;Home&lt;/a&gt; &gt;&gt; News&lt;/td&gt;
                &lt;td style="text-align:right; vertical-align:center;"&gt;&lt;!-- Sitemap--&gt;
                &lt;a href="sitemap.php" style="font-weight:bold;"&gt;Sitemap&lt;/a&gt;

                &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
                &lt;hr&gt;&lt;div class="content_box"&gt;
&lt;span class="title"&gt;Welcome to Warnborough Educational Centre&lt;/span&gt;&lt;br&gt;
Committed to excellence in education, Warnborough Educational Centre makes a vital contribution to providing high quality and cost-effective enrichment education courses in the English language
&lt;br&gt;&lt;br&gt;
Warnborough Educational Centre was established on 25&lt;sup&gt;th&lt;/sup&gt; February 2002. The centre has been involved in offering enrichment courses to the public for two years. Courses have also been designed and taught to teachers of phonetics.

&lt;/div&gt;&lt;/div&gt;
&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;

        &lt;td colspan="10"&gt;
            &lt;img id="bott" src="images/bott.png" width="744" height="20" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td colspan="10"&gt;
            &lt;img id="content020" src="images/content-20.png" width="744" height="1" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;

            &lt;img src="images/spacer.gif" width="4" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="34" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="3" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="84" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="1" height="1" alt="" /&gt;&lt;/td&gt;

        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;
            &lt;img src="images/spacer.gif" width="126" height="1" alt="" /&gt;&lt;/td&gt;
        &lt;td&gt;

            &lt;img src="images/spacer.gif" width="114" height="1" alt="" /&gt;&lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;


© 2004 
Warnborough Educational Centre &lt;br&gt;10 Anson Road #30-07 International Plaza Singapore 079933
&lt;br&gt;Tel: 6559 9129
Fax: 6477 9922
&lt;/center&gt;
&lt;!-- End ImageReady Slices --&gt;
&lt;/body&gt;
&lt;/html&gt;

And CSS

/* Basic Elements */
body, html {
	background-color: #ffffff;
	font-family:arial;
	font-size:12px;
	color:#000000;
	margin: 0 auto;
}
td,div,span,p{
	font-family:arial;
	font-size:12px;
	color:#000000;
}
img{
	border: none;
}
hr{
	border: #aaaaaa 1px solid;
	background-color: #aaaaaa;
}
ul,ol{
    list-style-image: url(images/bullet.gif);
	list-style-position: outside;
	margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    margin-left: 9px;
    padding-left: 9px;

}
/** Link **/
a:link{
	color: #999999;
	text-decoration: none;
}
a:visited{
	color: #999999;
	text-decoration: none;
}
a:hover{
	color: #ff0000;
}

/** Input **/
input{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #cccccc;
	cursor: pointer; 
	color: #FFFFFF;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
input:hover{
	border: #000000 1px solid; 
	font-size: 11px; 
	background-color: #ffffff;
	cursor: pointer; 
	color: #000000;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

input:active{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

input:focus{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
select{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #cccccc;
	cursor: pointer; 
	color: #FFFFFF;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
select:hover{
	border: #000000 1px solid; 
	font-size: 11px; 
	background-color: #ffffff;
	cursor: pointer; 
	color: #000000;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

select:active{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

select:focus{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

textarea{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #cccccc;
	cursor: pointer; 
	color: #FFFFFF;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}
textarea:hover{
	border: #000000 1px solid; 
	font-size: 11px; 
	background-color: #ffffff;
	cursor: pointer; 
	color: #000000;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

textarea:active{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}

textarea:focus{
	border: #444444 1px solid; 
	font-size: 11px; 
	background-color: #999999;
	cursor: pointer; 
	color: #ffffff;
	font-family: tahoma,sans-serif; 
	text-decoration: none
}



/* Text Classes */
.title{
    font-size: 15px;
	color: #000000;
	font-family: arial;
	text-decoration: underline;
	font-weight: bold;
}
/** Table Classes **/
.menutable{
	border: #444444 thin dotted;
}
.maintable{
	border: #444444 thin dotted;
}
.newstable{
	background-color: #CED0D2;
	border: #cccccc thin solid;
}
/* Misc. Classes */
.borderless{
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
	border: 0px;
}
.content_box{ 
    width: 700px;
    border-style:solid; 
    border-width: 1px; 
    border-color:#999999; 
    background-color:#FFFFFF
    overflow:scroll;
    position:relative;
    left:2%;
    
}

Any help is appreciated :D

Link to comment
https://www.neowin.net/forum/topic/242048-css-text-overflows-from-div/
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Veteran

metal_dragen Veteran

Posted
  • Veteran
Posted

You're missing a semicolon (;) after the background-color in your .content_box class. You also have a closing div (</div>) twice after your content, even though you only have one open. Make sure you validate that page. I guarantee you'll have a lot to clean up.

Also, learn how to use the short syntax of CSS properties - it'll clean up and compact your code a lot more.

For example:

This:

border-style:solid;
border-width: 1px;
border-color:#999999;

would become this:

border: 1px solid #999;

  • 0
Community Regular

chuayw2000

Posted
  • Author
Posted

Oh, I fixed the CSS problem and now it gives me a horizontal scrollbar instead.

What I want to achieve is what IE is displaying. Is there anyway to wrap the text before thet get out of the box?

And the two </div> is correct, according to W3C Validation. (The rest of the validation errors were my fault: I forgot to change <br> to <br /> and <hr> to <hr />)

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.