I have several pages that will each contain a pre-formatted block of text. I'm trying to find a way to horizontally center the entire block on the page without messing up the pre-formatting of the block itself.
The problem is that each block will vary in width, so I can't set a specific width value without determining it individually for each page. I've tried more combinations of containers and code than I can remember at this point. Setting the width attribute of the container to 0 will display the page how I want in Internet Explorer and Netscape, but shoves the block off to the right side in Opera and FireFox.
Is there some way that I can accomplish what I want purely with CSS or am I going to have to resort to writing a PHP script that will check each individual text-block and set the applicable width value?I'm not quite sure I understand what you need, but if you mean what I think you mean, simply add this to the styles of the pre-formatted block:margin: 0 auto;Here is an example (<!-- m --><a class="postlink" href="http://www.electronicdharma.com/test.html">http://www.electronicdharma.com/test.html</a><!-- m -->) of the problem I'm having.
In IE, the poem is centered with a border around it while retaining it's the preformatting. In FireFox and Opera, the poem is pushed off to the right side and the border is compacted to a single line on the left. If I adjust the width attribute to fit the exact size of the poem, it will render correctly in FireFox, but I'd rather not have to calculate the appropriate length for over 100 pages.
I tried adding the code you suggested, but it didn't work. I've fiddled with so many different code combinations that I vary well may have something messed up in the CSS at this point. If anyone has any suggestions after looking at the code, I would appreciate it.have you tried the min-width property for the frame, and the various text properties such as text-indent?
if none of these work, i'd suggest setting a css class for each second line, with a padding-left of say 10px.
eg
css:
.indentline
{
margin-left: 10px;
}
<div id ="poemframe">
poem first line<br />
<span class = "indentline">poem second line</span><br />
poem third line<br />
<span class = "indentline">poem fourth line</span><br />
</div>
just an idea.That would work if all of the poems shared the same format. However, each one is indented/spaced in varying manners, thus the need for white-space
re.
The problem is that each block will vary in width, so I can't set a specific width value without determining it individually for each page. I've tried more combinations of containers and code than I can remember at this point. Setting the width attribute of the container to 0 will display the page how I want in Internet Explorer and Netscape, but shoves the block off to the right side in Opera and FireFox.
Is there some way that I can accomplish what I want purely with CSS or am I going to have to resort to writing a PHP script that will check each individual text-block and set the applicable width value?I'm not quite sure I understand what you need, but if you mean what I think you mean, simply add this to the styles of the pre-formatted block:margin: 0 auto;Here is an example (<!-- m --><a class="postlink" href="http://www.electronicdharma.com/test.html">http://www.electronicdharma.com/test.html</a><!-- m -->) of the problem I'm having.
In IE, the poem is centered with a border around it while retaining it's the preformatting. In FireFox and Opera, the poem is pushed off to the right side and the border is compacted to a single line on the left. If I adjust the width attribute to fit the exact size of the poem, it will render correctly in FireFox, but I'd rather not have to calculate the appropriate length for over 100 pages.
I tried adding the code you suggested, but it didn't work. I've fiddled with so many different code combinations that I vary well may have something messed up in the CSS at this point. If anyone has any suggestions after looking at the code, I would appreciate it.have you tried the min-width property for the frame, and the various text properties such as text-indent?
if none of these work, i'd suggest setting a css class for each second line, with a padding-left of say 10px.
eg
css:
.indentline
{
margin-left: 10px;
}
<div id ="poemframe">
poem first line<br />
<span class = "indentline">poem second line</span><br />
poem third line<br />
<span class = "indentline">poem fourth line</span><br />
</div>
just an idea.That would work if all of the poems shared the same format. However, each one is indented/spaced in varying manners, thus the need for white-space
re.