VPF::Проблема с отступами в IE - Форум программистов

oXyd

Дата 31.7.2008, 19:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 11.7.2008

Репутация: нет
Всего: нет

Есть проблемка с отступами в IE
Имеется форма, вот как она выглядит в нормальных браузерах(фф, опера), для наглядности сделал рамочку вокруг формы
user posted image

А вот как она выглядит в ие7.0
user posted image

Слева появился отсутуп. С чем может быть связано? Глобальный сброс сделал.

Код

Код


#auth {
    background:white;
    margin:3px 3px 5px 3px;
    border:1px solid white;
}

#auth a:link {color:#7d7d7d;}
#auth a:hover {color:#7d7d7d;}
#auth a:visited {color:#7d7d7d;}

#auth input { 
    margin:4px 14px 4px 0;
}

#auth form{
    margin: 4px 0 4px 11px;
    float:left;    
    border:1px solid black;
    font-size:130%;
}

Код


<div id="auth">                                            
                         <form action="index.html" method="post">                    
                           <input class=text-auth name="login" value="логин" type="text" onClick="this.value=''" onBlur="this.value='ЛОГИН'"/>
                           <input class=text-auth name="pass" value="пароль" type="text" onClick="this.value=''" onBlur="this.value='ПАРОЛЬ'"/>
                           <input class="button" name="csend" value="Войти" type="submit" />                           
                         </form> 
                         <a class="text-reg" href="#">регистрация</a><a class="text-reg">|</a><a class="text-reg" href="#">забыли пароль?</a>

                         <div id="links">
                              <span id="home"><a href="#"></a></span><span id="nb"></span><span id="letter"><a id="letter" href="#"></a></span><span id="nb"></span><span id="x"><a href="#"></a></span>
                         </div>    
                         
                         <div class="clear"></div>
              </div>

Сброс

Код


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

bars80080

Дата 31.7.2008, 19:59 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

сделай хак специально для ИЕ7

webster

Дата 31.7.2008, 20:02 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Попробуйте поставить символ неразрывного пробела перед первым инпутом -   - проблема должна устраниться.

oXyd

Дата 31.7.2008, 22:08 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 11.7.2008

Репутация: нет
Всего: нет

Спасибо за советы.

bars80080, между этими строками нужно заключать css-код? Слышал раньше про такой прием, но сам пока не пользовался.

webster, помогло, отступ пропал, но теперь появился сам пробел, который шириной даже шире чем необходимый мне отступ от края блока smile

В связи с этим возникло несколько вопросов. Есть ли где-нибудь в сети информация о том какие размеры по умолчанию принимают различные элементы страницы? (можно, конечно, воспользоваться расширением веб-девелопер для фф, и измерять вручную, но гораздо удобнее было бы иметь в закладках ссылку на страничку с подобной справочной информацией)
Попробовал вместо неразрывного пробела поставить разделитель нулевой ширины(&zwnj;), однако, небольшой отступ остается и в этом случае. Может есть какой-нибудь элемент который не занимал бы совсем места?
И с чем вообще связан данный баг? В очередной раз майкрософт плюют на стандарты? Может есть статьи посвященные данной проблеме, скиньте ссылочки если есть, интересно почитать дабы избегать подобных проблем в будущем.

webster

Дата 31.7.2008, 22:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Вот здесь даны более эффективные рекомендации по устранению подобного бага, нужно просто взять элемент <input /> в окаймляющие теги <span> или <label>
И по-моему без расширения Web-developer и FireBug для FF сейчас уже никак не можно. smile

bars80080

Дата 31.7.2008, 22:40 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

а я тоже не пользовался. вот заодно и проверишь
вроде как да цсс, но вытащил я это из примера, где он в хтмл тэги с <style> охранял

вообще универсальный для ИЕ такой хак:

Код


* html #element {}

NDenis

Дата 1.8.2008, 15:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

Точнее HTML smile

Либо отдельный файл со стилями для ослика подключать:

Код


<!--[if IE]>
<link src="...">
<![endif]-->

Либо блок со стилями:

Код


<!--[if IE]>
<style type="text/css">
...
</style>
<![endif]-->

oXyd

Дата 3.8.2008, 16:17 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 11.7.2008

Репутация: нет
Всего: нет

webster, спасибо, проблема решена, и отдельное спасибо за firebug, ранее не знал про это расширение smile

Еще одна проблемка
Вот две ссылочки
нормальная
user posted image

кривоватая(в ие неправильно отображается)
user posted image

Для обоих задан такой стиль

Код


color:white;
background:red;
padding:3px 5px;

Однако у второй нет нижнего поля. В чем может быть проблема?
В опере и мозиле нижнее поле присутствует.

webster

Дата 3.8.2008, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 361
Регистрация: 1.1.2007

Репутация: 34
Всего: 34

Изначально <a> - строковый симпол, у него не может быть вертикальных полей или отступов. можно попробовать использовать line-height для увеличения отступов

IBS

Дата 3.8.2008, 16:26 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 214
Регистрация: 29.7.2008
Где: Белоруссия

Репутация: 2
Всего: 6

Сделай как писал NDenis, для ие добавь margin-bottom

NDenis

Дата 3.8.2008, 18:42 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 317
Регистрация: 14.12.2007

Репутация: 8
Всего: 8

webster правильно сказал, сделайте <a> блочным элементом и отступ появится

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »