Верстка "бумажного конверта": позиционирование поля "индекс"

[yeg]

Добрый день!

Мне необходимо реализовать форму, которая бы внешне выглядела как бумажный конверт. Верстка блочная, "резиновая".

Все получилось, кроме одной вещи. Имеем два поля ввода: "Откуда" и "Индекс места отправления". Во всех браузерах выглядеть должно так:

Поле "Индекс" должно заканчиваться там же, где и поле "Откуда", пиксель в пиксель. Иначе получится не как на настоящем конверте.

Сейчас мой код хорошо отображается в FireFox, но в других браузерах индекс съезжает то влево, то вправо.

Код CSS:

input {
 position:absolute;
 margin:0;
 border-top:0;
 border-left:0;
 border-right:0;
 border-bottom:1px solid #70aae8;
 padding-left:0.4em;
 font-size:9pt; 
}

label span {
 font-family:serif;
 font-style:italic;
 color:#70aae8; 
}

label.index {
 display:inline;
 position:relative;
 border-left:1px solid #70aae8;
 border-right:1px solid #70aae8;
 border-bottom:1px solid #70aae8;
 padding:0.2em;
 width:13em;
 margin-left:13.7em;
 margin-top:0;
 clear:none;
}

label.index input {
 border:0;
 position:relative;
}

Код HTML:

<label for="from_address"><span>Откуда</span>
<input maxlength="100" size="56" id="from_address">
</label>

<label for="from_index" class="index"><span>Индекс места отправления</span>
<input maxlength="6" size="6" id="from_index">
</label>

В этом решении, input "Откуда" имеет границу снизу, а label "Индекс" имеет три границы, кроме верхней, и сдвинут влево от края на определенное фиксированное расстояние.

Проблема заключается в том, что длина input задается атрибутом size, а сдвиг поля "Индекс" задается в em (или в любых других относительных единицах). У всех браузеров size получается разный по отношению к этом сдвигу.

Как сделать, чтобы во всех браузерах отображалось как надо?

[ZoNT]

Еслои ты отда?шь браузеру саммому решать какова будет ширина элемента и сдвиг - то никак. Хочеш ь одинаково отображать - задавай фиксированную ширину.

[yeg]

1. Если задать фиксированную ширину, это проблемы, к сожалению, не решит. Потому что во всех браузерах единица атрибута size поля input имеет разную фиксированную ширину.

2. А если перед полем "Индекс" в ту же строчку поставить еще один input такой же длины, как и поле сверху? Сделать его disabled, все границы и фон сделать белыми, чтобы его не было видно. Тогда низ и верх во всех браузерах будут меняться синхронно.

Я пытался так сделать, только не смог грамотно сверстать. Поля то наезжали друг на друга, то вообще уезжали в другой угол конец страницы. Я подозреваю, что опытный верстальщик справился бы с такой задачей довольно быстро. Может кто подскажет в примерах?

[rash]

а вы размер указывайте не с помощью атрибута size, а в стилях в тех же em, это можно сделать в дополнение к уже указанному атрибуту size. То есть что-то вроде ?style="width: 15em;"??

[yeg]

Огромное спасибо! Действительно, это сработало! Странно, почему я был уверен, что так делать нельзя... Должно быть, я пришел к ложным выводам, наблюдая за поведением элементов в самом начале верстки.

Еще раз спасибо!