CSS. Проблема в IE с блочной версткой

Тема в разделе "Веб-дизайн", создана пользователем dreamerrr, 18 мар 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. dreamerrr

    dreamerrr Постоялец

    Регистр.:
    2 янв 2009
    Сообщения:
    94
    Симпатии:
    50
    Здравствуйте. Столкнулся с такой проблемой.
    Верстка DIV`ами. Есть 4 квадратных блока (пусть по 100px),расположенных в ряд (position:relative) помещенные в другой див (400px). Во всех браузерах, окромя IE отображается нормально, "ровненько". В IE (и в 6-ом и в 8-ом) эти вложенные дивы уходят ступеньками вниз. Как исправить?
     

    Вложения:

    • fuck.gif
      fuck.gif
      Размер файла:
      16,6 КБ
      Просмотров:
      16
  2. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Данных недостаточно (приведите хтмл и цсс).
    На данном этапе могу посоветовать использовать
    display:inline;
    для позиционирования блоков по горизонтали.
     
  3. dreamerrr

    dreamerrr Постоялец

    Регистр.:
    2 янв 2009
    Сообщения:
    94
    Симпатии:
    50
    HTML:

    Код:
    <body>
    
    <div id="main">
    
    <div id="boss">
    
    </div>
    
    <div id="sub">
    
    </div>
    
    <div id="unit">
    
    <div id="box1">
    
    </div>
    
    <div id="box2">
    
    </div>
    
    <div id="box3">
    
    </div>
    
    <div id="box4">
    
    </div>
    
    </div>
    
    
    </div>
    </body>
    
    CSS:

    Код:
    
    @charset "utf-8";
    /* CSS Document */
    * {	margin:0; padding:0;}
    
    body {background-color:#CCC;
    	text-align:center;}
    
    #main {
    	background-color:#FFF;
    	width:416px;
    	height:400px;
    	border:1px;
    	margin:0 auto;
    	padding:10;
    	}
    #main img {
    	border:none;
    	text-decoration:none;}
    	
    #boss {
    	
    	width:143px;
    	height:44px;
    	margin:auto;
    	}
    	
    #sub {
    	
    	width:143px;
    	height:44px;
    	margin:auto;
    	margin-top:30px;}
    
    #unit {
    	text-align:left;
    	margin:auto;
    	width:410px;
    	height:57px;
    	margin-left:0;
    	margin-top:30px;
    	}
    
    #box1 {
    	width:103px;
    	height:57px;
    	margin-top:0;
    	margin-left:0;}
    	
    #box2 {
    	width:103px;
    	height:57px;
    	position:relative;
    	margin-top:-57px;
    	margin-left:105px;
    	}
    	
    #box3 {
    	width:103px;
    	height:57px;
    	position:relative;
    	margin-top:-57px;
    	margin-left:208px;}
    	
    #box4 {
    	width:103px;
    	height:57px;
    	position:relative;
    	margin-top:-57px;
    	margin-left:312px;
    	}
    
    
    
     
  4. t3s

    t3s

    Регистр.:
    16 фев 2008
    Сообщения:
    719
    Симпатии:
    290
    можете сделать данные блоки элементами списка, примерно так
    HTML:
    <ul>
    <li><div id="нужный ид">...</div></li>
    ...
    <li><div id="нужный ид">...</div></li>
    </ul>
    элементам списка пропишите display: inline;
    плюс такого решения в том, что оно будет работать хоть для трех, хоть для тридцати элементов...
     
  5. lifediz

    lifediz Yii Framework developer

    Регистр.:
    7 июн 2008
    Сообщения:
    385
    Симпатии:
    507
    Можно попробовать добавить
    HTML:
    #main div { float:left;}
     
  6. ercalote

    ercalote Постоялец

    Регистр.:
    27 мар 2008
    Сообщения:
    86
    Симпатии:
    21
    Измените стили на следующие:
    Код:
    #box1 {
            display:inline-block;
    	width:103px;
    	height:57px;
    }
    #box2 {
            display:inline-block;
    	width:103px;
    	height:57px;
    }
    #box3 {
            display:inline-block;
    	width:103px;
    	height:57px;
    }
    #box4 {
            display:inline-block;
    	width:103px;
    	height:57px;
    }
    
    Остается непонятным, зачем вам высчитывать марджины для каждого блока, когда есть инструменты для ваших целей.

    Старые ИЕ не знают inline-block, для них используйте
    Код:
    display: inline;
    zoom: 1;
    
     
  7. dreamerrr

    dreamerrr Постоялец

    Регистр.:
    2 янв 2009
    Сообщения:
    94
    Симпатии:
    50
    Воспользовался display:inline-block
    В IE (8) дивы вовсе оказались друг под другом.

    __
    Приведенные еще выше рецепты не помогли, к сожалению
     
  8. МихалычЪ

    МихалычЪ Создатель

    Регистр.:
    1 сен 2009
    Сообщения:
    38
    Симпатии:
    7
    А doctype стоит? и Какой?
     
  9. CoooLLer

    CoooLLer Писатель

    Регистр.:
    8 июн 2009
    Сообщения:
    8
    Симпатии:
    2
    Во-первых обязательно проставьте корректный DOCTYPE. Во вторых для позиционирования в ряд лучше использовать float: left;, т.к. inline-block поддерживают не все, а делая блоки просто inline'овыми мы теряем возможность задавать высоту и ширину. Следовательно CSS код можно значительно сократить до:
    Код:
    @charset "utf-8";
    * {	margin:0; padding:0;}
    body {background-color:#CCC;
    	text-align:center;}
    #main {
    	background-color:#FFF;
    	width:416px;
    	height:400px;
    	border:1px;
    	margin:0 auto;
    	padding:10;
    	}
    #main img {
    	border:none;
    	text-decoration:none;}
    #boss {
    	width:143px;
    	height:44px;
    	margin:auto;
    	}
    #sub {
    	width:143px;
    	height:44px;
    	margin:auto;
    	margin-top:30px;}
    #unit {
    	text-align:left;
    	margin:auto;
    	width:412px;
    	height:57px;
    	margin-left:0;
    	margin-top:30px;
        overflow: hidden;
    	}
    #box1,#box2,#box3,#box4 {
          width:103px;
          height:57px;
          float:left;
        }
    
     
  10. boris9598

    boris9598 Постоялец

    Регистр.:
    16 окт 2009
    Сообщения:
    84
    Симпатии:
    6
    то что opere-хорошо, то ie -смерть

    Вот мож пригодиться http://dimox.name/personal_css_hacks_for_opera_firefox_ie/
    Попробуй - Персональные CSS-хаки.У меня эта страничка долгое время была в закладках
     
Статус темы:
Закрыта.