Коммент намба ван. Если уж взялись работать с блоками, обязательно указывайте ДОКТАЙП!
Коммент намба ту. Я взял на себя смелость немного оптимизировать CSS правила.
Коммент намба три. Проблема в IE решается уменьшением margin в 2 раза, т.к. у него есть такая болезнь удваивать их. Для этого я воспользовался хаком:
Код:
*margin: 8px;
*/marin: 4px;
Первый параметр обработаю все браузеры, а второй только IE, переписав соответственно первый параметр на второй.
Коммент намба фо. Т.к. у вас не согласованы размеры блоков их внешних отступов и родительского блока (т.е. ширина дочерних блоков + отступы * на колво блоков в строке = ширина родительского блока), плюс еще то, что дочерние блоки из-за невозможности вместить текст увеличивали высоту блока, то на выходе и получали такую мешанину. Для наглядности я переопределил цвет фона дочерних блоков, чтобы было лучше видно их.
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Folders</title>
<style type="text/css">
****div.window {
*width: 420px;
*height: 280px;
*position: absolute;
*margin: 8px;
*padding: 0px;
*overflow: auto;
****}
****div.titlebar {
*width: 100%;
*height: 16px;
*border-bottom: solid black 1px;
*overflow: hidden;
*color: white;
*background: #0066AA url(images/titlebar_bg.jpg) repeat-x;
****}
****span.titleButton {
*height: 15px;
*width: 15px;
*position: relative;
*padding: 0px;
*margin: 0px 1px 0px 1px;
*float: right;
****}
****span.titleButton#min {
*background: transparent url(images/min.gif) top left no-repeat;
****}
****span.titleButton#max {
*background: transparent url(images/max.gif) top left no-repeat;
****}
****span.titleButton#close {
*background: transparent url(images/close.gif) top left no-repeat;
****}
****div.contents {
*height: 240px;
*padding: 2px;
*overflow: auto;
*background: #E0E4E8;
****}
****div.item {
*height: 80px;
*width: 56px;
*float: left;
*position: relative;
*padding: 0px;
*margin: 8px;
*/margin: 4px;
*background: red !important;
****}
****div.item div.itemName {
*margin-top: 48px;
*font: 10px verdana, arial, helvetica;
*text-align: center;
****}
****div.folder {
*background: transparent url(images/folder.gif) top left no-repeat;
****}
****div.file {
*background: transparent url(images/file.gif) top left no-repeat;
****}
****div.special {
*background: transparent url(images/folder_important.gif) top left no-repeat;
****}
</style>
</head>
<body>
<div class="window">
****<div class="titlebar">
*
*
*
****</div>
****<div class="contents">
*<div class="item folder">
*****
*</div>
*<div class="item folder">
*****
*</div>
*<div class="item folder">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item special">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
*<div class="item file">
*****
*</div>
****</div>
</div>
</body>
</html>