Добавление типа документа разрушает макет

Я работал над меню вкладок, не добавляя оператор типа документа. На мой взгляд, это прекрасно работает, но когда я помещаю или любой другой тип Doctype, мой макет полностью портится. вверх. Ниже приведены три изображения, описывающие

1.) Расширенное окно (без типа документа)

2.) Свернутое окно (без типа документа)

3.) Свернутое окно (с типом документа)

Я использую :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; макет восстанавливается, однако тогда "раздвижные двери" у меня не работают. Прозрачный край правой раздвижной двери показывает серый фон, когда он перекрывает левую раздвижную дверь, а это не то, что мне нужно.