Solved

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

Posted on 2013-05-27
10
510 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
  • 2
  • +2
10 Comments
 
LVL 53

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 53

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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 53

Assisted Solution

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

Cd&
0
 
LVL 110

Expert Comment

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

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 34

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Find out what you should include to make the best professional email signature for your organization.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

707 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