CSS, IE и кривые руки.

vate · November 9, 2010

Всем привет!

Прошу помощи, а то в HTML да ещё с CSS я слабо понимаю, да вот приспичило сделать формочку авторизации, для скрипта одного.

Наваял я, значит, своё "изделие", сижу, в гугл хроме любуюсь. Лепота.

Ну, то есть не лепота, а то, что я хотел.

А потом открыл я поделку свою в интернет эксплорере и остолбенел:

Картинка вбок, стили будтоб и не применялись... (хотя применяются. Цвет шрифтов - за милую душу подцепляется.) Кошмар, вобщем.

Умом я понимаю, что накосорезил где-то. Но разумения мне не хватает понять где.

Так что помогите люди добрые басурманского осла одолеть!

Код исходный ниже прилагаю:

<HTML>
<HEAD>
    <TITLE></TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <LINK href="./style.css" rel="stylesheet" type="text/css">
</HEAD>

<BODY class="_body" align=center>
    <BR>
    <BR>
    <IMG src="http://$www_root/img/logo_vert.gif">
    <BR>
    <BR>
    <H1 align=center>Заголовок</H1>
    <BR>
    <BR>
    <P align=center>
    <TABLE width=350px align=center class="_st" cellpadding=0 cellspacing=0>
    <FORM name="login" method="post" action="http://$cgi_root/scripts/login.pl">
        <TR class="_th"><TD colspan=2>Введите имя пользователя и пароль:</TD><TR>
        <TR class="_st" height=25>
            <TD align=right>
                 Имя пользователя:
            </TD>
            <TD>
                <INPUT class="_short_input" type="text" id="username" name="username" Value="" Size=20><BR>
            </TD>
        </TR>
        <TR class="_st" height=25>
            <TD align=right>
                Пароль:
            </TD>
            <TD>
                <INPUT class="_short_input" type="password" name="pass" Value="" Size=20>
            </TD>
        </TR>
        <TR class="_st" height=25>
            <TD colspan=2 align=center>
                <INPUT class="_small_button" type="submit" VALUE="Войти">
            </TD>
        </TR>
    </TABLE>
    </P>
</BODY>

</HTML>

И стиль

*       {
        margin: 0;
        padding: 0;
}

HTML {
        height:100%;
        width:100%;
}

BODY {
        min-height:100%;
        position:relative;
        min-width:800px;
        width: 100%;
        FONT-FAMILY: Verdana, Arial;
}

._body {
        FONT-SIZE: 11px;
        FONT-FAMILY: Verdana, Arial;
        BACKGROUND-COLOR: #FFFFFF;
        TEXT-ALIGN: center
}

* html body { height:100%; }

a {
        color: blue;
        outline: none;
        text-decoration: underline;
}

a:hover {
        text-decoration: none;
}

p {
        margin: 0 0 18px
}

img {
        border: none;
}

input {
        vertical-align: middle;
}
._st {
        BORDER-RIGHT: #000000 1px solid;
        BORDER-TOP: #000000 1px solid;
        BORDER-LEFT: #000000 1px solid;
        BORDER-BOTTOM: #000000 1px solid;
        FONT-FAMILY: Verdana, Arial;
        FONT-SIZE: 13px;
        BACKROUND: RED;
}

._th {
        BORDER-RIGHT: #000000 1px solid;
        BORDER-TOP: #000000 1px solid;
        BORDER-LEFT: #000000 1px solid;
        BORDER-BOTTOM: #000000 1px solid;
        FONT-FAMILY: Verdana, Arial;
        FONT-SIZE: 13px;
        BACKGROUND-COLOR: #65bd20;
        COLOR: #FFFFFF;
        TEXT-ALIGN: CENTER;
        FONT-WEIGHT: bold;
}
._short_input {
        BORDER-RIGHT: #000000 1px solid;
        BORDER-TOP: #000000 1px solid;
        BORDER-LEFT: #000000 1px solid;
        BORDER-BOTTOM: #000000 1px solid;
        COLOR: #000000;
        FONT-SIZE: 9pt;
        BACKGROUND: #ffffff;
        FONT-FAMILY: Verdana, Arial;
        HEIGHT: 20px
}

H1 {
    FONT-FAMILY: Verdana, Arial;
    COLOR: BLACK;
}
._small_button {
    BACKGROUND-COLOR: #FFFFFF;
    BORDER: #000000 1px solid;
}

Vlad · November 9, 2010

В данной ситуации я принимаю сторону IE и считаю что он прав. Вначале надо исправить кучу ошибок, затем уже сетовать на браузер.

350px - так писать нельзя, единицы не указываются надо "350".

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

ShumNo · November 9, 2010

Чтобы "инпуты" были во всех браузерах одинаковые я бы им размеры задал в пикселях

SelenIT · November 9, 2010

Еще: нет доктайпа, а без него любой IE превращается в тыкву IE5.5. Таблицу нельзя вкладывать в <p>, браузеры могут интерпретировать это по-разному. <br>-ки не предназначены для создания отступов, для этого есть margin/padding. Ну и мелочь, но полезная на будущее — надо приучаться писать CSS в едином стиле (регистр и пр.), лучше в нижнем регистре и с использованием сокращенных записей — самому будет проще ориентироваться...

vate · November 9, 2010

Спасибо! Учёл все ваши советы, и получилось!

Sign In

CSS, IE и кривые руки.

Question

vate

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

ShumNo

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

vate

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information