Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > элементы формы в div блоке.

Автор: EDuard 23.3.2006, 20:06

Такая проблема.

Есть два див блока, в каждый вставляю рисунком кнопку (высота одинаковая), выравниваю кнопки по центру - высота блоков одинаковая, то что нужно.

Если в один из блоков вставляю две кнопки на одной линии то высота этого блока в IE увеличивается на 2px - кошмар! smile

Как можно решить проблему.

Автор: DemoCode 23.3.2006, 20:07

Цитата(EDuard @ 23.3.2006, 21:06

)

Как можно решить проблему.

А не пробовал явно задать высоту для блоков?

Автор: EDuard 23.3.2006, 20:18

DemoCode, пробовал. выравнять помогает, но некрасиво получается.
Такое чувство что у кнопки правило

Код


margin-bottom: 2px;

А у дива задан

Код


padding: 2px 10px;

И получается 2+2=4px от нижнего края дива, а от верхнего только 2px.

Автор: Ciber SLasH 23.3.2006, 20:35

Покажи код.

Автор: EDuard 23.3.2006, 21:08

Код


...
<tr> 
<!-- LEFT COLUMN FOOTER-->
  <td>
    <div id="BborderL">
      <div class="border">
        <div class="BbuttonA">
           <input type="image" alt="" src="image/1.gif" name="1">
           <input type="image" alt="" src="image/2.gif" name="1">
        </div>
      </div>
    </div>
  </td>
<!-- END OF LEFT COLUMN FOOTER-->
<!-- RIGHT COLUMN FOOTER-->
  <td>
   <div id="BborderR">
     <div class="border">
        <div class="BbuttonA">
        <input name="Input" type="image" alt="" src="image/3.gif" title=""></div>
        </div>
      </div>
   </td>
<!-- END OF RIGHT COLUMN FOOTER-->
</tr>
...

Код


#BborderL {
    BORDER-RIGHT: #ffffff 1px solid;
    BORDER-BOTTOM: #ffffff 1px solid;
    BORDER-LEFT: #ffffff 1px solid;
    PADDING: 0px;
    MARGIN: 0px 1px 0px 0px;
    }

#BborderR {
    BORDER-RIGHT: #ffffff 1px solid;
    BORDER-BOTTOM: #ffffff 1px solid;
    BORDER-LEFT: #ffffff 1px solid;
    PADDING: 0;
    MARGIN: 0px 0px 0px 1px;
}
.border {
    BORDER: #999999 1px solid;
    BACKGROUND-COLOR: #ff9a66;
}
.BbuttonA {
    BORDER: #ffffff 1px solid;
    PADDING: 2px 15px;
    TEXT-ALIGN: center;
}
.BbuttonA input{
    margin: 0;
    padding: 0;
}

Автор: Ciber SLasH 23.3.2006, 21:42

Что-то я не понял, а зачем вообще здесь DIV-ы если тут всё можно и без них сделать?

Автор: Bangladesh 23.3.2006, 21:44

значится так:

Код


<!-- LEFT COLUMN FOOTER-->
  <td>
    <div id="BborderL">
      <div class="border">
        <div class="BbuttonA">
           <input type="image" alt="" src="image/1.gif" name="1"><input type="image" alt="" src="image/2.gif" name="1"></div>
      </div>
    </div>
  </td>
<!-- END OF LEFT COLUMN FOOTER-->

теги картинок поставить впритык и завершающий тег дива впритык к тегу картинки второй. расстояние между картинками придётся прописать с помощью паддингов и див-ов (опять же впритык все теги). или   поставь.... это извечный гал IE.

Автор: EDuard 23.3.2006, 21:49

2Ciber SLasH, дивами мне нужно нарисовать рамки и обеспечить 2-х пиксельный пробел между колонками.

2I, GyoZ, Спасибо! Помогло.

Автор: Ciber SLasH 23.3.2006, 22:17

Цитата(EDuard @ 23.3.2006, 21:49

)

2Ciber SLasH, дивами мне нужно нарисовать рамки и обеспечить 2-х пиксельный пробел между колонками.

Можно было бы уменьшить кол-во дивов:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<meta name="Generator" content='EditPlus 2.21.330'>
<style type='text/css'>
.test {
    text-align: center;
}
.test td {
    border: 1px solid #999;
}
.test div {
    margin: 1px;
    padding: 2px 0;
    background: #FF9A66;
}
</style>
</head>

<body>
<table width="100%" style='border-collapse: collapse'>
<tr class='test'>
    <td>
    <div>
        <input type="image" alt="" src="image/1.gif" name="1">
        <input type="image" alt="" src="image/2.gif" name="1">
    </div>
    </td>
    <td>
    <div>
        <input name="Input" type="image" alt="" src="image/3.gif" title="">
    </div>
    </td>
</tr>
</table>
</body>
</html>

Автор: EDuard 24.3.2006, 13:59

Ciber SLasH, Рамки так нарисовать можно, но я же писал:

Цитата(EDuard @ 23.3.2006, 21:49

)

обеспечить 2-х пиксельный пробел между колонками

посмотри мой пример в браузере, и все будет понятно.