html - DIV expanding over the DIV below -

-

i hit sth appears bug or @ least weird feature of css/html. now, problem got 3 divs in row, inside parent div.

the first , second 1 supposed text containers in chat-like matter. last 1 supposed excluded , paging navigation.

on first page, works fine. on every other page, the last text container div expands on navigation. when using chrome developer tools, shows me second div having real size, while background still expands on navigation. if delete navigation, second text container resizes real size. also, when using

position:absolute;

it doesn't expand. setting position relative explicitly didn't fix problem , setting background-color sth else didn't change white background.

i made quick demonstration under jsfiddle.net. so final question is: why second text div expand? or doesn't looks does?

//edit: suggested in comments, here raw css/html outside jsfiddle. still don't think that's idea, if so..

<div class="decoded_chat" pagenr="1" style="display: block;">   <div class="decoded_user decoded_user_first" isme="0">      <a href="https://www.facebook.com/4" target="_new" title="profil aufrufen">        <img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">        <div class="decoded_user_name">         zuckerberg       </div>      </a>        <div class="decoded_msg_date">         02.02.2014, 01:36 uhr       </div>       <div class="decoded_msg">         listen songs when i'm not tired       </div>       <div class="decoded_msg">         don't know.. possibly       </div>       <div class="decoded_user decoded_user_last" isme="0">          <a href="https://www.facebook.com/4" target="_new" title="profil aufrufen">            <img class="decoded_user_avatar" src="http://graph.facebook.com/4/picture?type=square">            <div class="decoded_user_name">             zuckerberg           </div>          </a>          <div class="decoded_msg_date">           02.02.2014, 01:33 uhr         </div>         <div class="decoded_msg">           i've been ill week.. haven't had time         </div>         <div class="decoded_chat_pager">           <a href="javascript:void(0);" pagenr="0" class="cloudview_msg_prev">             « vorherige seite           </a>           <a href="javascript:void(0);" pagenr="2" class="cloudview_msg_next">             nächste seite »           </a>         </div>       </div>  {     text-decoration: none;     color: white; } .chat_list {     width:100%; } .decoded_chat {     text-align:left;     width:100%;     margin:auto;     background-color:white;     color:black;     border-radius:10px; } .cloudview_msg_next {     float:right; } .decoded_chat_pager {     margin:auto;     margin-top:5px;     text-align:left;     width:95%; } .decoded_msg {     margin-bottom:3px; } .decoded_user {     padding:15px 10px;     min-height:50px; } .decoded_user_last {     border-bottom-left-radius:10px;     border-bottom-right-radius:10px; } .decoded_user_first {     border-top-left-radius:10px;     border-top-right-radius:10px; } .decoded_user_name {     color:black;     margin-bottom:5px; } .mychatmessage {     background-color:#bff2bf; } .decoded_msg_date {     float:right;     color:grey;     margin-top:-30px; } .decoded_user_avatar {     position:absolute; } .decoded_user_name {     font-weight:bold; } .decoded_user_name, .decoded_msg {     margin-left:64px; } table {     text-align:center; } .flipped-180 {     -moz-transform: scalex(-1);     -o-transform: scalex(-1);     -webkit-transform: scalex(-1);     transform: scalex(-1);     filter: fliph;     -ms-filter:"fliph"; } #detailopener, #return_to_msg, #return_to_cloud, #cloudview_delete {     display:none; } .chat_list_names {     color:grey; } .invi {     position:fixed;     width:1px;     height:1px;     top:-2000px;     left:-2000px; } .next_page_chat_list {     text-align:right;     padding-right:5px; } .last_page_chat_list {     padding-left:5px;     text-align:left; } .loadingtext {     margin-top:7px; } #opener {     position:fixed;     left:25px;     bottom:25px;     cursor:pointer;     display:none; } .dontdroponme {     opacity:0.3; } #dropper {     position:fixed;     right:25px;     bottom:25px;     cursor:pointer;     display:none; } .dropinfo {     border-radius:7px;     color:white;     padding:5px 25px; } .dorpinfo img {     width:48px; } .chatlist_button img, .decoded_user_avatar {     box-shadow:0 0 5px #888;     border-radius:5px; } .chatlist_button {     background-color:white;     border-radius:5px;     box-shadow:0 0 5px #888;     padding:5px;     cursor:move;     max-width:200px;     margin:auto; } .ui-draggable-dragging {     position:absolute;     z-index:5; } body {     height:100%;     margin:0;     background-color:#3b5998;     color:white;     font-size:12px;     font-family:calibri; } #innerbody {     margin:auto;     width:55%;     text-align:center; } #innerbody_floater {     height:50%;     width:100%;     margin:0; }

copy http://www.w3schools.com/css/css_positioning.asp

an absolute position element positioned relative first parent element has position other static. if no such element found, containing block html:


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more