Просмотр полной версии : Opera и классы в CSS
короче верстаю я се в FF (бо там есть фаербаг)
там несколько 3 или 4 формы.. ну шоб не пихать их в отдельные блоки решил их классами обозвать
ну нач форм.класклас такойто и тут пишу со спокойной совестю любую ахинею лиш бы на место встало
Итак имеем несколько форм которые стоят на местах по классам. ФФ показует нормально. ИЕ тоже нормально (это чудо.. с первого раза нормально!!)
включаем оперу.. и ужос :eek: только первая форма стоит наместе остальные наче ядрёной бомбой разбросало по всей странице..
это просто капец Опера была моим идеалом :( и что теперь. что это такое? почему даже ИЕ не вые**я :confused:
я плачу :( опера...
astrologer
03.03.2008, 00:08
короче верстаю я се в FF (бо там есть фаербаг)
там несколько 3 или 4 формы.. ну шоб не пихать их в отдельные блоки решил их классами обозвать
ну нач форм.класклас такойто и тут пишу со спокойной совестю любую ахинею лиш бы на место встало
Итак имеем несколько форм которые стоят на местах по классам. ФФ показует нормально. ИЕ тоже нормально (это чудо.. с первого раза нормально!!)
включаем оперу.. и ужос :eek: только первая форма стоит наместе остальные наче ядрёной бомбой разбросало по всей странице..
это просто капец Опера была моим идеалом :( и что теперь. что это такое? почему даже ИЕ не вые**я :confused:
я плачу :( опера...
Код-то покажи. Чего сразу браузер обвинять. (И какая версия браузера?)
Вот опера9,24%) помоему многовато шоб показыватьь
<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"> <br /></label>
<input id="inp2" class="inp2" name="Adress2" value="" /><br />
</fieldset>
</form>
</div>
</div>
</div>
</body>
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;}
imajo.ati
03.03.2008, 00:50
уу) я боюсь этот код лучше стереть и написать с нуля то же самое раза в 3 короче. честно, слишеом много лишнего
astrologer
03.03.2008, 01:09
Если добавить доктайп и тег <html>, сломается вёрстка во всех браузерах.
Фиксированные размеры, ещё и без единиц измерения:
height:350;
width:955;
Много чего ещё...
Наверное, всё дело в этом:пишу со спокойной совестю любую ахинею лиш бы на место встало
Если добавить доктайп и тег <html>, сломается вёрстка во всех браузерах.
добавил хтмл и..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
все на местах :) .
а без указания едениц измерения всегда любой бровзер ставит пиксели. Ато што лишнего много.. так некогда и за это всеравно денех неполучу. Блин а на оперу есть фаербаг? Очень удобная штука.
Ладно как разберусь напишу чо было :)
а щас читаю "История, которой не было, или "Хакнутые ВЫБОРЫ'99" :)
astrologer
03.03.2008, 01:42
добавил хтмл и..
<!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. Как думаете стоит использовать таблицы?
astrologer
03.03.2008, 03:04
А вот мой знакомый грит шо CSS можна иногда вставить чисто для понта и таблицы рулят. Типа чистым css сложный диз не сделать.
а я таблицами даж не знаю как верстать ибо начала учить сразу с css. Как думаете стоит использовать таблицы?
Таблицы нужно использовать для табличных данных. Это их предназначение.
Хотя, если кому-то удобнее делать сложный дизайн без CSS и табличной версткой - его право.
P.S. начала учить сразу с cssнашли ещё одну девушку Античата =)
P.S. нашли ещё одну девушку Античата =)
Гы :D Та не то очепятка.. темно на слепую стучу :p
Использовать стоит все, но каждый элемент именно там, где это удобнее и логичнее всего.
Типа чистым css сложный диз не сделать.
бред
Как думаете стоит использовать таблицы?
стоит там где они уместны.
надо учитывать их минусы - больше кода и не отображается содержимое, пока не загрузится вся таблица.
так что весь контент страницы пихать в таблицу неуместно, а вот вставить небольшую табличку, к примеру с расценками, самое то.
imajo.ati
03.03.2008, 09:55
мне больше нравится табличная вёрстка. посмотри мой сайт, почти всё на таблицах.
я почему ими люблю пользоватся: при уменьшении окна браузера таблицы ни в коем случае не заезжают одна на другую, в отличии от див ов, они легче в обращении, у них "нормально" работает vertical-align (или valign) в отличии от див ов.. дв много чего.
smOleg не мажься, не мажься.. то-то я и смотрю у тя предложения необычно построены ;)
*по-тихому в бабы записали ж)
не ну странный глюк.. на места формы поставали но чегото курсор в инпут (шоб шото ввести) не хочет ставится :confused:
Сейчас код тот же что и вначале только добавил доктайп и немного подогнал под стандарты :D
Напомню), что в ФФ и ИЕ все нормально так что у меня руки прямые)
оказалось опера на дух не переносит
float:left на label
ставим лейблу айди и на него уже флоат. тогда работает.
vBulletin® v3.8.14, Copyright ©2000-2026, vBulletin Solutions, Inc. Перевод: zCarot