[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Заточка дизайна под IE
Форум PHP программистов > Дизайн и верстка
McLotos
11.10.2011 - 14:19
Написал небольшой шаблон, но с ним возникла проблема, шаблон писался на Chrome и в нём выглядит идеально, а вот в IE вообще отображается пустая страница, что можно сделать? Подскажите есть ли какой-нибудь онлайн конвертер.
Вот сам код 
body {background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#0788FF));}

ul {padding:10px 0; margin-left:0;font:bold 8pt Verdana, sans-serif;text-align: center}
ul li{list-style:none; margin:0;  display:inline;}
ul li a{     padding: 5px;
		font-family: Bookman Old Style, serif;
		text-decoration: none;
        font-size: 16px;
		font-style:bold;
		color: #FFFFFF;
        text-shadow: 5px 5px 5px #000000;
        outline: none;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#7F00FF));
        border-radius: 3px;
        border: 0px solid;
        box-shadow:  10px 10px 20px #000000; }
ul li a:hover { 
  text-decoration: none;  
  font-family: Bookman Old Style, serif;
  color: #000000;
  font-style:bold;
  padding: 5px;
        font-size: 16px;
        text-shadow: 5px 5px 5px #FFFFFF;
		text-align:center;
        outline: none;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#007CFF));
        border-radius: 3px;
        border: 0px solid;
        box-shadow:  1px 1px 20px #7F00FF;
} ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
}

ol {padding:10px 0; margin-left:0;font:bold 8pt Verdana, sans-serif;text-align: center}
ol li{list-style:none; margin:0;}
ol li a{   padding: 5px;
		font-family: Bookman Old Style, serif;
		text-decoration: none;
        font-size: 16px;
		font-style:bold;
		color: #FFFFFF;
        text-shadow: 5px 5px 5px #000000;
        outline: none;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#7F00FF));
        border-radius: 3px;
        border: 0px solid;
        box-shadow:  10px 10px 20px #000000; }
ol li a:hover { 
  text-decoration: none;  
  font-family: Bookman Old Style, serif;
  color: #000000;
  font-style:bold;
  padding: 5px;
        font-size: 16px;
        text-shadow: 5px 5px 5px #FFFFFF;
		text-align:center;
        outline: none;
        background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#007CFF));
        border-radius: 3px;
        border: 0px solid;
        box-shadow:  1px 1px 20px #7F00FF;
}
ol li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
}




Спустя 4 минуты, 41 секунда (11.10.2011 - 13:24) AlmazDelDiablo написал(а):
Попробуйте в background прописать просто цвет, а не градиент.
И можно HTML-код шаблона увидеть?

Спустя 5 минут, 32 секунды (11.10.2011 - 13:30) McLotos написал(а):
header.tpl
<html>
<head><title><?=$currentlocname?></title>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" />
<link rel="stylesheet" href="/templates/sloth/css/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/templates/sloth/css/bg.and.menu.css" type="text/css"/>
</head><body>
<body>
<div id="wrapper">
	<header id="header">
		<strong>
		<ul type="none">
		<li><a href="/">Home</a></li>
		<li><a href="/forums">Forums</a></li>
		<li><a href="/articles">Articles</a></li>
		<li><a href="/search">Search</a></li>
		</ul></strong>
	</header>

index.tpl
	<section id="middle">
		<div id="container">
			<div id="content">
				<strong> </strong>
				</div>
		</div>
		<aside id="sideLeft">
			<strong> </strong> 
		</aside>
		<aside id="sideRight">
			<strong> </strong> 
		</aside>

	</section>

Ну вот как-то так

Спустя 36 секунд (11.10.2011 - 13:30) ceil100 написал(а):
а где градиенты для firefox?
Он не только в ie будет с белым фоном, но и во всех браузерах кроме хрома и сафари

Лучше используйте картинку с градиентом

Спустя 2 минуты, 48 секунд (11.10.2011 - 13:33) AlmazDelDiablo написал(а):
Вы доктайп забыли указать. Проверил — с ним не белый экран в ИЕ.
<!DOCTYPE html>
<html>
<head><title><?=$currentlocname?></title>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" />
<link rel="stylesheet" href="/templates/sloth/css/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="/templates/sloth/css/bg.and.menu.css" type="text/css"/>
</head><body>
<body>
<div id="wrapper">
	<header id="header">
		<strong>
		<ul type="none">
		<li><a href="/">Home</a></li>
		<li><a href="/forums">Forums</a></li>
		<li><a href="/articles">Articles</a></li>
		<li><a href="/search">Search</a></li>
		</ul></strong>
	</header>

Спустя 2 минуты, 5 секунд (11.10.2011 - 13:35) ceil100 написал(а):
footer куда потерялся?
целиком страницу выложи

он так и должен полосами быть?

Спустя 6 минут, 42 секунды (11.10.2011 - 13:42) ceil100 написал(а):
html{height:100%}
укажи, чтобы на всю страницу растягивался

Спустя 1 минута, 40 секунд (11.10.2011 - 13:43) McLotos написал(а):
1. Footer Вам ничего не даст, фактически нужен вообще только header, потому-что именно в нём и только в нём идёт подключение всех стилей и скриптов.
2. У меня никаких полос нету, у меня всё гладко и аккуратно
3. Все размеры указаны в style.css, а код файла, который я выложил отвечает только за бг и меню

Спустя 3 минуты, 26 секунд (11.10.2011 - 13:47) ceil100 написал(а):
в таком виде он будет только в хроме и в сафари
можно еще для firefox задать
С Opera и IE ничего не получится
Поэтому рекомендую сделать градиентную картинку шириной в 1 пиксель, и размножить ее по горизонтали, а фон сайта сделать одноцветным с одной из сторон этой картинки.

видимо голубым

Спустя 3 минуты, 28 секунд (11.10.2011 - 13:50) ceil100 написал(а):
он поэтому и полосил, что не все стили заданы и страница неполная
если хочешь, чтобы тебя правильно понимали, давай максимум исходной инфы иначе рискуешь получить неполный или неправильный ответ

Спустя 12 минут, 2 секунды (11.10.2011 - 14:02) McLotos написал(а):
Там не просто голубой, там градиент с белого в синий, просто страница не вся.
А с меню что делать? Сделать картинки? Но в таком случае не будет ни тени от кнопок, ни тени в названиях кнопок, ничего вообще, никаких эфектов, даже закругление углов и то не работает в это долбанном IE!
Эти мелкомягкие за всю историю своего существования не создали ничего действительно стоящего! ЛУЗЕРЫ!

Спустя 4 минуты, 39 секунд (11.10.2011 - 14:07) ceil100 написал(а):
про градиент я и говорю
делаешь градиентную картинку, размножаешь по горизонтали, а все остальное пространство заливаешь фоном, по цвету как нижняя граница градиента
то есть там где градиент кончается, начинается основной цвет, как бы продолжающий этот градиент вниз

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

насчет теней, можешь сделать кнопки в PNG и нарисовать все эффекты какие надо

Спустя 20 часов, 8 минут, 13 секунд (12.10.2011 - 10:15) Zerstoren написал(а):
А почему бы не воспользоваться градиент генераторами?

Они отлично делают кросс браузерные градиент (конечно если браузер вообще может поддерживать градиент)

http://www.colorzilla.com/gradient-editor/


_____________
программирование - инструмент для решения конкретных задач, любая попытка спроектировать что-то универсальное приведет к провалу.©paul85
В любом случае тебе прийдётся пройти путь изобретения велосипеда, который прошли другие, только причиной твоего изобретения будет непонимание принципов работы велосипеда изобретённого другими людьми.©SlavaFr
jQuery это попытка использовать АН-225 для перевозки зубочистки
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.