Ap Div Overflow

Is it possible for ap div's to become larger when the text
overflows? If this is not
possible, is it possible when done with a standard div tag (i
will have to convert my tags)
Thank you

Hello medi-ochre,
If I understand correctly, the problem you're having is that
content is getting clipped when it extends beyond the height of
your div. If this is the case, you should set the div's overflow
style from hidden to visible. Here's an example of the CSS for an
AP div with an overflow specified:
#apDiv1 {
position:absolute;
width:200px;
height: 200px;
overflow:visible;
Let me know if you need more help.
Best regards,
Corey

Similar Messages

IE7 issue with Thumbnails div & Overflow

this has to do with layout of the the gallery page and an IE7
CSS issue.
I was playing with the Photo gallery demo and decided to
resize the thumbnails div to get different shape and found an issue
with IE7 and the overflow. if the tumbnail div height is set to say
100px, and set overflow:auto; it makes sense that the thumbnails in
the bottom 3 rows would not be visible unless you scrolled the div.
well it works fine in Firefox but IE draws thumbnails right
over the height boundry and on into the next div below. I thought
IE7 was supposed to fix the CSS hacks needed.
what is the hack to fix this?

It could be a function of how the script is written and
changes being
made at the object-level. Rather than set position to
relative, you
might try using the proprietary Microsoft zoom property to
give the
naughty container layout.
your-container {zoom: 1;}
If that doesn't work, then you can resort to position:
relative.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Usability question: Iframe or DIV overflow-scroll

Hi,
I have designed a site: www.banacreative.com that uses a DIV
with
overflow scroll for the text content area. From a design
standpoint I
don't like endlessly scrolling pages filled with lots of
boring text, so
I have chosen to put the long text in a scroll DIV keeping
the design
intact. I have gotten some feedback that having two scroll
bars - one
for the HTML page, and one for the DIV - is confusing. I'm
therefore
looking for comments on this. Is this something to be avoided
in
general, or is this an acceptable solution?
TIA

BruceCSI2 wrote:
> I've created pages with both IFrames and scrolling divs.
The bottom scrollbar
> of the IFrame doesn't really scroll all that much so
it's not really an issue,
> and as on your site the bottom scrollbar of the div is
actually grayed out so
> it's not an issue at all. It would be nice to get rid of
it,
just use any other browser than IE to get rid of it
> but it's
> nonfunctional.
>
you're talking some IE-Windows-specific-behavior described as
if it was something everybody saw...
In my browser (Safari) I get two scroll bars (page, and
scrolling area). The scroll bar of the
scrolling area is in part hidden, as it goes beyond my
browser window height.
So I have to scroll the page anyways, to see the whole of the
inner scrolling area. And that, is
very annoying.
seb ( [email protected])
http://webtrans1.com | high-end web
design
An Ingenious WebSite Builder:
http://sitelander.com

CFMENU in IE6 shifts to the left and is wider than containing DIV

I have a horizontal CFMENU inside of a DIV, and in IE7/IE7/FF/Chrome, the menu is floated to the right, as specified in my CSS, but in IE6, the menu shifts to the left of the DIV that contains it, and it's width expands beyond the boundaries of the containing DIV. I've included all the applicable HTML and CSS below:
HTML:
    <body>
         <div align="center">
             <div id="bodyContainer">
                 <div class="contentContainer">
                     <div id="middlenav">
                         <div class="linksContainer">
                             <cfmenu name="ajaxMenu" type="horizontal">
                             </cfmenu>
                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </body>
CSS:
body, img, div, p, a, form, fieldset, ol, ul, label {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: black;
body {
    background-color: #E6E6E6;
    background-repeat: repeat-x;
    width: 100%;
div {
    overflow: hidden;
p, form, table, ol, ul {
    padding-top: 10px;
ol ul {
    padding-top: 5px;
    list-style-type: disc;
ol, ul {
    margin-left: 30px;
li {
    padding-bottom: 5px;
a {
    text-decoration: none;
a:hover {
    text-decoration: underline;
.linksContainer {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
.linksContainer a {
    font-size: 13px;
.contentContainer {
    background-color: white;
    border-color: #00338D;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
#ajaxMenu {
    width: 960px;
#ajaxMenu,
#ajaxMenu div.bd,
#ajaxMenu ul,
#ajaxMenu li.yuimenubaritem {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: white;
#ajaxMenu a.yuimenubaritemlabel {
    border-color: black;
    border-width: 0px 0px 0px 2px;
#ajaxMenu li.first-of-type .yuimenubaritemlabel {
    border-left-width: 0px;
#ajaxMenu ul {
    height: auto;
    width: auto;
    border-style: none;
/* Hide down arrow on CF_generated AJAX menus */
#ajaxMenu .submenuindicator {
    visibility: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 0px;
#ajaxMenu li {
    height: auto;
    width: auto;
#ajaxMenu li.yuimenuitem {
    margin-bottom: -5px;
#ajaxMenu li.yuimenuitem a {
    padding: 5px 12px 5px 12px;
#ajaxMenu li a {
    font-size: 13px;
    padding: 1px 8px 1px 8px;
    text-decoration: none !important;

I have a horizontal CFMENU inside of a DIV, and in IE7/IE7/FF/Chrome, the menu is floated to the right, as specified in my CSS, but in IE6, the menu shifts to the left of the DIV that contains it, and it's width expands beyond the boundaries of the containing DIV. I've included all the applicable HTML and CSS below:
HTML:
    <body>
         <div align="center">
             <div id="bodyContainer">
                 <div class="contentContainer">
                     <div id="middlenav">
                         <div class="linksContainer">
                             <cfmenu name="ajaxMenu" type="horizontal">
                             </cfmenu>
                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </body>
CSS:
body, img, div, p, a, form, fieldset, ol, ul, label {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: black;
body {
    background-color: #E6E6E6;
    background-repeat: repeat-x;
    width: 100%;
div {
    overflow: hidden;
p, form, table, ol, ul {
    padding-top: 10px;
ol ul {
    padding-top: 5px;
    list-style-type: disc;
ol, ul {
    margin-left: 30px;
li {
    padding-bottom: 5px;
a {
    text-decoration: none;
a:hover {
    text-decoration: underline;
.linksContainer {
    float: right;
    padding-top: 5px;
    padding-bottom: 5px;
.linksContainer a {
    font-size: 13px;
.contentContainer {
    background-color: white;
    border-color: #00338D;
    border-style: solid;
    border-width: 2px;
    border-top: none;
    border-bottom: none;
#ajaxMenu {
    width: 960px;
#ajaxMenu,
#ajaxMenu div.bd,
#ajaxMenu ul,
#ajaxMenu li.yuimenubaritem {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    background: white;
#ajaxMenu a.yuimenubaritemlabel {
    border-color: black;
    border-width: 0px 0px 0px 2px;
#ajaxMenu li.first-of-type .yuimenubaritemlabel {
    border-left-width: 0px;
#ajaxMenu ul {
    height: auto;
    width: auto;
    border-style: none;
/* Hide down arrow on CF_generated AJAX menus */
#ajaxMenu .submenuindicator {
    visibility: hidden;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 0px;
#ajaxMenu li {
    height: auto;
    width: auto;
#ajaxMenu li.yuimenuitem {
    margin-bottom: -5px;
#ajaxMenu li.yuimenuitem a {
    padding: 5px 12px 5px 12px;
#ajaxMenu li a {
    font-size: 13px;
    padding: 1px 8px 1px 8px;
    text-decoration: none !important;

Overlapping fields in java web viewer

We are having an issue with SAP Crystal Report, version for Eclipse(java run time). We are using 12.2.217 of the java run time.
We are having an issue with data from one field overlapping the data from another field in the report viewer. These are reports that we have used for a
while and viewing them in a windows activeX viewer without having this issue. In the activeX viewer the fields are truncated. The designer also truncates the
fields. We are using Crystal Reports 2008 version 12.2.0.290 designer.
I have seen suggestions involving the Can Grow option. We were not happy with either the 0 or 1 line options. The 0 option for unlimited can make the reports much longer. The 1 line option truncates on whole words so you can lose a lot more this way. We would prefer truncation of the field like the other viewers handle it.
We had a change to the Style.css file that worked great on the fields, but had some undesirable side effects. Like sub reports and sort controls disappeared. It seems the field css tag is generated at run time, thus not able to address them specifically in the css file.
div
overflow:hidden;
I have attached a couple examples. Any suggestions would be greatly appreciated.

I guess we're not on the same page.
I don't know how a java program running in a browser as an applet, can
access fields in the HTML page that the browser is displaying.
Could you explain how you are able to do this please?
Where/how is the java code being executed that it can communicate with a browser and insert data in an HTML field on a page the the browser is displaying?
Or is your java code running on a server and outputting HTML text that is being returned to a client's browser?
In which case, your question is more about how to do it in HTML . Once you have the correct HTML syntax then its simple to have a program write the needed HTML.

Small margin at the bottom of the browser

Hi,
I have a Flash file inserted into a centred div, the div is set at 100% width & height, the Flash file is set at "Exact fit". Everything looks fine except a small margin at the bottom of the browser window, in both Firefox4 or IE9. I've set the body to 0 margins all round but can't get rid of this margin. If I remove the Flash file set the div to a coloured background it's perfect, no margin at the bottom, driving me around the bend, can't find the answer.
I'm using CS5 DW & Flash.
I also tried reducing the height of the swf file but no luck. Would be grateful for some advise here.
Thanks in advance

Thanks for the reply John.
Sorry, site is not yet on a live server.
Just been fiddling around and I think I've fixed it, I set the div Overflow to hidden, it's looking good.
Regards

Spry Accordion not working!

I have a spry accordion in my page and I'm using Dreamweaver to do my editing. I use this all the time, but have never had this happen before. When in Design mode, if I click anywhere within the accordion structure a blue box appears around the structure, and I am unable to made any edits. When I hover over the structure, I get a pop-up that shows ID, DIV, Overflow, etc.
Can anyone help me?

You probably have overflow:hidden specified somewhere in your CSS code for float containment.
Use Split View or Code View to edit the code.
Or, double click in Design View.
Or, right-click in Design View and & select Element View > Full.
Nancy O.

Automated area-sizing

When using HTML and CSS you can automate the size of an "area" of the page
an "area" is classed as a DIV and you automate it by setting its height and/or width to auto (usually height only with width given a fixed size)
in adition you can set the DIVs overflow parameter
this is vital for CMS managed websites
does flash have any simple functions for achieveing the same result?
or
if i used flash with a CMS system would i need use AS3 to calculate the total height and width of all child objects and set this number as the height and width of the pearent object? (with HTML/CSS i would use javascript to do this)

You cannot dynamically resize the dimensions of the Flash file's stage if that is what you are asking.

Scrolling text almost solved

Ok, I kind of figured out my problem with having text scroll
when there's not enough room in a table cell. I added this style to
my style sheet:
div#overflow {
overflow: auto;
height: 310px;
Then I surrounded the text in my cell with this div tag:
<div id="overflow">
Everything seemed to work except I'm on a Mac and can only
preview in Safari, Firefox, Netscape and Opera. Firefox, Netscape
and Opera worked fine but in Safari I got a horizontal scroll bar
at the bottom of the cell, although there were no arrows to scroll
with, it was just a white box. How can I get rid of the horizontal
scroll bar in Safari and will the coding that I have work in IE?
Thanks!

Try adding the width tag and make sure nothing in your div is
wider than that.

Scrollable Frame solution for EPUB Fixed Layout

Hi,
I have found a solution (or, rather a hack) which allows us to create scrolling frames for EPUB Fixed Layouts.
You can find the exported EPUB, as well as my InDesign file on my Dropbox: EPUB scroll.
This solution has some weak points and has only been tested in iBooks on an iPad with iOS 8, but here's how it works:
Create two text frames (one as big as your text requires, and one which will be the container [tip: make the container a bit wider than the text frame])
Cut the big text frame, select the smaller container frame, and Edit->Paste into
Right click on the container, select Object Export Options, choose EPUB and HTML and enter "subchapter" as epub:type:
Open a text editor and create a new CSS file. For CSS code, see below
Export as Fixed layout EPUB. In the export dialog box, select the CSS tab and add the previously created CSS file
Done!
CSS code:
div[*|type = "subchapter"] {
position: relative;
div[*|type = "subchapter"] > div {
overflow: auto;
As you see, steps 1 and 2 are essentialy the same as for creating a scrollable frame folio overlay.
It’s not perfect, and this solution is just a proof-of-concept, but it should get you going.
An obvious problem is that we use basic HTML scrollbar, which is not being displayed in e-book readers such as iBooks on the iPad. Hence, the user has now idea how long the scrollable content stretches. This could probably be solved with a more complex, JS-based solution.
Also, the gradient feather at the bottom (which is intended to create a "fade-out effect) seems not to export well. This one should be easy to solve, placing another rectangle with a gradient in it. But I’m not sure if transparency exports well, and haven’t tested it.
Feel free to use, and improve, this hack!
Thanks,
/Jacob

Thank you Uwe,
I look and hold you aware of your solution in an environment EPUB
Patrick
Dr Patrick Dhont
Le 29 janv. 2015 à 11:52, Laubender <[email protected]> a écrit :
Scrollable Frame solution for EPUB Fixed Layout
created by Laubender <https://forums.adobe.com/people/Laubender> in InDesign EPUB - View the full discussion <https://forums.adobe.com/message/7143179#7143179>
@Papo – then I would suggest not a scrollable frame, but an MSO you can click through showing the whole text.
1. Do some text frames the same size
2. Thread all the text frames to one story
3. Align the text frames
4. Make a MSO out of it:
The text frames are still threaded and text can easily flow between them.
5. Do some navigation buttons to control the MSO states:
"Go To First State", "Go To Next State", "Go To Previous State" etc.
Later you can change the text (add or remove, do different formatting) flowing in that story through the states.
A very flexible solution. Ok, it's not a scrollable frame, but something like that…
Uwe
If the reply above answers your question, please take a moment to mark this answer as correct by visiting: https://forums.adobe.com/message/7143179#7143179 and clicking ‘Correct’ below the answer
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page:
Please note that the Adobe Forums do not accept email attachments. If you want to embed an image in your message please visit the thread in the forum and click the camera icon: https://forums.adobe.com/message/7143179#7143179
To unsubscribe from this thread, please visit the message page at , click "Following" at the top right, & "Stop Following"
Start a new discussion in InDesign EPUB by email <mailto:[email protected]software.com> or at Adobe Community <https://forums.adobe.com/choose-container.jspa?contentType=1&containerType=14&container=50 01>
For more information about maintaining your forum email notifications please go to https://forums.adobe.com/thread/1516624 <https://forums.adobe.com/thread/1516624>.

Navigation Region CSS problem

workspace : RGWORK
user : tester
pass: test12
apllication name :TESTER 01
page : 2
How do I fix the css of my navigation region? their are lines that are extending in the bottom of the region.. How will I solve that?

The Simple Red (theme 1) CSS includes the following rule:
.navigation-region div {
    overflow: hidden;
    width: 183px;
    padding: 0 0 4px;
    background: url(../images/bg-navigation-b.gif) no-repeat 0 100%;
}The <tt>.navigation-region div</tt> descendant selector causes this rule to be applied to all <tt>div</tt> elements that are contained within elements with a class of <tt>.navigation-region</tt>. As it seems unfeasible to expect apps to never have <tt>div</tt>s in a navigation region—as you've discovered—I'd say this is definitely a bug. We certainly shouldn't get these kind of artefacts from a combination of built-in components and templates.
The CSS selector for this rule should be more specific. There are a number of different possible ways to do this. Combining child and pseudo-class<tt>:first-child</tt> pseudo-class is one of them, and avoids having to make any changes to the template HTML.
The best way to fix this is to copy the theme, modify the errant CSS, and republish the theme in the repository. (In some cases, such as in a hosted environment, this might not be possible.)
As a simple fix in this example, I created a small custom style sheet and a new page template referencing it:
.navigation-region div {
padding: 0;
background: none;
.navigation-region > div:first-child {
overflow: hidden;
width: 183px;
padding: 0 0 4px;
background: url(/i/themes/theme_1/images/bg-navigation-b.gif) no-repeat 0 100%;
}The first rule resets the problem properties using the same descendant selector as the theme CSS; the second is the "correct" rule that only affects the first child <tt>div</tt> in <tt>.navigation-region</tt> elements.
There's a slight problem with this fix as the initial reset rule will affect all <tt>div</tt>s in <tt>.navigation-region</tt> elements: it's necessary to ensure that any rules setting <tt>padding</tt> or <tt>background</tt> on other <tt>div</tt>s need to follow this one in the cascade or be more specific than this one, hence creating a copy of the theme is the best option.

How to change the links text color?

could any one tell me if it's possible to change the link text's color? instead we stuck with the defaut theme asigned color.

Ok Looking to do this manually I don't see all that you suggest I need to see.
.Body {
color: #181c01;
font-family: 'Palatino-Roman', 'Palatino', 'serif';
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: normal;
letter-spacing: 0;
line-height: 19px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
text-transform: none;
.Header {
color: #6a6f75;
font-family: 'Palatino-Bold', 'Palatino', 'serif';
font-size: 29px;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.16em;
line-height: 38px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
text-decoration: none; NOTE THIS
text-indent: 0px;
text-transform: uppercase;
.Normal {
padding: 4px;
.graphicgeneric_body_textbox_styledefault {
background: transparent;
float: none;
margin: 0px;
opacity: 1.00;
.graphicgeneric_header_textbox_styledefault {
background: transparent;
float: none;
margin: 0px;
opacity: 1.00;
.graphictextbox_layout_styledefault {
padding: 4px;
.graphictextbox_styledefault {
background: transparent;
float: none;
margin: 0px;
opacity: 1.00;
div {
overflow: visible;
img {
border: none;
.InlineBlock {display: inline; }
.InlineBlock {display: inline-block; }
.tinyText {
font-size: 1px;
This is the welcome page css file, not the index file.
On my page I have white background, black text, when the arrow points to the link text it turns light brown, I am not so concerned about anything except the link text standing out in a differnt color, initially.
I am leaning quite abit.
So what do I do now
Thanks
Moncrief

Removing underline from links

I've searched the backposts which suggest editing the CSS files. That seems easy enough; however, when I open the CSS file for my "home.html" site, which has an underlined link, I don't see any text decoration tags. In fact, there's hardly anything there at all:
.graphicgeneric_title_textbox_styledefault {
background: transparent;
float: none;
margin: 0px;
opacity: 1.00;
div {
overflow: visible;
img {
border: none;
.InlineBlock {display: inline; }
.InlineBlock {display: inline-block; }
.tinyText {
font-size: 1px;
I don't see any place to change the underline function. What's happening here?
Thanks,
Chris

Well, I think what you have done actually is made the link into a rollover link, and these are converted to graphics by iWeb. Unlike regular text hyperlinks, there is no CSS associated with rollover links. Just separate images depending on the rollover state. Here are the two images for your "portfolio" rollover link...
http://www.chriskresser.com/test/ckphoto/homefiles/shapeimage_1_link0.png
http://www.chriskresser.com/test/ckphoto/homefiles/shapeimage_1_rollover0.png
You won't see anything against a white background for the first link because the text is white as well....but this is the normal state of your link. The second image is the grey colored rollover state image. You can basically use an image editing program to edit these images, then copy them back to the directory. But then you will have to do this everytime your page is published.
I'm not sure what governs whether a text link becomes a rollover link or not in iWeb. It may have to do with whether you hyperlink the actual "portfolio" text vs. hyperlinking the TEXT BOX that contains the word "portfolio". I believe that separating out each word into separate text boxes and then hyperlinking the TEXT BOX for "portfolio" might alleviate your problem.
Try this and let me know how it goes!

Eeks! It won't print!

I can not figure out how to make this page print correctly.
http://www.eclipsme.com/del-mar/signupinstructions.html
The first page prints, but not the rest.
I have applied a print style sheet with the following:
#menu {
visibility: hidden;
#header {
display: none;
#sidebar {
display: none;
If you look at the source code, the main content begins at
"<div
id="main">"
What am I doing wrong? Shouldn't it be page breaking
automatically?
Thanks,
Harvey

Try adding this to your main div:
{overflow:visible !important;height:auto !important}
Nancy Gill
Adobe Community Expert
Author: Dreamweaver 8 e-book for the DMX Zone
Co-Author: Dreamweaver MX: Instant Troubleshooter (August,
2003)
Technical Editor: DMX 2004: The Complete Reference, DMX 2004:
A Beginner''s
Guide, Mastering Macromedia Contribute
Technical Reviewer: Dynamic Dreamweaver MX/DMX: Advanced PHP
Web Development
"eclipsme" <[email protected]> wrote in message
news:f29ebh$i40$[email protected]..
>I can not figure out how to make this page print
correctly.
>
>
http://www.eclipsme.com/del-mar/signupinstructions.html
>
> The first page prints, but not the rest.
>
> I have applied a print style sheet with the following:
>
> #menu {
> visibility: hidden;
> }
> #header {
> display: none;
> }
> #sidebar {
> display: none;
> }
>
> If you look at the source code, the main content begins
at "<div
> id="main">"
>
> What am I doing wrong? Shouldn't it be page breaking
automatically?
>
> Thanks,
> Harvey

Scrollable Tabs

I recently came across the boards concerning lockable report headers (and columns) and managed to implement the div overflow:auto to good use. This got me thinking about applying this method to the table encapsulating the tabsets. My company has been doing quite a bit of development in APEX, so much so, that we have tabsets that are wider than the rest of the page the tabs are navigating to.
<BR><BR>
I'd like to be able to use the div tag to make my tabsets scrollable, so I don't have tabs running off the page.
<BR><BR>
I'm currently using the Light Blue (15) theme, and I'm trying to wrap the standard tab set with this div. The problem is, something is adding | characters (and possibly some other code) between the tab links. Whatever code is here is preventing the code I added from functioning properly.
<BR><BR>
Any suggestions or alternative approaches would be much appreciated!

You're learning something new about Apex! :-)
It automatically includes a few CSS files that are on the application server (?) when it displays the pages. The theme CSS is referenced in the page Template, but there's another that I don't recall how it's included.
Anyway, I displayed this from the FireFox browser using the almost-required <b>Web Developer</b> add-on, which you should install. It lets you display all the CSS files that are being referenced in a given web page. Install this and use it even if you're developing for the IE browser, it's that good!
You can find references to this and lots of other tricks in the Oracle HTML DB Handbook book by Larry Linnemeyer, which you'll find at Amazon.com. A must-read.
Good luck,
Stew

Ap Div Overflow

Similar Messages

Maybe you are looking for