is messing up
element

Question

Without <!doctype html> it is shown correctly:

With <!doctype html> li element is moved to the left side:

Same result in Firefox and IE.

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="content-wrapper">
<li>Title - <a href='#'>[Edit]</a> | <a href='#'>[Delete]</a></li>
</div>
</body>
</html>

CSS:

body {
    margin: 0px;
}

h1, h2, h3{
    margin: 0px;
}  

#content-wrapper {
    margin-left: 200px;
    padding-top: 12px; 
}

How could I avoid this?

you must use ` `. Fix your html, read [here](http://stackoverflow.com/questions/6076432/why-do-i-need-a-doctype-what-does-it-do) why you use it — Manish Mishra, Aug 07 '15 at 10:50

score 2 · Accepted Answer · answered Aug 07 '15 at 11:05

The basic problem is that your HTML is invalid. Use a validator.

<li> items are not allowed to be child elements of a <div>. They must be part of a list.

In Quirks mode (which you get when you fail to supply a Doctype), browsers apply CSS that looks something like this:

/* Quirk: make orphaned LIs have inside bullet (b=1049) */

/* force inside position for orphaned lis */
li {
  list-style-position: inside;
}

/* restore outside position for lists inside LIs */
li ul, li ol, li dir, li menu {
  list-style-position: outside;
}

/* undo previous two rules for properly nested lists */
  ul ul,   ul ol,   ul dir,   ul menu,   ul li,
  ol ul,   ol ol,   ol dir,   ol menu,   ol li,
 dir ul,  dir ol,  dir dir,  dir menu,  dir li,
menu ul, menu ol, menu dir, menu menu, menu li {
  list-style-position: inherit;
}

source

You could include that CSS in your stylesheet so it gets applied even in standards mode, but you should fix your markup and write valid HTML.

While you are at it, you should probably look at writing more semantic HTML. If you have a series of things with a name, an edit link, and a delete link … then your data is more tabular than listy.

score 1 · Answer 2 · answered Aug 07 '15 at 12:16

Try this, with the DOCTYPE capitalised and the list items within an unordered list:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div id="content-wrapper">
      <ul>
        <li>Title - <a href='#'>[Edit]</a> | <a href='#'>[Delete]</a></li>
      </ul>
    </div>
  </body>
</html>

I have had similar issues in the past when using a lowercase <!doctype html>, but never had the same issues with <!DOCTYPE html>

is messing up element

2 Answers2

is messing up
element