Menu
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)
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> About</li>
<li> Address</li>
</ul>
</div>
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.
522
No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.
121
IF you have written your code and css without adding DOCTYPE in you header. It means by default your browser is in quirks mode that means browser dont know how to render the elements. It is always necessary to add doctype in header because some browser like IE will messup your entire layout.
My suggestion is to add doctype transitional and start the code/css, this will be suitable for you and it will always helpful to solve browser compatibility issues.
Here is example by default dream weaver is creating when you create new HTML template.
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
