I have been working on a tab menu without adding the doctype statement. It

Question

0

Asked: May 31, 20262026-05-31T03:32:15+00:00 2026-05-31T03:32:15+00:00

I have been working on a tab menu without adding the doctype statement. It

0

I have been working on a tab menu without adding the doctype statement. It works perfectly in my eyes but when I do place the <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> or any other type of Doctype, my layout completely messes up. Below are three pictures which describe

1.) Expanded Window (without doctype)

2.) Contracted Window (without doctype)

3.) Contracted Window (WITH doctype)

enter image description here

I’m using the :after pseudo to place the right side of the “sliding door” with the code snippet:

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

I’m pretty new to web development so I have no idea what could be causing this. Any help at this point would be appreciated. Thanks!

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>

EDIT:

The right:-10; is causing the problem. If I set right:0; The layout is restored, however then this makes the “sliding doors” not work for me. The transparent edge from the right sliding door shows the grey background when it overlaps the left sliding door, which is not what I want.

enter image description here