DOCTYPE Не работает

javelines · January 5, 2009

Удивлен был, когда верстал шаблон для wordpress. В IE 6 нормально все. А в других браузеров размеры отображаюца как попало... Я ставил доктип:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Новая страница 1</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>
<div align="center">
<table cellpadding="0" cellspacing="0" width="900px">
	<td align="left" valign="top">

<!-- Head -->
<div class="head">

<div class="logo"><a href="<?php echo get_option('home'); ?>/"><img border="0" src="images/logo.gif"></a><a href="#"><img border="0" src="images/rss.gif"></a></div>
<div class="search">Поиск</div>

<div id="mainmenu">
<ul>
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#">СТАТЬИ</a></li>
<li><a href="#">ОБО МНЕ</a></li>
<li><a href="#">КОНАКТ</a></li>
<li><a href="#">МЕТКИ</a></li>
</ul>
</div>

<div id="works"><img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
<img src="http://farm4.static.flickr.com/3268/3162876138_cdbfb5be63_s.jpg">
</div>
<div class="clear"></div>

</div>
<!-- Head end -->
<!-- Wrapper -->
<div id="wrapper">
...

Css

/* Main */
html,body {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%; }

body	{ 
	margin: 0px;
	padding: 0;
	font-family: "Tahoma",Arial,Verdana,sans-serif; 
	font-size: 12px; 
	text-align: left;
	background: #9b6f49 url('images/background.gif'); }

.clear {
 clear: both; }

.left { float: left; }
.right { float: right; }

h1 { 
	padding-bottom: 3px;
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	color: #215894;
	height: 20px;
	border-bottom: 1px solid #d3c7b0;
	margin: 0;
	margin-bottom: 5px;
	padding: 0; }

.space { height: 0px; }

/* Header */
.head {
	width: 900px;
	height: 272px;
	background: url('images/header.gif') top center no-repeat; }

.logo { 
	width: 425px;
	min-height: 133px;
	padding: 0;
	margin-left: 140px;
	margin-top: 13px;
	border: 0; }

.search {
	background: #FFF;
	width: 152px;
	height: 18px;
	font-size: 10px;
	margin: 0;
	padding: 0;
	margin-left: 637px;
	margin-top: -38px; }

#mainmenu { 
	width: 74px;
	height: 80px;
	float: left;
	padding: 0px;
	margin: 0px;
	margin-top: 50px;
	margin-left: 20px;
	text-align: right;
	font-size: 14px;
	font-family: Arial; }
#mainmenu ul { margin: 0px; padding: 0px; }
#mainmenu li { list-style-type: none; }
#mainmenu li a { 
	text-decoration: none; 
	font-weight: bold;
	color: #40392a; }
#mainmenu li a:hover { color: #d83d00; }

#works {
	width: 747px;
	height: 85px;
	float: left;
	margin-top: 51px;
	margin-left: 10px;
	padding: 0;
	padding-left: 5px;
	padding-right: 5px; }

#works img {
	border: 1px solid #c1a771;
	padding: 2px;
	margin-left: 6px; }
#works img:hover { 
	background: #fff; }

/* Sidebar */
.rightbar {
	float: right;
	width: 240px;
	margin: 0px;
	margin-top: 10px;
	margin-right: 16px;
	padding: 0px; }

.sidebar {
	border: 1px solid #dbc087;
	background: #f2e3c5 url(images/sidebar.gif);
	padding: 10px;
	font-family: Arial;
	font-size: 11px;
	color: #685c45; }

.sidebar ul { margin: 0px; padding: 0px; list-style: none;  }
.sidebar li { height: 10px; margin-top: 5px; margin-bottom: 5px; }
.sidebar li a { text-decoration: none; color: #685c45; border-left: 2px solid #d9c6a1; padding-left: 10px; }
.sidebar li a:hover { text-decoration: none; color: #215894; border-left: 2px solid #215894; }

.sidebar h1 {
	padding-bottom: 3px;
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	color: #b74817;
	height: 20px;
	border-bottom: 1px solid #d3c7b0;
	margin: 0;
	margin-bottom: 5px;
	padding: 0;
	padding-bottom: 3px; }

/* Content */
#wrapper {
	text-align: left;
	margin: 0;
	padding: 0;
	background: url(images/wrapper.gif); }

.piclayer { 
	width: 590px;
	height: 120px;
	margin: 10px;
	margin-left: 20px;
	padding: 0px;
	background: url(images/piclayer.jpg); }

#content {
	text-align: left;
	width: 570px;
	margin: 20px;
	margin-top: 0px;
	margin-right: 230px;
	padding: 10px;
	padding-left: 10px;
	background: #f6e7c8;
	}
...

Edited January 6, 2009 by javelines

javelines · January 6, 2009

Еще обратите внимание, расстояния между магнитофоном и потолком страницы есть, а его не должно быть, как это показано на правильной картинке.

Разные доктипы пробывал. Эффект один и тот же

Edited January 6, 2009 by javelines

Виртуал · January 6, 2009

А кроме дактайпа на странице есть код?

javelines · January 6, 2009

не нету

javelines · January 6, 2009

Почти решил задачу...

Оказывается, лучше не использовать параметр margin-*. криво работает. padding-* - работает

Но в некоторых случаях, есть возможность использовать только margin-*...

Edited January 6, 2009 by javelines

Виртуал · January 6, 2009

не нету

Оригинально.

Оказывается, лучше не использовать параметр margin-*. криво работает. padding-* - работает

Блажен, кто не ведает. Вот объяснение этого, кхм, «глюка».

http://softwaremaniacs.org/blog/2005/09/05...t-flow-margins/

s0rr0w · January 6, 2009

Почти решил задачу...
Оказывается, лучше не использовать параметр margin-*. криво работает. padding-* - работает
Но в некоторых случаях, есть возможность использовать только margin-*...

Это он в вашей голове криво работает. Если подучить матчасть, особенно что касается margin collapsing, то можно будет навести порядок в голове.

Vlad · January 7, 2009

Сенсации не получилось. Для начала исправь код (width="900px" например, надо width="900"), устрани ошибки в html, подучи особенности браузеров, тогда и заявляй о сенсациях.

javelines · January 7, 2009

Я таблицу убрал, сделал по другому. Она нужна была для центрирования слоя.

Да. Давайте дальше меня оскорблять. Сами-то не такие были.

Edited January 7, 2009 by javelines

Vlad · January 7, 2009

Не-а, мы сразу родились белыми и пушистыми.

javelines · January 7, 2009

Всеравно какото бред получается. http://softwaremaniacs.org/blog/2005/09/05...t-flow-margins/

ничего мне не дало там.

Ладна, только постибаца можете. Лучше бы подробнее про margin чего дали и про браузеры.

Edited January 7, 2009 by javelines

Виртуал · January 7, 2009

Ты выложи нормально страницу, тогда можно говорить о чем-то.

Больше чем уверен что читать не умешь, и в http://softwaremaniacs.org/blog/2005/09/05...t-flow-margins/ все есть.

Edited January 7, 2009 by Виртуал

javelines · January 7, 2009

Она под wordpress сверстана. Все я разобрался почти.

Виртуал · January 7, 2009

Она под wordpress сверстана.

И чё? Это как-то препятствует сделать «сохранить как» в браузере?

javelines · January 8, 2009

Она под wordpress сверстана.
И чё? Это как-то препятствует сделать «сохранить как» в браузере?

а ниче. с ворд прессом работал? читать ты не умеешь, а не я. Я уже давно сказал что разобрался.

Вот что получилось:

http://www.javelines.ru/

Sign In

DOCTYPE Не работает

Question

Link to comment

Share on other sites

14 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

Join the conversation

Обсуждения

Important Information