HTML5 display table nested divs not working with firefox & opera

chaguboplem

New Member
Have following testing code.\[code\]<!DOCTYPE html><html style="min-width:100%;min-height:100%;height:100%;width:100%"><body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"><div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;"> <div style="display:table-row;background:red;">A</div> <div style="display:table-row;background:green;"> <div style="display:block;background:yellow;width:100%;height:100%;">B</div> </div> <div style="display:table-row;background:blue;height:50px;">C</div></div></body></html>\[/code\]Firefox it displays yellow div small (as the table-row but is set display:block).Opera too.Chrome display yellow div in 100% height of green div (table-row).I need this works in Firefox, Opera, IE>8 the same as in Chrome!Thanks you for help.UPDATE: i found following problem:\[code\]<!DOCTYPE html><html style="min-width:100%;min-height:100%;height:100%;width:100%"><body style="margin:0;min-width:100%;min-height:100%;height:100%;width:100%"><div style="display:table;width:100%;height:100%;min-wight:100%;min-height:100%;"> <div style="height:50px;display:table-row;background:red;">A</div> <div style="display:table-row;background:green;"> <div style="display:table-cell;background:yellow;"> <div style="display:block;width:100%;height:100%;background:darkred;">B</div> </div> </div> <div style="display:table-row;background:blue;height:50px;">C</div></div></body></html>\[/code\]Not working darkred div in opera!
 
Back
Top