Solved

which DOCTYPE to use?

Posted on 2011-09-28
5
290 Views
Last Modified: 2012-05-12
I have the following html:

<html>
<head>
<title>Test div</title>
</head>
<body>
<DIV>

<div id=MbrMenu style="z-index:2; position:absolute; top:185; left:180; visibility: visible">
HELLO WORLD!
</div>

</DIV>
</body>
</html>

If I use no DOCTYPE, or if I use: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">, this html displays just fine (IE 8 and Firefox 6.0.2). The text in the MbrMenu div displays at the desired 180,185 position. However, if I use:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

the top/left directives are ignored and the text displays at the upper left (0,0).

I thought this latter DOCTYPE was more up-to-date and I have been using it extensively for quite a while. Lately, I had to modify a program using the absolute placed DIVs and replaced the previous DOCTYPE with the latter.

Has something changed in the z-index/positioning specifications? Is this doctype incorrect? If so, what *should* I be using?I need urgent help on this because I have a whole series on pop-down sub-menus that rely on the ability to position things on the page.
0
Comment
Question by:jmarkfoley
  • 3
  • 2
5 Comments
 
LVL 11

Expert Comment

by:MacAnthony
Comment Utility
Add 'px' to the end of the positions:

<html>
<head>
<title>Test div</title>
</head>
<body>
<DIV>

<div id=MbrMenu style="z-index:2; position:absolute; top:185px; left:180px; visibility: visible">
HELLO WORLD!
</div>

</DIV>
</body>
</html>

Open in new window

0
 
LVL 11

Expert Comment

by:MacAnthony
Comment Utility
Basic reason it doesn't work with the xhtml doctype is that if you don't have a valid doctype (which your other doctype is not), then browsers will render the document in what is called 'quirks mode'. This means it is much more lenient and liberal with what it allows as acceptable syntax. If you put a valid doctype in, the browser my be a lot more stubborn as to what it allows for syntax. Requiring a measurement increment on some css attributes is just one of those pieces of syntax.
0
 
LVL 1

Author Comment

by:jmarkfoley
Comment Utility
MacAnthony: adding the px worked.

in your 36720631 post, are you saying that the doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

is wrong? If so, what would you recommend?
0
 
LVL 11

Accepted Solution

by:
MacAnthony earned 500 total points
Comment Utility
Sorry if I wasn't clear. I meant the <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> doctype wasn't valid. Saying that isn't valid isn't entirely true, but it is missing some attributes like the version. The xhtml one appears to be correct which is why it would break your page. A list of valid doctypes can be found here:

http://www.w3.org/QA/2002/04/valid-dtd-list.html
0
 
LVL 1

Author Closing Comment

by:jmarkfoley
Comment Utility
Thank! the "px" thing just didn't occur to me, tho' it should have!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now