CODEWITHSUNDEEP
csshtml
user1152440
user1152440

Reputation: 905

Adding Doctype Destroys Layout

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

Upvotes: 5

Views: 3850

Answers (4)

w3uiguru
w3uiguru

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

thescientist
thescientist

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

Harti
Harti

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

Alexander Pavlov
Alexander Pavlov

Reputation: 32306

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

Upvotes: 8

Related Questions