www.webdeveloper.com
Results 1 to 5 of 5

Thread: Mozilla - overflow:auto - flickering page on button press

  1. #1
    Join Date
    Dec 2004
    Posts
    21

    Mozilla - overflow:auto - flickering page on button press

    I have encountered a strage flickering when clicking a button placed inside a DIV with the style overflow:auto

    Now I want my layout DIV's to be floated, because when I position them absolute IE just screws up the whole layout, streching DIVs when padding is applied and such. Only the floating DIVs layout is rendered the same in IE and Mozilla.

    However I got another problem. I want one of the DIVs to have overflow:auto, however when I apply this style then the page is flickering when pressing a button:

    example: flickering page in Mozilla using overflow:auto on DIV's when clicking a button inside the DIV.

    http://maciej64d.1go.dk/flickering_overflow.htm

    example: page not flickering without overflow:auto on DIV's:

    http://maciej64d.1go.dk/no_overflow.htm

    Has anyone an idea how to make 'layout' DIVs that will be rendered correctly, in the same way by both IE and Mozilla, allowing overflow:auto and causing the page NOT to flicker on button pressed?

    Maybe I ask for too much, but simple comments on WHY this is happening would be appreciated. I am a CSS noob, just trying to get some effects right.

    this is the code for the 'flickering page':

    Code:
    <html>
    <head>
    <STYLE type=text/css>
    div.layout {
    float:left;
    width: 33%;
    height: 33%;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    
    overflow:auto;
     
    }
    </style>
    
    <script type="text/javascript">
    function buttonClick() {
    }
    </script>
    
    </head>
    <body>
    <div class="layout">
    left simple text left simple text left simple text<br>
    <button class="buttonLeft" onClick="buttonClick();">append txt</button>
    <button class="buttonLeft" onClick="buttonClick();">count</button>
    <button class="buttonLeft" onClick="buttonClick();">delete first</button>
    <button class="buttonLeft" onClick="buttonClick();">create pic</button>
    </div>
    <div class="layout">
    mid simple text
    </div>
    <div>
    style="background-color:#00FF00;width:30px;height:30px;float:left">
    </div>
    <div class="layout">
    dude dude dude dude dude dude
    </div>
    </body>
    </html>
    Last edited by maciej64; 12-22-2004 at 07:13 PM.

  2. #2
    Join Date
    Jun 2004
    Location
    Southern California
    Posts
    189
    Try absolutely positioning the div's instead of floating them. Use a strict DTD too.

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    button {padding:0 5px;}

  4. #4
    Join Date
    Dec 2004
    Posts
    21
    Originally posted by Fang
    button {padding:0 5px;}
    Omg it works! thanks! I am impressed.

  5. #5
    Join Date
    Aug 2004
    Location
    Ankh-Morpork
    Posts
    19,388
    Originally posted by maciej64
    Omg it works! thanks! I am impressed.
    FANG = F***ing Amazing Notation Guru

    "Please give us a simple answer, so that we don't have to think, because if we think, we might find answers that don't fit the way we want the world to be."
    ~ Terry Pratchett in Nation

    eBookworm.us

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles