Reputation: 905
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.
Upvotes: 5
Views: 3850
Reputation: 5895
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>
Upvotes: 2
Reputation: 2948
As per my comment, I would recommend adding a Strict DTD (as you always should anyway) and code against that. Also, using a CSS reset selector is always a good rule of thumb
*{
margin: 0;
padding: 0;
}
Upvotes: 0
Reputation: 1520
The Document Type Definition defines how certain tags have to be interpreted by the browser. XHTML as a XML-based markup language is very strict and requires you to open and close your tags appropriately (also it is case-sensitive).
Probably your website doesn't follow the strict DTD rules, hence the differences in display.
Upvotes: 0
Reputation: 32306
No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.
Upvotes: 8