Solved

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

Posted on 2013-05-27
10
496 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
ID: 39199306
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
ID: 39199323
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 83

Expert Comment

by:Dave Baldwin
ID: 39199358
<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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 53

Assisted Solution

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

Cd&
0
 
LVL 109

Expert Comment

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

Author Comment

by:Mike Eghtebas
ID: 39199585
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 83

Expert Comment

by:Dave Baldwin
ID: 39199593
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
ID: 39199596
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
ID: 39199616
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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

776 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