?
Solved

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

Posted on 2013-05-27
10
Medium Priority
?
519 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 1400 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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 
LVL 53

Assisted Solution

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

Cd&
0
 
LVL 111

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

771 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