I've been working on a tab menu without adding the doctype statement. It seems to be functioning perfectly from my perspective, but as soon as I include the or any other type of Doctype, the layout gets completely messed up. Here are three images illustrating the issue:
1.) Expanded Window (without doctype)2.) Contracted Window (without doctype)3.) Contracted Window (WITH doctype)I'm utilizing the :after pseudo-element to position the right side of the "sliding door" with the following code snippet:
#nav li:after {
width:10px;
content:"";
background: url('tabRight.png');
position:absolute;
height:100%;
top:0;
right:-10;
}
As I am relatively new to web development, I am unsure about what could be causing this issue. Any assistance at this point would be greatly appreciated. Thank you!
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> About</li>
<li> Address</li>
</ul>
</div>
EDIT:
The right:-10; is the root of the issue. If I change it to right:0;, the layout returns to normal. However, this adjustment causes the "sliding doors" not to function as intended. The transparent edge of the right sliding door reveals the grey background when overlapping the left sliding door, which is not the desired outcome.