Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Сайт отображается в разных браузерах по-разному

#1 Kolovrat

Kolovrat
  • Заблокированные
  • 61 сообщений
  • Репутация: 0
0

Отправлено 09 Апрель 2012 - 18:45

Создавал сайт пользуясь мозилой, то-есть проверял расстановку объектов в мозиле, а когда открыл в IE произошел пи....ц ^_^
все растянутое и кривое :( я все размеры указывал в пикселях, а сейчас решил попробовать изменить на проценты в надежде что их браузеры будут понимать нормально, но мои молитвы не оправдались :) все равно все криво....

может кто-то знает как подогнать под все браузеры CSS только без проверки на браузер, а то нет сейчас времени несколько разных шаблонов писать????

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Апрель 2012 - 19:51

Kolovrat,
Пиксели и проценты тут ни при чем.

Существует такое понятие как кроссбраузерная верстка. Это отдельный раздел при изучении HTML и CSS.
По большей части это понятие относится к особенностям отображения различных элементов в разных версиях IE, ибо этот браузер в свое время был на столько доминирующим на рынке браузеров, что его разработчики не только не считали нужным придерживаться стандартов, но и регулярно придумывали свои собственные стандарты, которые другие разработчики не всегда спешили соблюдать. Хотя и в других браузерах есть свои "прибабахи", их не так много по причине меньшей популярности других браузеров, но и там они есть. Так же это относится к новым и еще малораспространенным стандартам, таким как CSS3 и HTML5.

При верстке _необходимо_ учитывать эти особенности. Их довольно много, запомнить все наизусть почти невозможно, проще при верстке сразу отсматривать результат в самых проблемных и популярных браузерах: IE6-9, FF, Opera, Chrome, Safari, чтобы либо исключить проблемные места верстки, либо сразу сверстать кроссбраузерно, либо подыскать так называемый "хак", исправляющий проблемную верстку.

Короче, либо показывайте ваш косячный код, и если там не слишком наворочено, то попробуем исправить, либо беритесь за учебник/справочник/гугл и изучайте вопрос про кроссбраузерную верстку и "хаки" для разных браузеров.
  • 2

#3 Kolovrat

Kolovrat
    Topic Starter
  • Заблокированные
  • 61 сообщений
  • Репутация: 0

Отправлено 09 Апрель 2012 - 20:06

ща кину код, поищу урок по этой теме, а если не сложно подкиньте пожалуйста мне хороший на ваш взгляд урок (если знаете таковой)

/* ГОЛОВА */
#shapka
{
width:100%;
height:22.9%;
background: url(http://s019.radikal.ru/i630/1204/a2/371ad08eae1b.png);
background-color: #87CEFA;
}
/* КОНТЕНТ */
#container
{
margin: 0;
padding: 0;
}
#kontent
{
margin: 1%;
position:relative;
}
#glavnaya, #glavnaya_2
{
width: 47%;
padding: 0.5%;
position: absolute;
top: 0px;
}
#glavnaya
{
left: 0px;
}
#glavnaya_2
{
right: 0px;
}
#pict
{
position: absolute;
left:27%;
top:5%;
width:50%;
position: fixed;
visibility: hidden;
z-index: 5;
}
#pictures
{
margin: 1%;
}
/* МЕНЮ САЙТА */
#knopki, #knopki2
{
text-align:center;
Font-weight: bolder;
padding: 5px;
height: 23px;
width: 194px;
}
#knopki
{
float: right;
}
#knopki2
{
background-color: #7ca5f7;
width: 195px;
}
#menu, #holding, #st, #perspectiva
{
position: absolute;
}
#holding
{
padding: 5px;
visibility: hidden;
right: 198px;
top: 28;
z-index:2;
}
#st
{
padding: 5px;
visibility: hidden;
right: 403px;
top: 28;
z-index:3;
}
#perspectiva
{
padding: 5px;
visibility: hidden;
right: 403px;
top: 61;
z-index:4;
}
#menu
{
right: 0px;
margin-top: 172px;
z-index:1;
}
#menu a
{
text-decoration:none;
display:block;
color: blue;
}
#knopki:hover
{
background: url(http://s019.radikal.ru/i624/1204/56/ea48009913b5.png);
}
#knopki2:hover
{
background-color: #79b9fd;
}

  • 0

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Апрель 2012 - 20:09

Kolovrat,
Тут скорее не урок нужен, а справочник с подборкой кроссбраузерных решений и хаков.
Мне, например, нравится этот: HTML и CSS приемы см раздел "Лекарства для".
  • 1

#5 Kolovrat

Kolovrat
    Topic Starter
  • Заблокированные
  • 61 сообщений
  • Репутация: 0

Отправлено 09 Апрель 2012 - 20:15

ок спс) ща вот нашел какой то урок по этой теме - хоть пойму суть верстки =) а потом почитаю вашу ссылку. если не сложно посмотрите что можно с моим кодом сделать

P.S. главное что бы он нормально отображался в мозиле и IE. Сайт делаю матери для работы, ей сейчас надо туда инфу выложить которую администрация будет проверять а у них восновном IE
  • 0

#6 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Апрель 2012 - 20:17

Kolovrat
а HTML где?
  • 0

#7 Kolovrat

Kolovrat
    Topic Starter
  • Заблокированные
  • 61 сообщений
  • Репутация: 0

Отправлено 09 Апрель 2012 - 20:22

один момент. забыл ^_^

сайт стоит на юкозе, по этому сделал в таком виде

общий шаблон
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>$MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
<script type="text/javascript" src="/script.js"></script>
</head>
<body bgcolor="eaeef5" id="container">
$ADMIN_BAR$
$GLOBAL_CLEFTER$
$GLOBAL_AHEADER$
<div id="kontent">$CONTENT$</div>
<?if((1+2)==10)?>$POWERED_BY$<?endif?>
</body>
</html>

меню
<div id="menu">
<div id="knopki"><a href=$HOME_PAGE_LINK$>Главная</a></div>
<div id="knopki"><a onClick="MenuAction(1);">Холдинг</a></div>

<div id="holding">
<a onClick="MenuAction(2);" id="knopki2">Современные Технологии</a>
<a onClick="MenuAction(3);" id="knopki2">Перспектива</a>
</div>

<div id="st">
<a href="http://new-techno.ucoz.ru/index/o_kompanii/0-13" id="knopki2">О компании</a>
<a href="http://new-techno.ucoz.ru/index/uslugi_i_tarify/0-14" id="knopki2">Услуги и тарифы</a>
<a href="http://new-techno.ucoz.ru/index/itogi_raboty/0-15" id="knopki2">Итоги работы</a>
</div>

<div id="perspectiva">
<a href="http://new-techno.ucoz.ru/index/o_kompanii/0-16" id="knopki2">О компании</a>
<a href="http://new-techno.ucoz.ru/index/uslugi_i_tarify/0-17" id="knopki2">Услуги и тарифы</a>
<a href="http://new-techno.ucoz.ru/index/itogi_raboty/0-18" id="knopki2">Итоги работы</a>
</div>
</div>

  • 0

#8 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Апрель 2012 - 20:26

Нет. Юкозовский шаблон не нужен.
Мне его некуда подставлять.

Нужен код готовой страницы с косяками.
Плюс перечень того, что не так и как оно должно по-вашему быть. Чтоб не искать.
  • 0

#9 Kolovrat

Kolovrat
    Topic Starter
  • Заблокированные
  • 61 сообщений
  • Репутация: 0

Отправлено 09 Апрель 2012 - 20:31

new-techno.ucoz.ru вот можете глянуть. проблема в том что например на главной странице есть два блока и они получаются больше чем должны быть и залазиют на друг друга. а так же с шапкой получается, она слишком большая. с меню тоже косяк. когда открываешь подменю оно должно быть с отступом, так вот у меня отступ нормальный а в IE больше чем надо. то-есть позиционарование везде глючит
  • 0

#10 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 09 Апрель 2012 - 20:48

Однако.
Тихий ужас, а не верстка:
* нет доктайпа
* куски кода и стилей за пределами тела документа <html></html>
* несколько тэгов <body></body>

каждого из этих моментов достаточно, чтобы перекосить страницу как угодно.

К сожалению, у вас как раз случай, когда наворочено так, что проще заново написать, чем исправлять ошибки.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru