How to fix text overlapping in Firefox

  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

Hi,
I am using Yahoo SiteBuider that uses absolute position and fixed size for text boxes and span style for font size. Apparently, Firefox does not obey either since when I increase font size via View menu, texts grow and overlap with other objects.

Is there a way to fix the overlapping?

To make it more difficult, Y!SiteBuilder does not allow direct html edit. It only has a menu to add script before and after text box or into html head. The script for text box looks like this:
<div id="e0" style="position:absolute;left:105;top:90;width:90;height:30;"><!--$begin htmlBefore$--> <!--code before--> <!--$end htmlBefore$--><span class="text"><span style="font-size:14px;line-height:17px;">TEXT BOX<br soft></span></span><!--$begin htmlAfter$--><!--code after--><!--$end htmlAfter$--> </div>

I can only add html where you see <!--code before--> and <!--code after--> or html head.
Any ideas appreciated.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

Try that in IE... most likely you will get the same thing.

If you manually adjust font size via your browser, your text would increase no matter what...

To circumvent this, you would have to change your positioning from absolute heights.

I can't think of any other ways to do such thing.
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

Bogey wrote:
Try that in IE... most likely you will get the same thing.

If you manually adjust font size via your browser, your text would increase no matter what...


Bogey,
Actually, no, in IE font size does not change if you use span style like <span style="font-size:14px;line-height:17px;">. It only changes with Firefox. In any case, with set width and height of the text box, I would expect to get placeholders when text increases.
Lzr
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

Bogey wrote:
...To circumvent this, you would have to change your positioning from absolute heights.

I can't think of any other ways to do such thing.


Having done some search, I found postings elsewhere mentioning overflow:auto and scroller. I guess a solution for overlapping could be to automatically invoke scroll bars when text expands to keep it confined to designated area instead of overflowing. Being inexperienced with html I can't figure out how to do it.
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

Heres a simple example of how to do that... simple CSS implementation.

The CSS
CSS Code: [ Select ]
.scroll {
 width: 600px;
 height: 700px;
 overflow: auto;
}
  1. .scroll {
  2.  width: 600px;
  3.  height: 700px;
  4.  overflow: auto;
  5. }

And the HTML
HTML Code: [ Select ]
<div class="scroll">
<p>Eirmod doctus dolores cu has. His no enim inimicus maiestatis, quaestio dignissim hendrerit est an. Vis soleat impedit scriptorem in. Duo at putant definitionem, ei per odio tota accumsan. Ceteros reprehendunt ei pri.</p>
 
<p>Legimus tibique incorrupte sed cu, cu eum appetere partiendo, et mel nostrum suscipiantur. Epicuri offendit no ius. An qui impetus volumus, cu has quis ubique oportere. Nibh option placerat vel eu. Mel detracto erroribus referrentur ei.</p>
 
<p>come posse voluptua necessitatibus eu, eos ex dolor inimicus principes. come tation libris eu, duo ea legimus detraxit scriptorem. Choro sanctus assentior vix ne, qui clita virtute ex, ad paulo iuvaret numquam mei. An mazim perpetua periculis vim, has eu liber placerat. Odio splendide duo an.</p>
 
<p>Ius quidam vivendum invenire ea, invenire intellegam necessitatibus his an, at pri discere molestiae. Mei et natum integre. His hinc nihil quidam id, mel graeco percipit rationibus id. Etiam labore cetero id per.</p>
 
<p>Te minim maiestatis est. No feugiat salutatus nam, vix unum erant no. Ius at oblique corpora moderatius, noster contentiones sit in. At mel affert quaeque quaestio. Constituto mnesarchum dissentias his eu, admodum adipisci dissentiunt te eum. Ea vero movet diceret nec, ad saepe persius sit.</p>
 
<p>Eam falli libris ei, ut agam offendit atomorum vis, tale voluptaria te vel. Cu eam falli pericula. Vis no alii semper recusabo, no duo omittam recteque. Sit at alienum accusam tincidunt, modo inermis detracto ius ei, copiosae vivendum atomorum no eum.</p>
 
<p>At vel meliore definitionem, mazim senserit periculis cu ius. Mea te ullum probatus reprehendunt, te ius debitis convenire. Cu nobis consul eripuit duo, mel ne corrumpit interpretaris. Eu ius civibus lobortis, omnes phaedrum persequeris vis et, qui sumo cibo appellantur cu. Labores appetere adolescens cu come.</p>
 
<p>Senserit evertitur ius ut, cu zzril molestie has. Mel dicit similique et. Ad affert philosophia mei, diam doming possim ius ex. Virtute perpetua inciderint per cu. In amet laudem vocibus eos. Eos lorem aliquid eu.</p>
 
<p>Eu modo quodsi dissentiunt sea, his eu omnis definitiones. Graecis consulatu eos an, te vis nonumy habemus, ut option alterum sea. Malorum hendrerit eum no. Sed timeam voluptua officiis ad. Id eam erat luptatum, pri ne putant timeam facilisis.</p>
 
<p>Sea id quem contentiones, vim id elit facete voluptatibus. Vim ut esse veritus hendrerit, eam laoreet eleifend concludaturque an. Mel fabulas copiosae mediocritatem et, assueverit vituperatoribus ea per. Eros oratio delenit no vel, ne est libris officiis mediocrem, an kasd reformidans efficiantur eos. Ea omnis quodsi audire quo, nonumy vidisse euripidis ius ex. Eos at nibh illum definiebas, pri in paulo percipit.</p>
 
<p>Ne mea vero congue, ut his tantas munere quidam, utamur mnesarchum ne qui. Cu duo timeam impetus aperiam. His et sint volumus verterem, vero iuvaret pri ea. Sea ut tale veniam. Eu posse putant timeam sed, cu eum puto saepe equidem. Id commodo commune inimicus qui, mei no augue viderer disputando. Tollit molestie inimicus mei ea.</p>
 
<p>Probo viris dolorum pri eu, oratio persius delenit cu pro, ut dicit euismod vix. Id est dictas option. Unum quodsi lucilius sit no. Mei an vidisse verterem deterruisset, an meliore perpetua mei. Mei tota iusto no, solum porro mediocrem eos et. Has ut detraxit adipisci.</p>
 
<p>Mei et melius oporteat, suscipit aliquyam est at. Pri malis veniam sapientem eu, error eleifend vix ex, vix id duis illum referrentur. Dicunt volutpat splendide sed ut, at kasd propriae instructior ius. Est ad quidam posidonium, et solet equidem scaevola nec. Elit partem tritani id vix. No eum quodsi partiendo.</p>
 
<p>An ludus recusabo voluptatum nam. Ex affert invenire pri, graeco minimum reprehendunt in mei. Mei decore docendi definitiones ei, hinc libris inermis vix no, modo nostrum deseruisse mea cu. Veniam tantas definitiones et qui, mea oratio democritum te. No quo inani utinam, nam dicunt mollis iracundia ex.</p>
 
<p>Debitis maluisset sed ex, agam paulo omittam eum cu. Qui ea tale veri, ut quando ridens definitionem nec. Mel dictas dolorum dolores at, agam bonorum impedit no ius, duo illud graeci no. Maiorum fuisset postulant qui ei. No paulo fabellas qui.</p>
</div>
  1. <div class="scroll">
  2. <p>Eirmod doctus dolores cu has. His no enim inimicus maiestatis, quaestio dignissim hendrerit est an. Vis soleat impedit scriptorem in. Duo at putant definitionem, ei per odio tota accumsan. Ceteros reprehendunt ei pri.</p>
  3.  
  4. <p>Legimus tibique incorrupte sed cu, cu eum appetere partiendo, et mel nostrum suscipiantur. Epicuri offendit no ius. An qui impetus volumus, cu has quis ubique oportere. Nibh option placerat vel eu. Mel detracto erroribus referrentur ei.</p>
  5.  
  6. <p>come posse voluptua necessitatibus eu, eos ex dolor inimicus principes. come tation libris eu, duo ea legimus detraxit scriptorem. Choro sanctus assentior vix ne, qui clita virtute ex, ad paulo iuvaret numquam mei. An mazim perpetua periculis vim, has eu liber placerat. Odio splendide duo an.</p>
  7.  
  8. <p>Ius quidam vivendum invenire ea, invenire intellegam necessitatibus his an, at pri discere molestiae. Mei et natum integre. His hinc nihil quidam id, mel graeco percipit rationibus id. Etiam labore cetero id per.</p>
  9.  
  10. <p>Te minim maiestatis est. No feugiat salutatus nam, vix unum erant no. Ius at oblique corpora moderatius, noster contentiones sit in. At mel affert quaeque quaestio. Constituto mnesarchum dissentias his eu, admodum adipisci dissentiunt te eum. Ea vero movet diceret nec, ad saepe persius sit.</p>
  11.  
  12. <p>Eam falli libris ei, ut agam offendit atomorum vis, tale voluptaria te vel. Cu eam falli pericula. Vis no alii semper recusabo, no duo omittam recteque. Sit at alienum accusam tincidunt, modo inermis detracto ius ei, copiosae vivendum atomorum no eum.</p>
  13.  
  14. <p>At vel meliore definitionem, mazim senserit periculis cu ius. Mea te ullum probatus reprehendunt, te ius debitis convenire. Cu nobis consul eripuit duo, mel ne corrumpit interpretaris. Eu ius civibus lobortis, omnes phaedrum persequeris vis et, qui sumo cibo appellantur cu. Labores appetere adolescens cu come.</p>
  15.  
  16. <p>Senserit evertitur ius ut, cu zzril molestie has. Mel dicit similique et. Ad affert philosophia mei, diam doming possim ius ex. Virtute perpetua inciderint per cu. In amet laudem vocibus eos. Eos lorem aliquid eu.</p>
  17.  
  18. <p>Eu modo quodsi dissentiunt sea, his eu omnis definitiones. Graecis consulatu eos an, te vis nonumy habemus, ut option alterum sea. Malorum hendrerit eum no. Sed timeam voluptua officiis ad. Id eam erat luptatum, pri ne putant timeam facilisis.</p>
  19.  
  20. <p>Sea id quem contentiones, vim id elit facete voluptatibus. Vim ut esse veritus hendrerit, eam laoreet eleifend concludaturque an. Mel fabulas copiosae mediocritatem et, assueverit vituperatoribus ea per. Eros oratio delenit no vel, ne est libris officiis mediocrem, an kasd reformidans efficiantur eos. Ea omnis quodsi audire quo, nonumy vidisse euripidis ius ex. Eos at nibh illum definiebas, pri in paulo percipit.</p>
  21.  
  22. <p>Ne mea vero congue, ut his tantas munere quidam, utamur mnesarchum ne qui. Cu duo timeam impetus aperiam. His et sint volumus verterem, vero iuvaret pri ea. Sea ut tale veniam. Eu posse putant timeam sed, cu eum puto saepe equidem. Id commodo commune inimicus qui, mei no augue viderer disputando. Tollit molestie inimicus mei ea.</p>
  23.  
  24. <p>Probo viris dolorum pri eu, oratio persius delenit cu pro, ut dicit euismod vix. Id est dictas option. Unum quodsi lucilius sit no. Mei an vidisse verterem deterruisset, an meliore perpetua mei. Mei tota iusto no, solum porro mediocrem eos et. Has ut detraxit adipisci.</p>
  25.  
  26. <p>Mei et melius oporteat, suscipit aliquyam est at. Pri malis veniam sapientem eu, error eleifend vix ex, vix id duis illum referrentur. Dicunt volutpat splendide sed ut, at kasd propriae instructior ius. Est ad quidam posidonium, et solet equidem scaevola nec. Elit partem tritani id vix. No eum quodsi partiendo.</p>
  27.  
  28. <p>An ludus recusabo voluptatum nam. Ex affert invenire pri, graeco minimum reprehendunt in mei. Mei decore docendi definitiones ei, hinc libris inermis vix no, modo nostrum deseruisse mea cu. Veniam tantas definitiones et qui, mea oratio democritum te. No quo inani utinam, nam dicunt mollis iracundia ex.</p>
  29.  
  30. <p>Debitis maluisset sed ex, agam paulo omittam eum cu. Qui ea tale veri, ut quando ridens definitionem nec. Mel dictas dolorum dolores at, agam bonorum impedit no ius, duo illud graeci no. Maiorum fuisset postulant qui ei. No paulo fabellas qui.</p>
  31. </div>
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

Bogey wrote:
The CSS
Code: [ Select ]
.scroll {
  width: 600px;
  height: 700px;
  overflow: auto;
}
  1. .scroll {
  2.   width: 600px;
  3.   height: 700px;
  4.   overflow: auto;
  5. }
And the HTML
Code: [ Select ]
<div class="scroll">
...
</div>
  1. <div class="scroll">
  2. ...
  3. </div>


Bogey,
Thanks a lot. This is what I was looking for. I just have a question and pardon me for being slow. If I understand correct, the css part will be in html head. If I have several text areas, they all would be limited to these width and height, correct?
Is there a was around it if I have several text boxes with different dimensions?
Lzr
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

lzr wrote:
Bogey wrote:
The CSS
Code: [ Select ]
.scroll {
width: 600px;
height: 700px;
overflow: auto;
}
  1. .scroll {
  2. width: 600px;
  3. height: 700px;
  4. overflow: auto;
  5. }
And the HTML
Code: [ Select ]
<div class="scroll">
...
</div>
  1. <div class="scroll">
  2. ...
  3. </div>


Bogey,
Thanks a lot. This is what I was looking for. I just have a question and pardon me for being slow. If I understand correct, the css part will be in html head. If I have several text areas, they all would be limited to these width and height, correct?
Is there a was around it if I have several text boxes with different dimensions?
Lzr

You can always do something like...
The CSS (Yes, in the header).
Code: [ Select ]
.scroll {
overflow: auto;
}
  1. .scroll {
  2. overflow: auto;
  3. }

The HTML could be something like...
HTML Code: [ Select ]
<div class="scroll" style="width: 600px; height: 700px;">
...
</div>
  1. <div class="scroll" style="width: 600px; height: 700px;">
  2. ...
  3. </div>
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

[quote="Bogey]
You can always do something like...
The CSS (Yes, in the header).
Code: [ Select ]
.scroll {
  overflow: auto;
}
  1. .scroll {
  2.   overflow: auto;
  3. }

The HTML could be something like...
HTML Code: [ Select ]
<div class="scroll" style="width: 600px; height: 700px;">
...
</div>
  1. <div class="scroll" style="width: 600px; height: 700px;">
  2. ...
  3. </div>
[/quote]

Bogey,
Thank you for help.
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

but then in that case I'd change it even more towards CSS with the following ...
CSS:
Code: [ Select ]
.scroll {
overflow: auto;
width:600px;
height:700px;
}
  1. .scroll {
  2. overflow: auto;
  3. width:600px;
  4. height:700px;
  5. }

HTML:
Code: [ Select ]
<div class='scroll'>
...
</div>
  1. <div class='scroll'>
  2. ...
  3. </div>
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

ah damn ... sorry guys, I didn't read properly, that's exactly what you didn't want to do ... Ignore my previous post
  • Bogey
  • Bogey
  • Genius
  • Bogey
  • Posts: 8363
  • Loc: USA

Post 3+ Months Ago

lzr wrote:
Bogey wrote:
You can always do something like...
The CSS (Yes, in the header).
Code: [ Select ]
.scroll {
overflow: auto;
}
  1. .scroll {
  2. overflow: auto;
  3. }

The HTML could be something like...
HTML Code: [ Select ]
<div class="scroll" style="width: 600px; height: 700px;">
...
</div>
  1. <div class="scroll" style="width: 600px; height: 700px;">
  2. ...
  3. </div>


Bogey,
Thank you for help.

Or, (I don't know why I didn't put this down before...) you can do everything without worrying about CSS in the header...
Code: [ Select ]
<div style="overflow: auto; height: 700px; width: 600px;">
...
</div>
  1. <div style="overflow: auto; height: 700px; width: 600px;">
  2. ...
  3. </div>

No problem :)

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 54 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.