Форум АНТИЧАТ - Opera и классы в CSS

Форум АНТИЧАТ (https://forum.antichat.xyz/index.php)

- PHP, PERL, MySQL, JavaScript (https://forum.antichat.xyz/forumdisplay.php?f=37)

- - Opera и классы в CSS (https://forum.antichat.xyz/showthread.php?t=63289)

Opera и классы в CSS

короче верстаю я се в FF (бо там есть фаербаг)

там несколько 3 или 4 формы.. ну шоб не пихать их в отдельные блоки решил их классами обозвать

ну нач форм.класклас такойто и тут пишу со спокойной совестю любую ахинею лиш бы на место встало

Итак имеем несколько форм которые стоят на местах по классам. ФФ показует нормально. ИЕ тоже нормально (это чудо.. с первого раза нормально!!)

включаем оперу.. и ужос :eek: только первая форма стоит наместе остальные наче ядрёной бомбой разбросало по всей странице..

это просто капец Опера была моим идеалом :( и что теперь. что это такое? почему даже ИЕ не вые**я :confused:

я плачу :( опера...

Цитата:

Сообщение от smOleg

Код-то покажи. Чего сразу браузер обвинять. (И какая версия браузера?)

Вот опера9,24%) помоему многовато шоб показыватьь

Код HTML:





<head>

  <title>My Account - General tab</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ANSI">

<link rel="stylesheet" type="text/css" href="style.css">





  </head>

<body>

<div id="container">



<div id="account"><h1> My Account</h1>



<div id="Info"><h1>Personal Information</h1>





  <form method="post" action="#" class="Name">

 <fieldset>

  <label for="inp1">First Name <br /></label>

  <input id="inp1" name="name1" value="" /><br />

 <label for="inp2">Last Name <br /></label>

  <input id="inp2" name="name2" value="" /><br />

 <label for="inp3">Job Title <br /></label>

  <input id="inp3" name="name3" value="" /><br />

  <label id="mail">Email: <br /></label>

  <label class="mailURL"><a href='#'>michael@companyABC.com</a>

  </fieldset>

</form>

<a href='# '><img class="Change1" src="images/Request-Change.gif" width="91" height="16" ></a>



<form method="post" action="#" class="Phone">

 <fieldset>

   <label for="inp1">Work Phone:<br /></label>

   <input id="inp1" class="inp1" name="Phone1" value="" /><br />

   <label for="inp2">Mobile Phone:<br /></label>

    <input id="inp2" name="Phone2" value="" /><br />

       <label for="inp3" class="ext">ext<br /></label>

    <input id="inp3" class="ext" name="PhExp" value="" /><br />

         </fieldset>

</form>

           <form method="post" action="#" class="Adress">

 <fieldset>

     <label for="inp1">Adress<br /></label>

        <input id="inp1"  name="Adress1" value="" /><br />

        <label for="inp2">&nbsp;<br /></label>

        <input id="inp2" class="inp2" name="Adress2" value="" /><br />





           </fieldset>

</form>









</div>

</div>

    </div>

</body>

Код HTML:



html{

   height: 100%;

   width:100%;

}

body{

   height: 100%;

   width:100%;

   margin:0;

   padding:0  ;



}

div#container{

 padding: 37 5 5 5;

width:980px;

margin: 0 auto;

height:415;

background-color: #f1f5fc;



}

div#container img{

display:block;

border: none;



margin: 0 auto;

}

div#account {

padding: 42 6 3 2;





margin: 0 auto;

   height:350;

   width:955;

   background:url(images/header1.gif) no-repeat   ;

}

div#account h1{

color:white;

display:block;

 position: absolute;

padding:0;

margin:0;

font:15pt Verdana;

top: 58px;

  left: 65px;

}

div#Info{



height:310;

margin: 20 auto;

   width:941 ;

    background: url(images/info.png) no-repeat ;

}

div#Info h1{

 height:19;

width:894;

top: 166px;

  left: 50px;

display:block;

 position: absolute;

color:#002656;

font: bold 10pt Verdana;

  background-color:#f0f0f0;

   padding:4 0 2 25;

margin:0;

}



 div#Info Form.Name{

    position: absolute;

  padding:0px;

 margin: 98px 0 0 33px  ;



 /* font-size:1em;  размер шрифта формы */

}

/**html .div#Info Forma{ margin: 12px 0 0 23px  ;  text-align:right;}*/



div#Info Form.Name fieldset {

 width:300px;  /*рамка вокруг формы */

 height:80px;

border:0;

 padding:0;





}

div#Info Form.Name legend {

  color:#333; /* IE использует цвет шрифта не такой,

  как у остальных элементов, исправляем */

  background:inherit;

  margin:0;

}

div#Info Form.Name label {

 font:8pt Verdana ;

float:left; /* подписи к полям сдвигаются влево */

  width:90px; /* ширина колонки подписей */

     padding:5 0 0 0 ;

  margin: 0; /* отступ до поля ввода */



}

div#Info Form.Name input   {

 margin:5 0;

  width:180px; /* ширина полей формы */

  height: 20;

  padding: 0;

  /* делаем одинаковый шрифт для input, select, textarea */

  /*font-family: Verdana, sans-serif;

  font-size:100%;  */

}

div#Info Form.Name label.mailURL {

      }



    div#Info Form.Phone{

            position: absolute;

  padding:0px;

 margin: 233px 0 0 33px  ;

}

    div#Info Form.Phone fieldset {

 width:300px;  /*рамка вокруг формы */

 height:80px;

border:0;

 padding:0;





}

div#Info Form.Phone legend {

  color:#333; /* IE использует цвет шрифта не такой,

  как у остальных элементов, исправляем */

  background:inherit;

  margin:0;

}

div#Info Form.Phone label {

 font:8pt Verdana ;

float:left; /* подписи к полям сдвигаются влево */

  width:90px; /* ширина колонки подписей */

     padding:5 0 0 0 ;

  margin: 0; /* отступ до поля ввода */



}

div#Info Form.Phone input   {

 margin:5 0;

  width:180px; /* ширина полей формы */

  height: 20;

  padding: 0;

  /* делаем одинаковый шрифт для input, select, textarea */

  /*font-family: Verdana, sans-serif;

  font-size:100%;  */}

  div#Info Form.Phone input.inp1   {

        width:100px;

  }

    div#Info Form.Phone input.ext {

    display:block;

    position: absolute;

    width:35px;

    top:0px;

    left:237

    }

      div#Info Form.Phone label.ext{

      display:block;

    position: absolute;

    width:30px;

    top:1px;

    left:210

      }

  div#Info img.Change1{

          display:block;

    position: absolute;

      left:165;

      top:310;

  }



   div#Info Form.Adress{

                 position: absolute;

  padding:0px;

 margin: 98px 0 0 365px  ;

   }

    div#Info Form.Adress fieldset {

 width:300px;  /*рамка вокруг формы */

 height:80px;

border:0;

 padding:0;

 }

    div#Info Form.Adress legend {

  color:#333; /* IE использует цвет шрифта не такой,

  как у остальных элементов, исправляем */

  background:inherit;

  margin:0;

}

div#Info Form.Adress label {

 font:8pt Verdana ;

float:left; /* подписи к полям сдвигаются влево */

  width:90px; /* ширина колонки подписей */

     padding:5 0 0 0 ;

  margin: 0 30 0 0; /* отступ до поля ввода */



}

div#Info Form.Adress input   {

 margin:5 0 0 0 ;

  width:180px; /* ширина полей формы */

  height: 20;

  padding: 0;

  /* делаем одинаковый шрифт для input, select, textarea */

  /*font-family: Verdana, sans-serif;

  font-size:100%;  */}



   div#Info Form.Adress input.inp2   {

   margin: 2 0 0 0;}

уу) я боюсь этот код лучше стереть и написать с нуля то же самое раза в 3 короче. честно, слишеом много лишнего

Если добавить доктайп и тег <html>, сломается вёрстка во всех браузерах.
Фиксированные размеры, ещё и без единиц измерения:

Код:

height:350;

width:955;

Много чего ещё...

Наверное, всё дело в этом:

Цитата:

Сообщение от smOleg

пишу со спокойной совестю любую ахинею лиш бы на место встало

Цитата:

Сообщение от astrologer

Если добавить доктайп и тег <html>, сломается вёрстка во всех браузерах.

добавил хтмл и..

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

 Transitional//EN">

все на местах :) .

а без указания едениц измерения всегда любой бровзер ставит пиксели. Ато што лишнего много.. так некогда и за это всеравно денех неполучу. Блин а на оперу есть фаербаг? Очень удобная штука.

Ладно как разберусь напишу чо было :)
а щас читаю "История, которой не было, или "Хакнутые ВЫБОРЫ'99" :)

Цитата:

Сообщение от smOleg

добавил хтмл и..

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

 Transitional//EN">

все на местах :) .

1) Доктайп должен быть с самого начала, а уж потом - тэг <html>.
2) Очень важно, как именно выглядит строка объявления доктайпа. Из неё нельзя просто так выкинуть половину, иначе браузеры так и оставят "Quirks Mode".

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

и вправду :( ачо оно так? :confused:

Цитата:

а без указания едениц измерения всегда любой бровзер ставит пиксели.

Чистой воды бред.

Читай тут:
http://www.artlebedev.ru/tools/technogrette/html/doctype/
и тут:
http://www.artlebedev.ru/tools/technogrette/html/doctype2/

А вот мой знакомый грит шо CSS можна иногда вставить чисто для понта и таблицы рулят. Типа чистым css сложный диз не сделать.

а я таблицами даж не знаю как верстать ибо начала учить сразу с css. Как думаете стоит использовать таблицы?