Scrolled text in DIV

  • andrushok
  • Novice
  • Novice
  • User avatar
  • Posts: 24

Post 3+ Months Ago

Hi All,
I have the follwing problem in my HTML page. I would like to show some quite bid text in a table with fixed height and flexible width. Vertical scroll bar should be appeared - no problem. However I do not want show horizontal scroll bar. So I wrote:
Code: [ Select ]
<table ...>
  <tr ...>
   <td height=100 style="padding:0px">
     <div style="height:100px; overflow-y: scroll; overflow-x: none;">
       Some big text ...
     </div>
   </td>
  </tr>
</table>   
  1. <table ...>
  2.   <tr ...>
  3.    <td height=100 style="padding:0px">
  4.      <div style="height:100px; overflow-y: scroll; overflow-x: none;">
  5.        Some big text ...
  6.      </div>
  7.    </td>
  8.   </tr>
  9. </table>   

It is fine for IE on Windows, but it does not work for IE on Mac. So I spent 3 hours and found a trick:
Code: [ Select ]
<table ...>
  <tr ...>
   <td height=100 style="padding:0px">
     <div style="height:100px; overflow: auto; margin-right: -15px">
       <div style="margin-right: 15px; overflow: none">
         Some big text ...
       </div>
     </div>
   </td>
  </tr>
</table>   
  1. <table ...>
  2.   <tr ...>
  3.    <td height=100 style="padding:0px">
  4.      <div style="height:100px; overflow: auto; margin-right: -15px">
  5.        <div style="margin-right: 15px; overflow: none">
  6.          Some big text ...
  7.        </div>
  8.      </div>
  9.    </td>
  10.   </tr>
  11. </table>   

However it does not work on Netscape, Mozilla on Windows, Netscape, Camino and Safari on Mac :evil: . The styles "overflow-x" and "overflow-y" are not supported by these browsers (including IE on Mac!) :x . I can use "overflow:auto" only for them.
Have somebody met the similar problem?

Now I am investigating the possibility. I forced Netscape show only versical scroll bar :roll: , however my text has a padding 15px. It is acceptable but not good.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

andrushok: Welcome to Ozzu! When you're citing sections of code, please use the code brakets.
Code: [ Select ]
<HTML>


I'm not sure what you are asking here. Could you elaborate? Overflow:auto should be all you need.

???


//btw: I fixed your original post ;)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

overflow-x and overflow-y are browser-specific styles.

If you want <b>just</b> a vertical scroller, then overflow:auto

if you want both horizontal and vertical, overflow:scroll should do the trick:

http://www.w3.org/TR/CSS21/visufx.html#overflow
  • andrushok
  • Novice
  • Novice
  • User avatar
  • Posts: 24

Post 3+ Months Ago

Thank you for your reply.
I want to have only vertical scroll bar. Unfortunately "overflow:auto" creates both vertical and horizontal scroll bars. I have found some desicion (I mean Netscape, Mozilla on Win and Sarari, Camino, Netscape on Mac):
Code: [ Select ]
<table ...>
  <tr ...>
   <td height=100 style="padding:0px">
     <div style="height:100px; overflow:auto;">
       <div style="margin-right: 15px; overflow: none">
         Some big text ...
       </div>
     </div>
   </td>
  </tr>
</table>  
  1. <table ...>
  2.   <tr ...>
  3.    <td height=100 style="padding:0px">
  4.      <div style="height:100px; overflow:auto;">
  5.        <div style="margin-right: 15px; overflow: none">
  6.          Some big text ...
  7.        </div>
  8.      </div>
  9.    </td>
  10.   </tr>
  11. </table>  

It looks like pretty good, howevere I have a pad 15px between text and vertical scroll bar. The question is: how can I eliminate this pad? In my code samples for IE on Win and IE on Mac I could reach that. I will be better to have the same result on other browsers.

Maybe sombody has other way (without 2 DIVs).
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

well overflow auto will only give you the scrollbars if you need them. My guess if it is giving you a horizontal scrollbar then there must be something in there that is too wide.
example - copy and paste this into a text file:
Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="all" >
    div{margin:auto;width:200px; height:200px;background-color:#CCCCCC;overflow:auto;}
    </style>
</head>

<body>
<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus. Suspendisse potenti. Nam lectus augue, luctus nec, suscipit a, sagittis porta, lacus. Ut felis ipsum, interdum non, pretium et, convallis non, neque. Donec sed risus. Pellentesque lorem nibh, egestas ut, consequat vel, consectetuer et, libero. Vivamus tellus mi, mollis vel, pellentesque hendrerit, tristique in, tellus. In vel odio id augue sodales placerat. Vivamus in neque. Vivamus tempus, libero a ullamcorper sodales, tellus enim ultrices urna, vel rhoncus mi pede vitae felis. Nam consectetuer tincidunt nibh. Sed eget neque at ante fringilla porttitor.
Suspendisse turpis. Suspendisse nec nulla ut lectus elementum malesuada. Fusce ultrices lorem eu velit. Suspendisse quis lacus. Phasellus augue. Nam vel eros. Donec vestibulum neque quis orci. Sed pellentesque dui at sapien. Integer ipsum. Donec porta. Suspendisse in erat vel est cursus lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in massa vel diam scelerisque pulvinar. Nulla diam lectus, imperdiet aliquam, laoreet sit
</div>
</body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2.   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html>
  4. <head>
  5.     <title>Untitled Document</title>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  7.     <style type="text/css" media="all" >
  8.     div{margin:auto;width:200px; height:200px;background-color:#CCCCCC;overflow:auto;}
  9.     </style>
  10. </head>
  11. <body>
  12. <div>
  13. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus. Suspendisse potenti. Nam lectus augue, luctus nec, suscipit a, sagittis porta, lacus. Ut felis ipsum, interdum non, pretium et, convallis non, neque. Donec sed risus. Pellentesque lorem nibh, egestas ut, consequat vel, consectetuer et, libero. Vivamus tellus mi, mollis vel, pellentesque hendrerit, tristique in, tellus. In vel odio id augue sodales placerat. Vivamus in neque. Vivamus tempus, libero a ullamcorper sodales, tellus enim ultrices urna, vel rhoncus mi pede vitae felis. Nam consectetuer tincidunt nibh. Sed eget neque at ante fringilla porttitor.
  14. Suspendisse turpis. Suspendisse nec nulla ut lectus elementum malesuada. Fusce ultrices lorem eu velit. Suspendisse quis lacus. Phasellus augue. Nam vel eros. Donec vestibulum neque quis orci. Sed pellentesque dui at sapien. Integer ipsum. Donec porta. Suspendisse in erat vel est cursus lobortis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc in massa vel diam scelerisque pulvinar. Nulla diam lectus, imperdiet aliquam, laoreet sit
  15. </div>
  16. </body>
  17. </html>


this only gives a vertical scrollbar. check whats inside the div - have you got any really long words or images or anything?
  • andrushok
  • Novice
  • Novice
  • User avatar
  • Posts: 24

Post 3+ Months Ago

Thank you.
Your sample works fine for any browser. Unfortunally all is not so easy in this World. I thought it does not matter what is the text in the DIV tag. I was not right :x . I have formatted text with <li> tags inside. As the result I have horizontal scroll bar on any non-IE browsers :evil: . However now I know the reason of that. I will try to format my text without <li> tags.

Thanks a lot.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Wait!!!

You can set the width of the ul to less than the width of the div, and then the li's should inherit that width and the text inside the li's should wrap.

There is always a way :)
  • andrushok
  • Novice
  • Novice
  • User avatar
  • Posts: 24

Post 3+ Months Ago

I am sorry. I described above that the width is flexable. So I CANNOT set the width. May be is it possible to set "margin-right" style? I will check that.

BWT, unfortunately, your sample does not work on IE on Mac. I have 2 scroll bars there. I hate IE on Mac :evil: . So I have to apply my trick there.

Now I applied formatting by <table>. It looks fine on any browsers, excluding IE on Mac.

Thank you again.
  • andrushok
  • Novice
  • Novice
  • User avatar
  • Posts: 24

Post 3+ Months Ago

I checked <li> tag. The width attribute is not applied for this tag. I tryed using style "margin-right" - no effect. The line under <li> tag was wrapped according the value, but horizontal scroll bar appeared. So conclusion: it is not a good idea to use <li> tag in <DIV> if you would like to hide horizontal scrolbar. Avoid that.

Thanks to all.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Ah, but I said to the ul element :wink:
You can set the width of an ul using css. as the li's are contained within the ul, they should not exceed it's edges (block level elements). Works on all browsers I've tried, although I don't have access to a mac :(
  • andrushok
  • Novice
  • Novice
  • User avatar
  • Posts: 24

Post 3+ Months Ago

THanks a lot. Now I finished this page. I used • for immitation <li> and all looks fine on any browsers. Maybe it is possible resolve the problem using css, I hope so. Of course it is less ugly than my decision :( . But time is money.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 85 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.