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

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

Форум программистов > Вёрстка веб-сайтов > Проблема с отступами в IE

Автор: oXyd 31.7.2008, 19:02

Есть проблемка с отступами в 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

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

Автор: webster 31.7.2008, 20:02

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

Автор: oXyd 31.7.2008, 22:08

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

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

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

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

Автор: webster 31.7.2008, 22:31

Вот http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout даны более эффективные рекомендации по устранению подобного бага, нужно просто взять элемент <input /> в окаймляющие теги <span> или <label>
И по-моему без расширения Web-developer и FireBug для FF сейчас уже никак не можно. smile

Автор: bars80080 31.7.2008, 22:40

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

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

Код


* html #element {}

Автор: NDenis 1.8.2008, 15:40

Точнее HTML smile

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

Код


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

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

Код


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

Автор: oXyd 3.8.2008, 16:17

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

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

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

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

Код


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

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

Автор: webster 3.8.2008, 16:26

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

Автор: IBS 3.8.2008, 16:26

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

Автор: NDenis 3.8.2008, 18:42

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