Проблема с кроссбаузерной верской....

Shoker · March 19, 2008

Всем привет, столкнулась с такой проблемой, уже что-то походу знаний не хватает, чтобы понять в чем косяк.... в эксплорере и в Мозиле страничка показывает нормально... в опере и в сафари кнопка уезжает у кого влево, у кого вправо. В чем может быть причина??? Заранее спасибо, если кто глаза откроет.

Сам файл:

Здравствуйте! Для работы в системе Вам необходимо авторизоваться!

Ваш логин:

Ваш пароль:

checked="checked" value="1" name="rem" />

а вот css к нему :

html, body {

background:#dcdcda url('images/gradient_outer.png') top repeat-x;

font-family: Verdana, Tahoma, sans-serif;

font-size: 11px;

padding: 0px;

border:0px;

margin: 0px;

}

table, td {

padding: 0px;

margin: 0px;

border-collapse: collapse;

}

.block1 {

width:500px; background:#f4f4f4; border: solid 0px;

}

.block2 {

width:500px; height:35px; vertical-align:middle; background:#f4f4f4; border: solid 0px;

}

.block3 {

width:500px; height:30px; vertical-align:middle; background:#f4f4f4; border: solid 0px; position: relative;

}

input.send {

margin-left:190px}

div.log {

font-family: Arial;

font-size: 11px;

font-weight: bold;

color:#000000;}

div.send {

margin-left: 175px}

maddogrts · March 19, 2008

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Making a SELECT OPTION Disabled</title>
<style>
html, body {

 background:#dcdcda url('images/gradient_outer.png') top repeat-x;
 font-family: Verdana, Tahoma, sans-serif;
 font-size: 11px;
 padding: 0px;
 border:0px;
 margin: 0px;

}

table, td {
 padding: 0px;
 margin: 0px;
 border-collapse: collapse;
}

.block1 {
width:500px; background:#f4f4f4; border: solid 0px;
}
.block2 {
width:500px; height:35px; vertical-align:middle; background:#f4f4f4; border: solid 0px;
}

.block3 {
width:500px; height:30px; vertical-align:middle; background:#f4f4f4; border: solid 0px; position: relative;
}
input.send {

margin-left:190px}


div.log {
font-family: Arial;
 font-size: 11px;
 font-weight: bold;
 color:#000000;}

div.send {
margin-right: 110px}
</style>
</head>
<body>

<div style="height: 33%;"></div>
<div style="height: 34%;" align="center">
 <div><img src="images/login_r2_c2.gif" alt="" title="" border="0" width="500" height="68"></div>
 <div><div class="block2" ><img src="images/login_r3_c2.gif" alt="Авторизация" width="183" height="34" hspace="15" align="left"></div>
 </div>
 <div class="block3"><div>
 <div class="text" align="left">Здравствуйте! Для работы в системе Вам необходимо авторизоваться!</div>
 </div>



</div>

 <div class="block3">
 <div style="display:inline;padding-right:16px;"> <span class="log" > Ваш логин: </span></div><input name="user" class="input" maxlength="28" size="29" />
</div>
 <div class="block3">
 <div style="display:inline;padding-right:10px;"> <span>Ваш пароль:</span></div> <input class="pass" name="passwd" type="password" maxlength="28" size="29"> </div>
 <div class="block3">
 <div class="send"><span class="right_radius"><input name="image" style="float: right;" type="image" src="images/come.png"> <input style="float: right" class="subm" type="hidden"
 checked="checked" value="1" name="rem" /></span></div>
 </div>
 <div class="block3"></div>
 </div>


</div>
</body>
</html>

не изпользуйте инлайн, им тяжело управлять

Shoker · March 19, 2008

а чем можно заменить?? и как можно прописать чтобы эта "дурацкая" (прости господи) кнопка не скакала то влево, то в право..??

maddogrts · March 19, 2008

Я же сделал или нет ? работает мой вариант ?

Shoker · March 19, 2008

нет, теперь скачет все )))) во всех браузерах кроме IE естественно... вот сижу перебираю

Postal · March 19, 2008

у меня все нормально работает.

вот код, я немного структуризировал его:

<html>
<head>
 <title> </title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
 <style type="text/css">
 html, body {
 background:#dcdcda url('images/gradient_outer.png') top repeat-x;
 font-family: Verdana, Tahoma, sans-serif;
 font-size: 11px;
 padding: 0px;
 border:0px;
 margin: 0px;
 }

 table, td {
 padding: 0px;
 margin: 0px;
 border-collapse: collapse;
 }

 .block1 {
 width:500px; background:#f4f4f4; border: solid 0px; 
 }
 .block2 {
 width:500px; height:35px; vertical-align:middle; background:#f4f4f4; border: solid 0px;
 }

 .block3 {
 width:500px; height:30px; vertical-align:middle; background:#f4f4f4; border: solid 0px; position: relative;
 }
 input.send {
 margin-left:190px
 }
 div.log {
 font-family: Arial;
 font-size: 11px;
 font-weight: bold;
 color:#000000;
 }
 div.send {
 margin-left: 175px
 }
 </style>
</head>
<body>
 <div style="height: 33%;"></div>
 <div style="height: 34%;" align="center">
 <div>
 <img src="images/login_r2_c2.gif" alt="" title="" border="0" width="500" height="68" />
 </div>
 <div>
 <div class="block2" >
 <img src="images/login_r3_c2.gif" alt="Авторизация" width="183" height="34" hspace="15" align="left" />
 </div> 
 </div>
 <div class="block3">
 <div>
 <div class="text" align="left">Здравствуйте! Для работы в системе Вам необходимо авторизоваться!</div>
 </div>



 </div>
 <div class="block3">
 <div style="display:inline;padding-right:16px;">
 <span class="log" > Ваш логин: </span>
 </div>
 <input name="user" class="input" maxlength="28" size="29" />

 </div>
 <div class="block3">
 <div style="display:inline;padding-right:10px;">
 <span>Ваш пароль:</span>
 </div>
 <input class="pass" name="passwd" type="password" maxlength="28" size="29" />
 </div>
 <div class="block3">
 <div class="send" style="display:inline;">
 <span class="right_radius"><input name="image" type="image" src="images/come.png" /> <input class="subm" type="hidden" checked="checked" value="1" name="rem" /></span>
 </div>
 </div>
 <div class="block3"></div> 
 </div>
</body>
</html>

проверь у себя этот код

Postal · March 19, 2008

ну чего работает?

Shoker · March 19, 2008

сафари и опера подводят опять... в мозиле и IE естественно все нормально =((( сама врооде не чайник, а 2 дня туплю как пробка...

Postal · March 19, 2008

в Опере у меня так выглядит http://upload.com.ua/get/900151129

оно?

Shoker · March 19, 2008

сейчас посмотрю, 5 мин мне бы тоже показать скрин... жаль тут функции вставки нету

Shoker · March 19, 2008

посмотрела, у меня кнопка уходит более вправо, если я прописываю другой размер, улетает она в лисе....в сафари вообще кнопка ушла на пикселей 20 влево

Postal · March 19, 2008

в общем предлагаю свой вариант поставленной задачи:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
 <title> </title>
 <meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
 <style type="text/css">
 body {
 margin:0;
 padding:0;
 background-color:#DCDCDA;
 }
 .main_block {
 width:500px;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-120px;
 }
 .content_block {
 padding:10px;
 background-color:#F4F4F4;
 }
 .frm_block {
 margin:0 auto;
 width:300px;
 }
 .img {
 display:block;
 }
 .clear_big {
 font-size:1px;
 height:15px;
 }
 .clear {
 clear:both;
 }
 .clear_small {
 clear:both;
 font-size:1px;
 height:10px;
 }
 .fr {
 float:right;
 }
 .fl {
 float:left;
 }

 </style>
</head>
<body>
 <div class="main_block">
 <img src="images/login_r2_c2.gif" alt="" title="" border="0" width="500" height="68" />

 <div class="content_block">
 <img src="images/login_r3_c2.gif" alt="Авторизация" width="183" height="34" />
 <div class="clear_big"></div>
 <div class="frm_block">
 <input class="fr" name="user" maxlength="28" size="29" />
 <div class="fl">Ваш логин:</div> 
 <div class="clear_small"></div>
 <input class="fr" name="user" maxlength="28" size="29" />
 <div class="fl">Ваш пароль:</div> 
 <div class="clear_small"></div>
 <input class="fr" value="ok" name="image" type="image" src="images/come.png" />
 <input class="subm" type="hidden" checked="checked" value="1" name="rem" />
 <div class="clear"></div>
 </div>
 </div>
 </div>

</body>
</html>

Все красиво и валидно.

Shoker · March 19, 2008

щас оценим )) хоть бы вышло =))

Postal · March 19, 2008

после первого img поставь

, забыл поставить, чтоб в ИЕ отступ исчез.

Либо сделай так чтоб между тегами картинки и следующего дива не было пробелов.

Shoker · March 19, 2008

спасибо за помощь, но в опере все равно криво....и в сафари .... не только у меня но и у коллег

maddogrts · March 19, 2008

че то не то )) по мойму вы что то не так сами делаете

У меня все прекрассно работает , и в сафари и в опере и в ие и вообще во всем а у вас криво, чувствую проблема в вас ?). Давайте показывайте полный код, а лучше странице где это все лежит, если нету создайте на народе и покажите

Postal · March 19, 2008

да, это точно.

проверил во всех, в том числе и в Сафари все прекрасно работает.

Мож кеш надо очистить?

Shoker · March 19, 2008

на данный момент я просто нагло скопировала код и сохранила.....в ие и в мозиле все замечательно... в опере и сафари кнопка тупит..... я могу сделать скрин и его выложить =)))))

Postal · March 19, 2008

выкладывай, а я свой покажу и там все ровненько.

Shoker · March 19, 2008

я только винд переустановила...... я не спорю что может быть ошибка и в моем компе.... тут был прикол часа 2 назад, вот тут точно не знаю как это могло быть.... я выкладывала страничку на сервер, у меня на диске все так чинно, хороший код... заливаю туда, а у меня (не знаю как, я же не первый раз это делаю) САМ сверху над доктайпом прописывались формы..... причину не поняла, решила что проще заново переписать через блокнот....

Ребята, в любом случае большое Вам спасибо... я подчерпнула из всех Ваших вариантов идеи по блочной верстки.... еще из дома проверю, у меня дома комп не глючный, может и все нормально :)

Shoker · March 19, 2008

щас , 5 сек

http://laracat.narod.ru/opera.jpg

http://laracat.narod.ru/safari.jpg

Postal · March 19, 2008

вот мое творение http://pashka-l.narod.ru/bunker/htmlbook/index.html

Shoker · March 19, 2008

опа прямо пиксель в пиксель... это в опере????

Postal · March 19, 2008

везде

Shoker · March 19, 2008

нет слов... ладно, пойду домой, посмотрю может и правда все нормально ))))) Все равно БОЛЬШУЩЕЕ СПАСИБО!!!.... рада что этот сайт нашла

Sign In

Проблема с кроссбаузерной верской....

Question

Link to comment

Share on other sites

24 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information