Adding Doctype Destroys Layout

Question

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

Posting the code or a link to an example would probably be helpful. — j08691, Mar 06 '12 at 17:41
my recommendation is to add a strict doctype (which should have been done from the start) and fix it against that. and consider a CSS reset selector — thescientist, Mar 06 '12 at 17:42
Two things: (1) Seeing your html would be helpful (2) Doctypes are important, and direct the browser on how to interpret the html and css. Be sure to choose the appropriate doctype for your html. — random_user_name, Mar 06 '12 at 17:43
I've added the html code, and i've tried all the doctypes but every one seems to mess it up. — user1152440, Mar 06 '12 at 17:51

score 8 · Accepted Answer · answered Mar 06 '12 at 17:42

8

No doctype == quirks mode. The layout behavior in the quirks/strict modes at times differs drastically.

answered Mar 06 '12 at 17:42

Alexander Pavlov

31,598
5
67
93

score 2 · Answer 2 · answered Mar 06 '12 at 17:55

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>

score 0 · Answer 3 · answered Mar 06 '12 at 17:44

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.

score 0 · Answer 4 · answered Mar 06 '12 at 17:46

0

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;
 }

answered Mar 06 '12 at 17:46

thescientist

2,906
1
20
15

Adding Doctype Destroys Layout

EDIT:

4 Answers4

Linked