Добавление Doctype уничтожает макет - PullRequest
Новая
       2

Добавление Doctype уничтожает макет

5 голосов
/ 06 марта 2012

Я работал над меню вкладок без добавления оператора doctype.Это прекрасно работает в моих глазах, но когда я размещаю <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> или любой другой тип Doctype, мой макет полностью портится.Ниже три изображения, которые описывают

1.) Expanded Window (without doctype)

2.) Contracted Window (without doctype)

3.) Contracted Window (WITH doctype)

enter image description here

I 'используя псевдо :after, чтобы поместить правую часть «раздвижной двери» с фрагментом кода: 

#nav li:after {
    width:10px;
    content:"";
    background: url('tabRight.png');
    position:absolute;
    height:100%;
    top:0;
    right:-10;
}

Я довольно новичок в веб-разработке, поэтому я понятия не имею, что может быть причиной этого,Любая помощь на этом этапе будет принята с благодарностью.Спасибо!

HTML: 

<div id="nav">
<ul>
    <li id="dead">
        <a href='javascript: toggle()'>
            <div script="padding-left:5px;">
                <img class="navImg" src="dead32.png" />
                <p class="navTxt">Deadlines</p>
            </div>
        </a>
    </li>
    <li>&nbsp;&nbsp;About</li>
    <li>&nbsp;&nbsp;Address</li>
</ul>
</div>

РЕДАКТИРОВАТЬ:

Проблема вызывает right:-10;.Если я установлю right:0; Макет будет восстановлен, однако тогда «раздвижные двери» у меня не будут работать.Прозрачный край правой раздвижной двери показывает серый фон, когда он перекрывает левую раздвижную дверь, а это не то, что я хочу.

enter image description here

Ответы [ 4 ]

8 голосов
/ 06 марта 2012

No doctype == режим причуд.Поведение макета в причудливых / строгих режимах порой сильно отличается.

2 голосов
/ 06 марта 2012

ЕСЛИ вы написали свой код и css без добавления DOCTYPE в заголовок.Это означает, что по умолчанию ваш браузер находится в режиме причуд, что означает, что браузер не знает, как отображать элементы.Всегда необходимо добавлять doctype в заголовок, потому что какой-то браузер, например IE, испортит весь ваш макет.

Я предлагаю добавить doctype transitional и запустить код / ​​css, это подойдет вам и всегда будет полезно для решения проблем совместимости с браузером.

Вот пример по умолчанию Dream Weaverсоздается при создании нового шаблона HTML. 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
0 голосов
/ 06 марта 2012

Согласно моему комментарию, я бы порекомендовал добавить Strict DTD (как вы всегда должны делать) и код против этого.Кроме того, использование селектора сброса CSS всегда является хорошим эмпирическим правилом 

*{
   margin: 0;
   padding: 0;
 }
0 голосов
/ 06 марта 2012

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

Возможно, ваш сайт не соответствует строгим правилам DTD, поэтому различия в отображении.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...