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.
<!-- m --><a class="postlink" href="http://maciej64d.1go.dk/flickering_overflow.htm">http://maciej64d.1go.dk/flickering_overflow.htm</a><!-- m -->
example: page not flickering without overflow:auto on DIV's:
<!-- m --><a class="postlink" href="http://maciej64d.1go.dk/no_overflow.htm">http://maciej64d.1go.dk/no_overflow.htm</a><!-- m -->
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':
<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>Try absolutely positioning the div's instead of floating them. Use a strict DTD too.button {padding:0 5px;}Originally posted by Fang
button {padding:0 5px;}
Omg it works! thanks! I am impressed.Originally posted by maciej64
Omg it works! thanks! I am impressed.
FANG = F***ing Amazing Notation Guru
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.
<!-- m --><a class="postlink" href="http://maciej64d.1go.dk/flickering_overflow.htm">http://maciej64d.1go.dk/flickering_overflow.htm</a><!-- m -->
example: page not flickering without overflow:auto on DIV's:
<!-- m --><a class="postlink" href="http://maciej64d.1go.dk/no_overflow.htm">http://maciej64d.1go.dk/no_overflow.htm</a><!-- m -->
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':
<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>Try absolutely positioning the div's instead of floating them. Use a strict DTD too.button {padding:0 5px;}Originally posted by Fang
button {padding:0 5px;}
Omg it works! thanks! I am impressed.Originally posted by maciej64
Omg it works! thanks! I am impressed.
FANG = F***ing Amazing Notation Guru