• 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.

  • Posts

    • Microsoft releases major feature updates for stock Windows 11 apps

      By Neeo · Posted

      When will the Photos app be updated to remember the window size and position when reopened? They addressed this issue in a 2024 version of the app (though I can't recall the build number). Unfortunately, after that specific version, the problem persists! Please prioritise this fix in your K2 schedule. Additionally, the Snipping Tool has lost the ability to capture the Windows Taskbar starting from the 2024 version!
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By Dutchie64 · Posted

      Oh dear... my sweet summer child......
    • Spotify finally removes the disco ball app icon in the latest update

      By Xerxes · Posted

      Same, never saw it on Android or iOS. Guess only some people got it *shrugs*
    • Anthropic pulls Fable 5 and Mythos 5 after US export control order

      By pradeepviswav · Posted

      Anthropic pulls Fable 5 and Mythos 5 after US export control order by Pradeep Viswanathan In April this year, Anthropic launched the Claude Mythos Preview frontier model with state-of-the-art cyber and coding capabilities for a select set of companies around the world. After preparing appropriate guardrails, early this week, Anthropic launched Claude Fable 5 and Mythos 5, its most capable AI models. Claude Fable 5 is for general users and comes with strict safeguards, while Mythos 5 is designed with fewer safeguards for cybersecurity and biology use cases. Today, Anthropic abruptly suspended access to its Fable 5 and Mythos 5 AI models for all customers after receiving an export control directive from the US government. The company received the directive from the government today at 5:21 p.m. ET, and the received letter did not provide any details regarding the national security concern. Anthropic understands that the government became aware of a method to bypass, or “jailbreak,” Fable 5, which might be the reason behind the directive. The order was issued under national security authorities and requires the company to suspend all access to Fable 5 and Mythos 5 by any foreign national, whether they are inside or outside the United States. The restriction also applies to foreign national employees working at Anthropic. As a result, the company has disabled both models for all customers to ensure compliance. Access to previous Anthropic models like Opus and Sonnet is not affected by this government order. The company highlighted that it had developed strong safeguards to reduce the possibility that Fable is misused for tasks related to cybersecurity. In fact, many developers are complaining that the safeguards are going overboard. Additionally, the company worked with the US government, the UK AISI, multiple private third-party organizations, and internal teams to red-team Fable’s safeguards for thousands of hours. Finally, Anthropic noted that no testers have yet been able to find a universal jailbreak on Fable 5. As expected, Anthropic disagrees that a narrow potential jailbreak should lead to the recall of a commercial model used by hundreds of millions of people. It warned that applying this standard across the AI industry could effectively halt new frontier model deployments. Anthropic concluded by mentioning that it is working to restore access to Fable 5 and Mythos 5 as soon as possible and plans to share more details within the next 24 hours.
    • Brave Browser 1.91.172

      By Copernic · Posted

      Brave Browser 1.91.172 is out.

  • Recent Achievements

    • Contributor
      MarkHughes4096 went up a rank
      Contributor
    • Dedicated
      jordanspringer earned a badge
      Dedicated
    • Rookie
      Rimplesnort went up a rank
      Rookie
    • One Year In
      Markus94287 earned a badge
      One Year In
    • One Month Later
      Markus94287 earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      503
    2. 2
      +Edouard
      176
    3. 3
      PsYcHoKiLLa
      147
    4. 4
      ATLien_0
      92
    5. 5
      Steven P.
      79
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!