Solved

<pre> and  <div> tag conflict....

Posted on 2013-05-27
10
493 Views
Last Modified: 2013-05-27
Some content from a txt file is put in <pre></pre> tags in a html file. This works well. It maintains break lines and spacing.

Because some of the lines from the text file are very long. In order to force them wrap, I added a div tag with width: 75%; but it works only when I remove <pre> tags.

I need the functionality from both <pre> and <div> tags.

Question: How can I make this work?

Thank you.

<pre>
<div id="tableSchema">

There are seven tables to handle this application. The table structure here is fairly normalized and accomplishes the following tasks:
•	Makes data digestible (atomic - broken down to its simplest form) for accurate and powerful reporting operations.
•	Cuts down the number of tables to 1/3 by combining some 20 tables into two tables (tDefinition and tResponseSpecific).
•	Facilitates development of robust and user-friendly interfaces resulting in continuous savings for the life of the application.
•	Is ready to handshake with any additional tables required to perform some functionalities in the future.
Table Descriptions:
CDS-specific data is stored in four tables, tRequest (4),  tPositionRequest (5), tResponse (6) , and tResponseSpecific (7). The remaining five tables handle the generic data that is already in use by the other Oracle based applications. For performance purpose, because this application uses less than 0.5% of the data in the existing Oracle tables, the following redundant tables are included with this application:

Generic (utility) tables:
1.	tPeople:
This table keeps personal data such as name, address, phone, etc. regardless of what work they perform.  Only first name, MI, and last name are entered to this table. The rest of the fields in this table are uploaded frequently based on some other well maintained tables. 

2.	tPosition:
This table matches people’s function(s) throughout the system allowing a professional to be assume different hats at different groups. in one or more facilities. Allowing, for example, a doctor function at different capacities in different groups in one or more facilities.  
</div>
</pre>

Open in new window



I have tried the following also but it hasn't worked:

<div id="tableSchema">
<pre>
.
.
</pre>
</div>
0
Comment
Question by:Mike Eghtebas
  • 2
  • 2
  • 2
  • +2
10 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
The reason is inside of the pre tag is taken as your code.  You should be able to use your css on your pre tag.

pre {width:400px;}
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 350 total points
Comment Utility
I found this helps

.wrapper{width:300px;}
pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}

Open in new window


Where you have
<div class="wrapper">
    <pre>
             some
                        pre
                                    stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff
    </pre>
</div>
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
<pre> means pre-formatted.  You can't pre-format with <pre> and re-format with <div> at the same time.  You can set the width in characters but not all browsers support that.

I tried to 'style' your <pre> text in Firefox, IE, and Chrome.  They all ignored any styling inside the <pre> tags and the text ran right off the page.  Time for another plan.
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 150 total points
Comment Utility
pre  {width:600px;overflow-x:scroll;}

Cd&
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
Please explain what functionality of the <pre> tag you're relying on, thanks.
0
 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
Ray,

There is a txt file containing some code. It includes some line-breaks and tabs to space out the content.
-- PL/SQL, CDS Project, 2012
-- See additional notes at the end.

-- create tPeople.
-- users are expeced to enter only tPeople.nuid, the rest of the information will be refreshed 
-- nightly or on demand using the existing tables in the Oracle database.  
CREATE TABLE tPeople (
	peopleID		number(6)		not null,
	admin			char(1)			not null default 'N', 
	submitter		char(1)			not null default 'N', 
	operator		char(1)			not null default 'N', 
	builder			char(1)			not null default 'N',

Open in new window



To format it in a html file, I use <pre>

Also see:  http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_28139845.html

----------
COBOLdinosaurPosted,

pre  {width:600px;overflow:scroll;}

works okay. Please note that I had to remove -x (ASP 4.0)
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
Both @padas's and Cd&'s methods both work to limit the space occupied by the text in the <pre> tag in IE, Firefox, and Chrome.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
Yeah overflow should work the same way as overflow-x as long as you don't use a fixed height.

Cd&
0
 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
padas,

My apology for not trying your solution properly.  It works very well and I will put a request to reopen and regrade the solutions mostly because your solution was posted first (as EE car race flag implies, first correct answer gets the points).

Regards,

Mike
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now