Mozilla - overflow:auto - flickering page on button press

**maciej64** · 12-22-2004 10:49 AM

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>

**heavenly_blue** · 12-22-2004 11:23 AM

Try absolutely positioning the div's instead of floating them. Use a strict DTD too.

**Fang** · 12-22-2004 11:34 AM

button {padding:0 5px;}

**maciej64** · 12-22-2004 12:36 PM

Originally posted by Fang
button {padding:0 5px;}

Omg it works! thanks! I am impressed.

**NogDog** · 12-22-2004 12:46 PM

Originally posted by maciej64
Omg it works! thanks! I am impressed.

FANG = F***ing Amazing Notation Guru

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

Thread Tools

Display

Mozilla - overflow:auto - flickering page on button press

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions