添加Doctype销毁布局
我一直在制作选项卡菜单而不添加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)
我正在使用:after伪来将"滑动门"的右侧放置在代码片段中:
#nav li:after {
width:10px;
content:"";
background: url('tabRight.png');
position:absolute;
height:100%;
top:0;
right:-10;
}
我对Web开发很陌生,所以我不知道是什么导致了这一点.在这一点上的任何帮助将不胜感激.谢谢!
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>
编辑:
这right:-10;是导致问题的原因.如果我设置right:0;布局已恢复,然而这使得"滑动门"对我不起作用.右侧滑动门的透明边缘在与左侧滑动门重叠时显示灰色背景,这不是我想要的.
