RE: iframe scrolling
Can anyone tell me why IE tries to scroll both ways ONLY when there is a doctype present in the framed page? I'm not sure why the doctype has an effect or then that it does make IE or standards compliant, so maybe when the IE can parse the document is quirks mode it has a different behavior. The most likely the issue is that when the vertical scroll bar appears it squeezes the horizontal space of the content inside the frame, thus forcing the horizontal scroll bar to accommodate the content squeezed by the space for the vertical scroll control. If you can control the size of the space of the container and the content so that it has a place holder for the vertical scroll control so that the content does not get squeezed maybe this will help. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245535 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Thanks for the suggestions, Ian. There should be an abundance of horizontal space in the iframe, but I was thinking the same thing you said, so as a test earlier I put the content in a div with a width of 95% and there was no change in the behavior. :( ~Brad -Original Message- From: Ian Skinner [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 11:36 AM To: CF-Talk Subject: RE: iframe scrolling Can anyone tell me why IE tries to scroll both ways ONLY when there is a doctype present in the framed page? I'm not sure why the doctype has an effect or then that it does make IE or standards compliant, so maybe when the IE can parse the document is quirks mode it has a different behavior. The most likely the issue is that when the vertical scroll bar appears it squeezes the horizontal space of the content inside the frame, thus forcing the horizontal scroll bar to accommodate the content squeezed by the space for the vertical scroll control. If you can control the size of the space of the container and the content so that it has a place holder for the vertical scroll control so that the content does not get squeezed maybe this will help. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245537 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Thanks for the suggestions, Ian. There should be an abundance of horizontal space in the iframe, but I was thinking the same thing you said, so as a test earlier I put the content in a div with a width of 95% and there was no change in the behavior. :( ~Brad Does that horizontal scroll control actually scroll or does it just appear even though you can not scroll it? If so, then I think it's an IE issue that both scroll controls always appear. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245539 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
It actually scrolls about a quarter of an inch. It is NOT one of the disabled scrolls bars which are grey and don't actually move. I can't figure out what it is scrolling though, because there is nothing but white space over there. It is like IE is making up a div or something which isn't really there. ~Brad -Original Message- From: Ian Skinner [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 11:52 AM To: CF-Talk Subject: RE: iframe scrolling Thanks for the suggestions, Ian. There should be an abundance of horizontal space in the iframe, but I was thinking the same thing you said, so as a test earlier I put the content in a div with a width of 95% and there was no change in the behavior. :( ~Brad Does that horizontal scroll control actually scroll or does it just appear even though you can not scroll it? If so, then I think it's an IE issue that both scroll controls always appear. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245543 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Here is the CSS I use on a DHTML popup div that only scrolls vertically in IE.
It is based on DIV's and DL's not IFRAME's so I do not know if it will help or
not. But the if you look at the width of the basic div (div#defList) is 300px
and the width of the dl inside it (div#defList dl) is 268px allowing 32px for
the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245544
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
It is like IE is making up a div or something which isn't really there. ~Brad Well with an Iframe you have an entire html and body container inside the Iframe control do you not? I do not use iframes very often so I am not fully cognizant on its peculiarities. But I would guess that IE is not resizing at least one of these containers when the vertical scroll bar appears so the horizontal scroll bar allows you to scroll the width of the vertical scroll bar. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245545 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Its a really bad idea to mix absolute (pixels) and relative (em's and
percentages) values. Use one or the other, (you can use em's and
percentages together, because 1 em = 100% of the user's base font size).
Also if you are using absolute positioning to bring your div#defList to an
offset of 50% top and left, why are you then using negative margins? Use the
offsets only. Negative margins are not always consistent across browsers
when using positioning or floating.
Set all items to a margin:0, padding:0 first to make sure you are consistent
across browsers, then add padding and postive margins to your elements as
needed.
Also change your overflow:scroll to overflow:auto. the scroll value will
ALWAYS place both vertical and horizontal scroll bars on an item. auto will
only place the ones necessary to scroll your content.
Sandra Clark
==
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
-Original Message-
From: Ian Skinner [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 1:00 PM
To: CF-Talk
Subject: RE: iframe scrolling
Here is the CSS I use on a DHTML popup div that only scrolls vertically in
IE. It is based on DIV's and DL's not IFRAME's so I do not know if it will
help or not. But the if you look at the width of the basic div
(div#defList) is 300px and the width of the dl inside it (div#defList dl) is
268px allowing 32px for the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any attachments is for the
sole use of the intended
recipient(s) and may contain confidential and privileged information. Any
unauthorized review, use, disclosure or distribution is prohibited. If you
are not the intended recipient, please contact the sender and delete any
copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245550
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe:
http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
Re: iframe scrolling
Hi Brad,
You may want to try creating a css class and applying it to your iframe, if
you haven't already done so. Just a simple class will do, something like:
..padder {padding: 0px;}
then do
iframe class=padder (other iframe attributes)/iframe
I found this helped me when I had a similar situation. You can play around
with the class and see what results you get.
-- Josh
- Original Message -
From: Brad Wood [EMAIL PROTECTED]
To: CF-Talk cf-talk@houseoffusion.com
Sent: Thursday, July 06, 2006 10:03 AM
Subject: RE: iframe scrolling
It actually scrolls about a quarter of an inch. It is NOT one of the
disabled scrolls bars which are grey and don't actually move. I can't
figure out what it is scrolling though, because there is nothing but
white space over there.
It is like IE is making up a div or something which isn't really there.
~Brad: http://www.houseoffusion.com/tiny.cfm/54
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245551
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
Re: iframe scrolling
What doctype are you using? In XTHML strict or transitional, IE
behaves differently. The 1/4 scroll is indicative of the horizontal
scrollbar compensating for the presence of the vertical scrollbar.
The scrolling distance is approximately the size of the vertical
scrollbar, right?
On 7/6/06, Ian Skinner [EMAIL PROTECTED] wrote:
Here is the CSS I use on a DHTML popup div that only scrolls vertically in
IE. It is based on DIV's and DL's not IFRAME's so I do not know if it will
help or not. But the if you look at the width of the basic div (div#defList)
is 300px and the width of the dl inside it (div#defList dl) is 268px allowing
32px for the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245552
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Yes, the amount of horizontal scroll seems to roughly match the width of
the vertical scroll bar.
My current doctype is
!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
I tried a few others, but they didn't seems to make a difference.
~Brad
-Original Message-
From: Rob Wilkerson [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 12:28 PM
To: CF-Talk
Subject: Re: iframe scrolling
What doctype are you using? In XTHML strict or transitional, IE
behaves differently. The 1/4 scroll is indicative of the horizontal
scrollbar compensating for the presence of the vertical scrollbar.
The scrolling distance is approximately the size of the vertical
scrollbar, right?
On 7/6/06, Ian Skinner [EMAIL PROTECTED] wrote:
Here is the CSS I use on a DHTML popup div that only scrolls
vertically in IE. It is based on DIV's and DL's not IFRAME's so I do
not know if it will help or not. But the if you look at the width of
the basic div (div#defList) is 300px and the width of the dl inside it
(div#defList dl) is 268px allowing 32px for the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245554
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
Re: iframe scrolling
For giggles, try adding the code below to your page *directly* above
your doctype declaration and see whether anything changes...
?xml version=1.0 encoding=iso-8859-1?!-- engages quirks mode
for display in IE --
On 7/6/06, Brad Wood [EMAIL PROTECTED] wrote:
Yes, the amount of horizontal scroll seems to roughly match the width of
the vertical scroll bar.
My current doctype is
!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
I tried a few others, but they didn't seems to make a difference.
~Brad
-Original Message-
From: Rob Wilkerson [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 12:28 PM
To: CF-Talk
Subject: Re: iframe scrolling
What doctype are you using? In XTHML strict or transitional, IE
behaves differently. The 1/4 scroll is indicative of the horizontal
scrollbar compensating for the presence of the vertical scrollbar.
The scrolling distance is approximately the size of the vertical
scrollbar, right?
On 7/6/06, Ian Skinner [EMAIL PROTECTED] wrote:
Here is the CSS I use on a DHTML popup div that only scrolls
vertically in IE. It is based on DIV's and DL's not IFRAME's so I do
not know if it will help or not. But the if you look at the width of
the basic div (div#defList) is 300px and the width of the dl inside it
(div#defList dl) is 268px allowing 32px for the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any
attachments is for the sole use of the intended
recipient(s) and may contain confidential and privileged
information. Any unauthorized review, use, disclosure or
distribution is prohibited. If you are not the
intended recipient, please contact the sender and
delete any copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245556
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
For the example I provided this is the doctype !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd; -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245557 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Its a really bad idea to mix absolute (pixels) and relative (em's and percentages) values. Use one or the other, (you can use em's and percentages together, because 1 em = 100% of the user's base font size). Also if you are using absolute positioning to bring your div#defList to an offset of 50% top and left, why are you then using negative margins? Use the offsets only. Negative margins are not always consistent across browsers when using positioning or floating. Set all items to a margin:0, padding:0 first to make sure you are consistent across browsers, then add padding and postive margins to your elements as needed. Also change your overflow:scroll to overflow:auto. the scroll value will ALWAYS place both vertical and horizontal scroll bars on an item. auto will only place the ones necessary to scroll your content. Sandra Clark Why is it to mix, it does exactly what I want it to do. Now this may not work very widely but this is an Intranet application where I have knowledge of what browsers I am working with. My logic is that by placing the container top: 50% and left: 50%, this places the div layer in the middle of the browser, but it places the top left corner of the div in the middle. With the negative margins each 1/2 of the width and height move the middle of the div layer to the middle of the browser. How would I do that with positive values? I'll check out the scroll: auto, but I currently have only one vertical scroll bar, albeit in the limited set of browsers I am concerned with; again the advantage of a strictly controlled intranet environment of a small company. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245558 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
I gave you the answer already. (a long with other stuff you didn't ask for,
but will probably make your CSS life a lot easier in the long run).
To paraphrase
set overflow:scroll to overflow:auto
Sandra Clark
==
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_displayid=1
-Original Message-
From: Brad Wood [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 1:35 PM
To: CF-Talk
Subject: RE: iframe scrolling
Yes, the amount of horizontal scroll seems to roughly match the width of the
vertical scroll bar.
My current doctype is
!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
I tried a few others, but they didn't seems to make a difference.
~Brad
-Original Message-
From: Rob Wilkerson [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 12:28 PM
To: CF-Talk
Subject: Re: iframe scrolling
What doctype are you using? In XTHML strict or transitional, IE behaves
differently. The 1/4 scroll is indicative of the horizontal scrollbar
compensating for the presence of the vertical scrollbar.
The scrolling distance is approximately the size of the vertical scrollbar,
right?
On 7/6/06, Ian Skinner [EMAIL PROTECTED] wrote:
Here is the CSS I use on a DHTML popup div that only scrolls
vertically in IE. It is based on DIV's and DL's not IFRAME's so I do not
know if it will help or not. But the if you look at the width of the basic
div (div#defList) is 300px and the width of the dl inside it (div#defList
dl) is 268px allowing 32px for the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any attachments is for
the sole use of the intended
recipient(s) and may contain confidential and privileged information.
Any unauthorized review, use, disclosure or distribution is
prohibited. If you are not the intended recipient, please contact the
sender and delete any copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245562
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
The reason it is bad to mix is when people who can't see your typeface decide to increase the font size in their browser (and a lot of us do that when the font size is too small), that a mixture of absolute values and relative values don't work well to keep your layout relative to the font size. Relative values will allow for a fluid layout that flows with the size of the font, absolute values will not. So by mixing these items, some of your parts will flow and some will not, which will make for a very lopsided layout at font sizes that are other than you choose. (and a lot of people do choose to increase font sizes). In terms of moving it, use the offsets only. CSS is as much an art as a science so you have to play, but start at 45% and work your offset up or down from that. The offsets don't have to match. Also remember that when using an absolutely positioned div, that that div is positioned relative to the containing parent which is not statically positioned. (position:relative or position:absolute), so you also need to make sure that the div is positioned so that it is (structurally speaking) contained only within the body tag and not any other tags around it that it might be positioned relative to. Sandra Clark == http://www.shayna.com Training in Cascading Style Sheets and Accessibility CSS HANDS ON New York City, October 10-13, 2006. http://www.shayna.com/index.cfm?fuseaction=training.syllabus_displayid=1 Why is it to mix, it does exactly what I want it to do. Now this may not work very widely but this is an Intranet application where I have knowledge of what browsers I am working with. My logic is that by placing the container top: 50% and left: 50%, this places the div layer in the middle of the browser, but it places the top left corner of the div in the middle. With the negative margins each 1/2 of the width and height move the middle of the div layer to the middle of the browser. How would I do that with positive values? I'll check out the scroll: auto, but I currently have only one vertical scroll bar, albeit in the limited set of browsers I am concerned with; again the advantage of a strictly controlled intranet environment of a small company. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245564 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
I gave you the answer already. (a long with other stuff you didn't ask for, but will probably make your CSS life a lot easier in the long run). To paraphrase set overflow:scroll to overflow:auto Well actually, you gave ME a long answer to why my CSS was bad, but I was a reply to the original poster, and I gave an example of the CSS that is working in an application I have built for my intranet. Brad Wood has not posted any CSS that he may or may not be using, so your answer could be a bit confusing, even though it may actually be a good answer for Brad. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245566 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
I tried that after you posted it and I didn't see a change.
I tried it in a style= attribute, and in a style block applied through
a class=.
I'm beginning to wonder if I have some CSS elsewhere overriding that, or
if I have a stupid typo somewhere keeping my CSS from being applied.
~Brad
-Original Message-
From: Sandra Clark [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 12:53 PM
To: CF-Talk
Subject: RE: iframe scrolling
I gave you the answer already. (a long with other stuff you didn't ask
for,
but will probably make your CSS life a lot easier in the long run).
To paraphrase
set overflow:scroll to overflow:auto
Sandra Clark
==
http://www.shayna.com
Training in Cascading Style Sheets and Accessibility
CSS HANDS ON
New York City, October 10-13, 2006.
http://www.shayna.com/index.cfm?fuseaction=training.syllabus_displayid=
1
-Original Message-
From: Brad Wood [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 1:35 PM
To: CF-Talk
Subject: RE: iframe scrolling
Yes, the amount of horizontal scroll seems to roughly match the width of
the
vertical scroll bar.
My current doctype is
!DOCTYPE html
PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
I tried a few others, but they didn't seems to make a difference.
~Brad
-Original Message-
From: Rob Wilkerson [mailto:[EMAIL PROTECTED]
Sent: Thursday, July 06, 2006 12:28 PM
To: CF-Talk
Subject: Re: iframe scrolling
What doctype are you using? In XTHML strict or transitional, IE behaves
differently. The 1/4 scroll is indicative of the horizontal scrollbar
compensating for the presence of the vertical scrollbar.
The scrolling distance is approximately the size of the vertical
scrollbar,
right?
On 7/6/06, Ian Skinner [EMAIL PROTECTED] wrote:
Here is the CSS I use on a DHTML popup div that only scrolls
vertically in IE. It is based on DIV's and DL's not IFRAME's so I do
not
know if it will help or not. But the if you look at the width of the
basic
div (div#defList) is 300px and the width of the dl inside it
(div#defList
dl) is 268px allowing 32px for the scroll bar.
div#defList
{
width: 300px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -150px;
padding: 0;
border: 2px solid #006;
background-color: white;
text-align: center;
z-index:2000;
}
div#defList h2
{
border: 0;
font-size: 100%;
position: relative;
}
div#defList h2 a
{
position: absolute;
background-color: #DDD;
color: black;
top: 0;
right: 0;
font-size: smaller;
padding: .25em;
border: 1px solid black;
text-decoration: none;
}
div#defList dl
{
margin: 0;
padding: 0 1em;
height: 174px;
width: 268px;
position: absolute;
bottom: 0;
left: 0;
text-align: left;
overflow: scroll;
}
--
Ian Skinner
Web Programmer
BloodSource
www.BloodSource.org
Sacramento, CA
-
| 1 | |
- Binary Soduko
| | |
-
C code. C code run. Run code run. Please!
- Cynthia Dunning
Confidentiality Notice: This message including any attachments is for
the sole use of the intended
recipient(s) and may contain confidential and privileged information.
Any unauthorized review, use, disclosure or distribution is
prohibited. If you are not the intended recipient, please contact the
sender and delete any copies of this message.
~|
Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245569
Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4
Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Ah, sorry, I thought the stuff was Brad's. My apologies Sandra Clark == http://www.shayna.com Training in Cascading Style Sheets and Accessibility CSS HANDS ON New York City, October 10-13, 2006. http://www.shayna.com/index.cfm?fuseaction=training.syllabus_displayid=1 -Original Message- From: Ian Skinner [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 2:04 PM To: CF-Talk Subject: RE: iframe scrolling I gave you the answer already. (a long with other stuff you didn't ask for, but will probably make your CSS life a lot easier in the long run). To paraphrase set overflow:scroll to overflow:auto Well actually, you gave ME a long answer to why my CSS was bad, but I was a reply to the original poster, and I gave an example of the CSS that is working in an application I have built for my intranet. Brad Wood has not posted any CSS that he may or may not be using, so your answer could be a bit confusing, even though it may actually be a good answer for Brad. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245571 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
Re: iframe scrolling
Someone recently pointed me to this nice little piece of JS which automatically sets the height of an iframe to exactly accomodate the source content. AFAIK it only correctly resizes the frame if the source page is local (from same site) but if that's the case for you it would allow you to avoid scroll bars altogther. BTW, the resizing is dynamic so if the source changes so does the height of the frame. - Original Message - From: Ian Skinner [EMAIL PROTECTED] To: CF-Talk cf-talk@houseoffusion.com Sent: Thursday, July 06, 2006 5:35 PM Subject: RE: iframe scrolling Can anyone tell me why IE tries to scroll both ways ONLY when there is a doctype present in the framed page? I'm not sure why the doctype has an effect or then that it does make IE or standards compliant, so maybe when the IE can parse the document is quirks mode it has a different behavior. The most likely the issue is that when the vertical scroll bar appears it squeezes the horizontal space of the content inside the frame, thus forcing the horizontal scroll bar to accommodate the content squeezed by the space for the vertical scroll control. If you can control the size of the space of the container and the content so that it has a place holder for the vertical scroll control so that the content does not get squeezed maybe this will help. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245572 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
Re: iframe scrolling
Err, forgot something me thinks: http://www.dynamicdrive.com/dynamicindex17/iframessi2.htm - Original Message - From: Ian Skinner [EMAIL PROTECTED] To: CF-Talk cf-talk@houseoffusion.com Sent: Thursday, July 06, 2006 5:35 PM Subject: RE: iframe scrolling Can anyone tell me why IE tries to scroll both ways ONLY when there is a doctype present in the framed page? I'm not sure why the doctype has an effect or then that it does make IE or standards compliant, so maybe when the IE can parse the document is quirks mode it has a different behavior. The most likely the issue is that when the vertical scroll bar appears it squeezes the horizontal space of the content inside the frame, thus forcing the horizontal scroll bar to accommodate the content squeezed by the space for the vertical scroll control. If you can control the size of the space of the container and the content so that it has a place holder for the vertical scroll control so that the content does not get squeezed maybe this will help. -- Ian Skinner Web Programmer BloodSource www.BloodSource.org Sacramento, CA - | 1 | | - Binary Soduko | | | - C code. C code run. Run code run. Please! - Cynthia Dunning Confidentiality Notice: This message including any attachments is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender and delete any copies of this message. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245573 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Well actually, you gave ME a long answer to why my CSS was bad, but I was a reply to the original poster, and I gave an example of the CSS that is working in an application I have built for my intranet. Brad Wood has not posted any CSS that he may or may not be using, so your answer could be a bit confusing, even though it may actually be a good answer for Brad. I figured out which parts were meant for me :) Well, it works great in firefox-- go figure. I have implanted the CSS which was suggested to no avail. Once again I am on IE 6.0 and here is a test you can view: http://bradwood.com/test.cfm ~Brad ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245574 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
You know, I've done that before and it's not too bad of an idea. I had forgotten about it to use here though. What code do you have? (It's probably prettier than my last attempt to do that). ~Brad -Original Message- From: Gareth [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 1:15 PM To: CF-Talk Subject: Re: iframe scrolling Someone recently pointed me to this nice little piece of JS which automatically sets the height of an iframe to exactly accomodate the source content. AFAIK it only correctly resizes the frame if the source page is local (from same site) but if that's the case for you it would allow you to avoid scroll bars altogther. BTW, the resizing is dynamic so if the source changes so does the height of the frame. ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245577 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Its your doctype, you are in undefined mode in IE. when I had Topstyle insert the doctype it seems to work fine in IE (keep it on one line and make sure it is the first line in your output. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; Sandra Clark == http://www.shayna.com Training in Cascading Style Sheets and Accessibility CSS HANDS ON New York City, October 10-13, 2006. http://www.shayna.com/index.cfm?fuseaction=training.syllabus_displayid=1 -Original Message- From: Brad Wood [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 2:18 PM To: CF-Talk Subject: RE: iframe scrolling Well actually, you gave ME a long answer to why my CSS was bad, but I was a reply to the original poster, and I gave an example of the CSS that is working in an application I have built for my intranet. Brad Wood has not posted any CSS that he may or may not be using, so your answer could be a bit confusing, even though it may actually be a good answer for Brad. I figured out which parts were meant for me :) Well, it works great in firefox-- go figure. I have implanted the CSS which was suggested to no avail. Once again I am on IE 6.0 and here is a test you can view: http://bradwood.com/test.cfm ~Brad ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245583 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Yeah, I mentioned that in my original post. When I remove the doctype, it works great. My example at http://bradwood.com/test.cfm has the doctype as the first line of the document and it has no line breaks in it. However, despite all that, it doesn't render as expected on my browser. ~Brad -Original Message- From: Sandra Clark [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 1:39 PM To: CF-Talk Subject: RE: iframe scrolling Its your doctype, you are in undefined mode in IE. when I had Topstyle insert the doctype it seems to work fine in IE (keep it on one line and make sure it is the first line in your output. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245589 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
RE: iframe scrolling
Different doctypes will produce different results. Try reading this. http://www.alistapart.com/stories/doctype/ - Snake -Original Message- From: Brad Wood [mailto:[EMAIL PROTECTED] Sent: 06 July 2006 19:55 To: CF-Talk Subject: RE: iframe scrolling Yeah, I mentioned that in my original post. When I remove the doctype, it works great. My example at http://bradwood.com/test.cfm has the doctype as the first line of the document and it has no line breaks in it. However, despite all that, it doesn't render as expected on my browser. ~Brad -Original Message- From: Sandra Clark [mailto:[EMAIL PROTECTED] Sent: Thursday, July 06, 2006 1:39 PM To: CF-Talk Subject: RE: iframe scrolling Its your doctype, you are in undefined mode in IE. when I had Topstyle insert the doctype it seems to work fine in IE (keep it on one line and make sure it is the first line in your output. !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd; ~| Message: http://www.houseoffusion.com/lists.cfm/link=i:4:245592 Archives: http://www.houseoffusion.com/cf_lists/threads.cfm/4 Subscription: http://www.houseoffusion.com/lists.cfm/link=s:4 Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=11502.10531.4 Donations Support: http://www.houseoffusion.com/tiny.cfm/54
