meta
08-12-2003, 04:02 AM
Is there any way a cell in a table can scroll individually like a frame, without using frames?
Click to See Complete Forum and Search --> : table cell scrolling?
DaveSW
08-12-2003, 04:53 AM
Yes. You use the overflow:auto; css property.
See here for a typical Pyro example:
http://www.infinitypages.com/research/nnscrolldiv.htm
See here for a typical Pyro example:
http://www.infinitypages.com/research/nnscrolldiv.htm
Pierre Rouillet
08-12-2003, 06:39 AM
Thank you very much, Dave. This is very useful indeed.
May I add that it works beautifully on safari / mac, as well as on the mozillas on a mac (mozilla 1.4, N7); while the MSIE on a mac likes to give you a horizontal scroll bar where it isn't required.
I have therefore reworked the code a little bit; you can view the code at http://www.form-und-sinn.de/demo/inlineScrolls.html
It certainly isn't perfect; please feel free to rework it.
May I add that it works beautifully on safari / mac, as well as on the mozillas on a mac (mozilla 1.4, N7); while the MSIE on a mac likes to give you a horizontal scroll bar where it isn't required.
I have therefore reworked the code a little bit; you can view the code at http://www.form-und-sinn.de/demo/inlineScrolls.html
It certainly isn't perfect; please feel free to rework it.
DaveSW
08-12-2003, 06:54 AM
maybe adding overflow-x: hidden; into the css might fix it for ie.
ps it's actually Pyro's (one of the other moderators) code
ps it's actually Pyro's (one of the other moderators) code
Pierre Rouillet
08-12-2003, 06:58 AM
hello Dave
it doesn't, I've just tried - in case I did it correctly. I've uploaded it at http://www.form-und-sinn.de/demo/inlineScrolls2.html
Maybe you have a look.
thanks again. I'm about to use this script.
it doesn't, I've just tried - in case I did it correctly. I've uploaded it at http://www.form-und-sinn.de/demo/inlineScrolls2.html
Maybe you have a look.
thanks again. I'm about to use this script.
DaveSW
08-12-2003, 07:02 AM
I haven't got a copy of IE mac handy. Can you try this for me please? I've nested a second div inside. If it fails try adding a width to the nested div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Scrollbars in a div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.main
{
width:510px;
height:300px;
background-color: #eeeeee;
border: 1px solid #344170;
padding: 6px;
overflow: auto;
}
.container {
overflow-x: hidden;
}
body
{
font-size: 90%;
font-family: Verdana;
}
</style>
</head>
<body>
<p><font size="1">The following was tested and works (div scrolls) in IE6, NN
6.2, NN7, Mozilla 1.2, and Opera 7 by DaveSW, who posted it at Web Developer
Forum > Web Developer Forums > HTML > table cell scrolling?, at http://forums.webdeveloper.com.
I have reworked it putting the text in the div into a table and setting the
table to 90% of width (in wich case the font specs in the head, useful in the
former html, can be left away), to avoid the horizontal scroll bar otherwise
showing in MSIE/MacOS X</font></p>
<div class="main">
<div class="container"><p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">The
following text consists of a mock Latin which has been based upon the
average frequency of characters and word lengths of the English language
in order to reproduce a reasonably accurate overall visual impression.
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Et harumd
dereud facilis est er expedit distinct. Nam liber a tempor *** soluta
nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat
facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib
saepe eveniet ut er repudiand sint et molestia non este recusand.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">The following
text consists of a mock Latin which has been based upon the average
frequency of characters and word lengths of the English language in
order to reproduce a reasonably accurate overall visual impression.
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Et harumd
dereud facilis est er expedit distinct. Nam liber a tempor *** soluta
nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat
facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib
saepe eveniet ut er repudiand sint et molestia non este recusand.</font></p></div>
</div>
</body>
</html>
Thanks
Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Scrollbars in a div</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.main
{
width:510px;
height:300px;
background-color: #eeeeee;
border: 1px solid #344170;
padding: 6px;
overflow: auto;
}
.container {
overflow-x: hidden;
}
body
{
font-size: 90%;
font-family: Verdana;
}
</style>
</head>
<body>
<p><font size="1">The following was tested and works (div scrolls) in IE6, NN
6.2, NN7, Mozilla 1.2, and Opera 7 by DaveSW, who posted it at Web Developer
Forum > Web Developer Forums > HTML > table cell scrolling?, at http://forums.webdeveloper.com.
I have reworked it putting the text in the div into a table and setting the
table to 90% of width (in wich case the font specs in the head, useful in the
former html, can be left away), to avoid the horizontal scroll bar otherwise
showing in MSIE/MacOS X</font></p>
<div class="main">
<div class="container"><p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">The
following text consists of a mock Latin which has been based upon the
average frequency of characters and word lengths of the English language
in order to reproduce a reasonably accurate overall visual impression.
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Et harumd
dereud facilis est er expedit distinct. Nam liber a tempor *** soluta
nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat
facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib
saepe eveniet ut er repudiand sint et molestia non este recusand.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">The following
text consists of a mock Latin which has been based upon the average
frequency of characters and word lengths of the English language in
order to reproduce a reasonably accurate overall visual impression.
Lorem ipsum dolor sit amet, consectetur adipscing elit, sed diam nonnumy
eiusmod tempor incidunt ut labore et dolore magna aliquam erat volupat.</font></p>
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Et harumd
dereud facilis est er expedit distinct. Nam liber a tempor *** soluta
nobis eligend optio comque nihil quod a impedit anim id quod maxim placeat
facer possim omnis es voluptas assumenda est, omnis dolor repellend.
Temporem autem quinsud et aur office debit aut tum rerum necesit atib
saepe eveniet ut er repudiand sint et molestia non este recusand.</font></p></div>
</div>
</body>
</html>
Thanks
Dave
Pierre Rouillet
08-12-2003, 07:09 AM
sure. It's visible at http://www.form-und-sinn.de/demo/davesw.html
it does work almost beautifully in MSIE / Mac OS X (but other than in Safari and Mozilla, the letters come a little bit too close to the right border); however, it does not solve the problem for MSIE / Mac OS 9 (wheras my improvised solution does).
it does work almost beautifully in MSIE / Mac OS X (but other than in Safari and Mozilla, the letters come a little bit too close to the right border); however, it does not solve the problem for MSIE / Mac OS 9 (wheras my improvised solution does).
DaveSW
08-12-2003, 07:12 AM
thanks for testing it! did you try adding your 90% width to it?
.container {
overflow-x: hidden;
width: 90%;
}
Anyway, I'll let pyro know about the revised version to see if he wants to update his code.
Thanks again
Dave
.container {
overflow-x: hidden;
width: 90%;
}
Anyway, I'll let pyro know about the revised version to see if he wants to update his code.
Thanks again
Dave
Pierre Rouillet
08-12-2003, 07:19 AM
see, that's the difference between real knowledge and improvisation. Yes, with this addition it qworks in MSIE on both platforms.
(for anyone willing to test or use: http://www.form-und-sinn.de/demo/davesw_2.html)
thanks a lot; this seems to be a very good idea.
P.
(for anyone willing to test or use: http://www.form-und-sinn.de/demo/davesw_2.html)
thanks a lot; this seems to be a very good idea.
P.
meta
08-12-2003, 11:59 AM
Wow, thanks a lot guys. I learned a little more than I bargained for.
DaveSW
08-12-2003, 12:51 PM
Hey that's great Pierre! I think it's adaptation rather than improvisation - I didn't know anything about the mac problem, but you got round it using a table, I just happen to prefer divs.
Thanks for testing it anyway. I'll have to see about investing in a mac myself one of these days (i've got 5 pcs but no macs)
:D
Thanks for testing it anyway. I'll have to see about investing in a mac myself one of these days (i've got 5 pcs but no macs)
:D
Pierre Rouillet
08-15-2003, 08:02 AM
I am now trying to implement this. As usually, it turns out to be all different under real world - conditions.
In short, I have a nested frameset of just two cols. Its other dimensions are given by the nesting frameset. All sizes fixed. Now, I put such a div
<div class="aktuell_links"> <div class="container">
</div> </div>
into the body ( as in the example above: without a surrounding table; nesting the div in a table produced even more problems.)
in the style sheet, I give it a border:
.main {
width:283px;
height:566px;
background-color: #FFFFFF;
padding: 0px;
overflow: auto;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
}
.container {
overflow-x: hidden;
width: 90%;
}
Unfortunalely, this border is displayed only in MSIE (at least on a mac; I haven't tested it on a pc yet); Mozilla and Safari show them only in parts. When I decrease the dimensions fixed in the .main - definition by 2 px, it works in Mozilla and Safari, but is consequently beeing displayed too small in MSIE.
I'm clueless. Anyone willing to look at how it looks is invited to have a look at http://www.steffiweismann.de/index_final2.html, and click on aktuell. Anyone willing to have a look at the site itself is also very welcome to download http://www.steffiweismann.de/steffiweismann.zip
It looks like this possibility of having scrollable table cells etc. semms interesting to a lot of people. Since it doesn't really work the way we have it now, maybe we con try and test a bit and then come to a somewhat systematic overview and add a little tutorial on how to to this forum.
Thanks in advance, have a lovely day all of you
Pierre
In short, I have a nested frameset of just two cols. Its other dimensions are given by the nesting frameset. All sizes fixed. Now, I put such a div
<div class="aktuell_links"> <div class="container">
</div> </div>
into the body ( as in the example above: without a surrounding table; nesting the div in a table produced even more problems.)
in the style sheet, I give it a border:
.main {
width:283px;
height:566px;
background-color: #FFFFFF;
padding: 0px;
overflow: auto;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
}
.container {
overflow-x: hidden;
width: 90%;
}
Unfortunalely, this border is displayed only in MSIE (at least on a mac; I haven't tested it on a pc yet); Mozilla and Safari show them only in parts. When I decrease the dimensions fixed in the .main - definition by 2 px, it works in Mozilla and Safari, but is consequently beeing displayed too small in MSIE.
I'm clueless. Anyone willing to look at how it looks is invited to have a look at http://www.steffiweismann.de/index_final2.html, and click on aktuell. Anyone willing to have a look at the site itself is also very welcome to download http://www.steffiweismann.de/steffiweismann.zip
It looks like this possibility of having scrollable table cells etc. semms interesting to a lot of people. Since it doesn't really work the way we have it now, maybe we con try and test a bit and then come to a somewhat systematic overview and add a little tutorial on how to to this forum.
Thanks in advance, have a lovely day all of you
Pierre
DaveSW
08-15-2003, 11:33 AM
could you show us a screenshot?
Pierre Rouillet
08-15-2003, 01:24 PM
sure. here's the screenshots of the current version as posted above:
http://www.steffiweismann.de/screenshots/MSIE.gif
and
http://www.steffiweismann.de/screenshots/Mozilla.gif
in a somewhat reduced fashion, for faster viewing.
Like I said, Safari behaves like Mozilla in this case.
As you'll see, it looks right in Mozilla and wrong in MSIE. That surprises me a bit, because it is just the opposite of what I described. I'm pretty sure I got it right then, so it looks like inconsistent behavior…? no, I don't think so actually. It's confusing. More likely I was wrong anyway.
http://www.steffiweismann.de/screenshots/MSIE.gif
and
http://www.steffiweismann.de/screenshots/Mozilla.gif
in a somewhat reduced fashion, for faster viewing.
Like I said, Safari behaves like Mozilla in this case.
As you'll see, it looks right in Mozilla and wrong in MSIE. That surprises me a bit, because it is just the opposite of what I described. I'm pretty sure I got it right then, so it looks like inconsistent behavior…? no, I don't think so actually. It's confusing. More likely I was wrong anyway.
DaveSW
08-15-2003, 03:31 PM
ok so which bit exactly is wrong? do you mean where the line doesn't quite meet between the two main boxes? (where they don't quite touch in the ie screenshot?)
Or do you mean where the IE menu appears to end two pixels below?
If those things are what you are referring to then that's the box model problem. If that is the problem you're referring to, we can have a look at the box model hack. Otherwise, can you clarify for us where exactly the problem lies (sorry if I'm just being stupid or something... I'm just not sure what you mean.)
Maybe you could circle the part of the screenshot we're looking at?
Or do you mean where the IE menu appears to end two pixels below?
If those things are what you are referring to then that's the box model problem. If that is the problem you're referring to, we can have a look at the box model hack. Otherwise, can you clarify for us where exactly the problem lies (sorry if I'm just being stupid or something... I'm just not sure what you mean.)
Maybe you could circle the part of the screenshot we're looking at?
Pierre Rouillet
08-15-2003, 04:24 PM
'…where the line doesn't quite meet between the two main boxes' - well, that's another issue indeed.
What I was mainly refering to is now circeled green. The urls are now
http://www.steffiweismann.de/screenshots/MSIE2.gif
and
http://www.steffiweismann.de/screenshots/Mozilla2.gif
The entire section on the very left (the dotted one) is always at the same size. The two boxes that make the main section should have the same height as the dotted one. They do in Mozilla (and Safari) / MacOSX, but they don't in MSIE/MacOSX.
The height of this main section is defined a) by the frameset (frameset cols="*,120,566,*" etc.) and b) by the style (( height:566px;).
The latter doesn't seem to work correctly in MSIE/MacOSX; maybe it's as simple as that. In this case I should find a workaround; but maybe there's somenthing wrong with the code.
Also, I would be thankful if anyone could tell me how it looks under windows.
What I was mainly refering to is now circeled green. The urls are now
http://www.steffiweismann.de/screenshots/MSIE2.gif
and
http://www.steffiweismann.de/screenshots/Mozilla2.gif
The entire section on the very left (the dotted one) is always at the same size. The two boxes that make the main section should have the same height as the dotted one. They do in Mozilla (and Safari) / MacOSX, but they don't in MSIE/MacOSX.
The height of this main section is defined a) by the frameset (frameset cols="*,120,566,*" etc.) and b) by the style (( height:566px;).
The latter doesn't seem to work correctly in MSIE/MacOSX; maybe it's as simple as that. In this case I should find a workaround; but maybe there's somenthing wrong with the code.
Also, I would be thankful if anyone could tell me how it looks under windows.
DaveSW
08-15-2003, 04:31 PM
I see. In that case I believe it may be the box model problem. Try this link
http://www.tantek.com/CSS/Examples/boxmodelhack.html
The possible solution is at the bottom
http://www.tantek.com/CSS/Examples/boxmodelhack.html
The possible solution is at the bottom
DaveSW
08-15-2003, 04:33 PM
Oh yes, IE6 and Opera 7.1 both have the same problem. However, Moz is fine - as you might have guessed!
Pierre Rouillet
08-15-2003, 04:57 PM
I did, writing
html>body .aktuell_links {
width:283px;
height:566px;
voice-family: "\"}\"";
voice-family:inherit;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 0px;
overflow: auto;
}
html>body .aktuell_rechts {
width:283px;
height:566px;
voice-family: "\"}\"";
voice-family:inherit;
background-color: #FFFFFF;
padding: 0px;
overflow: auto;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
}
and putting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<?xml version="1.0"?>
as prologue. Now it works fine in IE, but ceases to display the bottom and right line in Mozilla and Safari.
html>body .aktuell_links {
width:283px;
height:566px;
voice-family: "\"}\"";
voice-family:inherit;
background-color: #FFFFFF;
border: 1px solid #000000;
padding: 0px;
overflow: auto;
}
html>body .aktuell_rechts {
width:283px;
height:566px;
voice-family: "\"}\"";
voice-family:inherit;
background-color: #FFFFFF;
padding: 0px;
overflow: auto;
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px none #000000;
}
and putting
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<?xml version="1.0"?>
as prologue. Now it works fine in IE, but ceases to display the bottom and right line in Mozilla and Safari.
Pierre Rouillet
08-16-2003, 03:51 AM
and by the way, could anyone explain me the idea of this 'html>body .aktuell_rechts{ ...' -syntax? I mean, what is the 'html>body' before the class? I haven't found anything in any tutorial. Maybe I didn't search well enough.
Also, this seems more and more like a CSS topic. Maybe one of the moderators should link or move it to the CSS section?
Also, this seems more and more like a CSS topic. Maybe one of the moderators should link or move it to the CSS section?
DaveSW
08-16-2003, 05:39 AM
The > is a child selector - it only picks up the body tags within a html tag... It's a strange hack.
I'll have another look later - maybe try changing your frame sizes?
Back later
I'll have another look later - maybe try changing your frame sizes?
Back later
Pierre Rouillet
08-16-2003, 02:16 PM
The body tags within an html tag - sorry for stupid questions - aren't all body tags within html tags? Is this designes to exclude bodies that stand within xml tags or something?
As for the frame sizes: I don't know if I fully understand what you think of. If I change any of the frame sizes, wouldn't the problem of a different output in Mozilla-Safari vs. IE-Opera persist? For it doesn't seem to be the frame size that causes the problem, but rather some differening ideas on what a cryptic expression such as '566px' might mean; or rather some parsing bugs or whatever (as indicated in the text on the boxmodelhack you gave us).
I'd really appreciate a standard solution without any unhandy workarounds, as I see this scrollable div as something quite useful for the nearer future. I'm also trying to use it in table cells (which isn't the case in the example we're discussing here); I'll come back to this later.
As for the frame sizes: I don't know if I fully understand what you think of. If I change any of the frame sizes, wouldn't the problem of a different output in Mozilla-Safari vs. IE-Opera persist? For it doesn't seem to be the frame size that causes the problem, but rather some differening ideas on what a cryptic expression such as '566px' might mean; or rather some parsing bugs or whatever (as indicated in the text on the boxmodelhack you gave us).
I'd really appreciate a standard solution without any unhandy workarounds, as I see this scrollable div as something quite useful for the nearer future. I'm also trying to use it in table cells (which isn't the case in the example we're discussing here); I'll come back to this later.
DaveSW
08-16-2003, 02:42 PM
1) Yes all body tags are within the html tag. That was the reason I said "It's a strange hack". Still, if it works...
2) I was wondering if the frame borders were messing the page up. Would it be possible to put the page together without frames? Theoretically you would then not have any problem because all the columns would be calculated the same way.
3) Yes - it would be nice if everything was simple in this life!
2) I was wondering if the frame borders were messing the page up. Would it be possible to put the page together without frames? Theoretically you would then not have any problem because all the columns would be calculated the same way.
3) Yes - it would be nice if everything was simple in this life!
Pierre Rouillet
08-31-2003, 07:54 AM
hey folks
table cell scrolling II - hugging Mozilla, killing winXP
is out now! Don't miss: http://forums.webdeveloper.com/showthread.php?s=&threadid=16489
see you there!
table cell scrolling II - hugging Mozilla, killing winXP
is out now! Don't miss: http://forums.webdeveloper.com/showthread.php?s=&threadid=16489
see you there!
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.