Opera и классы в CSS

Discussion in 'PHP' started by smOleg, 2 Mar 2008.

  1. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    короче верстаю я се в FF (бо там есть фаербаг)

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

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

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

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

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

    я плачу :( опера...
     
    #1 smOleg, 2 Mar 2008
    1 person likes this.
  2. astrologer

    astrologer Elder - Старейшина

    Joined:
    30 Aug 2007
    Messages:
    837
    Likes Received:
    267
    Reputations:
    59
    Код-то покажи. Чего сразу браузер обвинять. (И какая версия браузера?)
     
    #2 astrologer, 2 Mar 2008
  3. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    Вот опера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='#'>[email protected]</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 smOleg, 2 Mar 2008
  4. imajo.ati

    imajo.ati Banned

    Joined:
    21 Feb 2008
    Messages:
    232
    Likes Received:
    62
    Reputations:
    8
    уу) я боюсь этот код лучше стереть и написать с нуля то же самое раза в 3 короче. честно, слишеом много лишнего
     
    #4 imajo.ati, 2 Mar 2008
  5. astrologer

    astrologer Elder - Старейшина

    Joined:
    30 Aug 2007
    Messages:
    837
    Likes Received:
    267
    Reputations:
    59
    Если добавить доктайп и тег <html>, сломается вёрстка во всех браузерах.
    Фиксированные размеры, ещё и без единиц измерения:
    Code:
    height:350;
width:955;
    Много чего ещё...

    Наверное, всё дело в этом:
     
    #5 astrologer, 3 Mar 2008
  6. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    добавил хтмл и..
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
 Transitional//EN">
    все на местах :) .


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

    Ладно как разберусь напишу чо было :)
    а щас читаю "История, которой не было, или "Хакнутые ВЫБОРЫ'99" :)
     
    #6 smOleg, 3 Mar 2008
    Last edited: 3 Mar 2008
  7. astrologer

    astrologer Elder - Старейшина

    Joined:
    30 Aug 2007
    Messages:
    837
    Likes Received:
    267
    Reputations:
    59
    1) Доктайп должен быть с самого начала, а уж потом - тэг <html>.
    2) Очень важно, как именно выглядит строка объявления доктайпа. Из неё нельзя просто так выкинуть половину, иначе браузеры так и оставят "Quirks Mode".
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     
    #7 astrologer, 3 Mar 2008
  8. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    и вправду :( ачо оно так? :confused:
     
    #8 smOleg, 3 Mar 2008
  9. Helios

    Helios Elder - Старейшина

    Joined:
    14 Jan 2007
    Messages:
    414
    Likes Received:
    180
    Reputations:
    103
    Чистой воды бред.

    Читай тут:
    http://www.artlebedev.ru/tools/technogrette/html/doctype/
    и тут:
    http://www.artlebedev.ru/tools/technogrette/html/doctype2/
     
    #9 Helios, 3 Mar 2008
  10. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    А вот мой знакомый грит шо CSS можна иногда вставить чисто для понта и таблицы рулят. Типа чистым css сложный диз не сделать.

    а я таблицами даж не знаю как верстать ибо начала учить сразу с css. Как думаете стоит использовать таблицы?
     
    #10 smOleg, 3 Mar 2008
  11. astrologer

    astrologer Elder - Старейшина

    Joined:
    30 Aug 2007
    Messages:
    837
    Likes Received:
    267
    Reputations:
    59
    Таблицы нужно использовать для табличных данных. Это их предназначение.
    Хотя, если кому-то удобнее делать сложный дизайн без CSS и табличной версткой - его право.

    P.S.
    нашли ещё одну девушку Античата =)
     
    #11 astrologer, 3 Mar 2008
    Last edited: 3 Mar 2008
  12. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    Гы :D Та не то очепятка.. темно на слепую стучу :p
     
    #12 smOleg, 3 Mar 2008
  13. Helios

    Helios Elder - Старейшина

    Joined:
    14 Jan 2007
    Messages:
    414
    Likes Received:
    180
    Reputations:
    103
    Использовать стоит все, но каждый элемент именно там, где это удобнее и логичнее всего.
     
    #13 Helios, 3 Mar 2008
  14. Дикс

    Дикс Elder - Старейшина

    Joined:
    16 Apr 2006
    Messages:
    1,194
    Likes Received:
    227
    Reputations:
    26
    бред

    стоит там где они уместны.
    надо учитывать их минусы - больше кода и не отображается содержимое, пока не загрузится вся таблица.
    так что весь контент страницы пихать в таблицу неуместно, а вот вставить небольшую табличку, к примеру с расценками, самое то.
     
    #14 Дикс, 3 Mar 2008
  15. imajo.ati

    imajo.ati Banned

    Joined:
    21 Feb 2008
    Messages:
    232
    Likes Received:
    62
    Reputations:
    8
    мне больше нравится табличная вёрстка. посмотри мой сайт, почти всё на таблицах.
    я почему ими люблю пользоватся: при уменьшении окна браузера таблицы ни в коем случае не заезжают одна на другую, в отличии от див ов, они легче в обращении, у них "нормально" работает vertical-align (или valign) в отличии от див ов.. дв много чего.
     
    #15 imajo.ati, 3 Mar 2008
  16. Дикс

    Дикс Elder - Старейшина

    Joined:
    16 Apr 2006
    Messages:
    1,194
    Likes Received:
    227
    Reputations:
    26
    smOleg не мажься, не мажься.. то-то я и смотрю у тя предложения необычно построены ;)

    *по-тихому в бабы записали ж)
     
    #16 Дикс, 3 Mar 2008
  17. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    не ну странный глюк.. на места формы поставали но чегото курсор в инпут (шоб шото ввести) не хочет ставится :confused:

    Сейчас код тот же что и вначале только добавил доктайп и немного подогнал под стандарты :D

    Напомню), что в ФФ и ИЕ все нормально так что у меня руки прямые)
     
    #17 smOleg, 3 Mar 2008
    Last edited: 4 Mar 2008
  18. smOleg

    smOleg Banned

    Joined:
    30 Nov 2007
    Messages:
    69
    Likes Received:
    25
    Reputations:
    -5
    оказалось опера на дух не переносит
    float:left на label
    ставим лейблу айди и на него уже флоат. тогда работает.
     
    #18 smOleg, 4 Mar 2008
    Last edited: 10 Mar 2008
(You must log in or sign up to post here.)
Language
English (US)
    ANTICHAT ™ © 2001-2027 Antichat Kft.