stackoom
  简体   繁体   中英

when inserting a doctype html content will not show

 原文  2012-10-22 13:45:14  2   2    html/ xhtml/ dtd

Question

I had problem in showing my html/css document in internet explorer,it is working well in fire fox and chrome,so I guess that it is because I didn't insert any doctype,when I insert the doctype of xhtml or html it is not working,it will show just my header section,what should I include for doctype?

I tried this one: 

    <!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" />

and it is not working.here is my code which is working: 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>bazar</title>
<style type="text/css">

#container {
width: 770px;
margin: 0 auto
}
#main
{
width:100%;
height:100%;
up:0;
bottom:0;
margin:0;
}
#header
{
position:fixed;
background:url(header_slice.png);
repeat x;
width:100%;
height:63px;
top:0;
left:0;
right:0;
}
#logo
{
position:fixed;
background:url(logo.png);
width:192;
height:59;
float:right;
left:900;
}
#mymenu
{
position:fixed;
background:url(menu.png);
width:302;
height:19;
top:30;
left:122.5;
overflow:auto;
}
#mytext
{
position:fixed;
background:url(textbox.png);
width:257;
height:20;
top:30;
left:460;
}
#nav{
position:absolute;
background:url(navigation_slice.jpg);
repeat x;
width:100%;
height:148;
top:63;
z-index:1000;
left:0;
right:0;
}
#mycontainer
{
position:absolute;
background:white;
repeat x;
repeat y;
width:100%;
height:1281;
top:210;
left:0;
right:0;
}
#menu2
{
position:absolute;
background:url(navbar.png);
repeat x;
width:952;
height:67;
top:40;
left:125;
}
#home
{
position:absolute;
background:url(home.png);
width:52;
height:36;
top:30;
left:0;
}
#pencil{
position:absolute;
background:url(pencil.png);
width:39;
height:42;
top:7;
right:23;
}
#archive{
position:absolute;
background:url(archive.png);
width:38;
height:37;
top:7;
right:110;
}
#sep1{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:78;
}
#sep2{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:173;
}
#sep3{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:284;
}
#sep4{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:388;
}
#sep4{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:459;
}
#sep4{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:386;
}
#sep5{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:459;
}
#sep6{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:526;
}
#sep7{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:596;
}
#sep8{
position:absolute;
repeat y;
width:2;
height:67;
top:0;
right:670;
}
.sep{
background:url(sep.png);
}
#seminar
{
position:absolute;
background:url(seminar.png);
right:204;
width:45;
height:33;
top:7;
}
#learn
{
position:absolute;
background:url(learning.png);
right:312;
width:44;
height:36;
top:7;
}
#art{
position:absolute;
background:url(art.png);
width:45;
height:40;
top:5;
right:400;
}
#engineer{
position:absolute;
background:url(engineer.png);
width:54;
height:36;
top:7;
right:470;
}
#publish{
position:absolute;
background:url(publish.png);
width:49;
height:38;
top:7;
right:539;
}
#new{
position:absolute;
background:url(new.png);
width:36;
height:31;
top:7;
right:610;
}
#contact
{
position:absolute;
background:url(contact.png);
width:178;
height:58;
top:17;
right:610;
left:125;
}
#rect1
{
width:716;
height:308;
top:-35;
left:125;
}
#rect2
{
width:226;
height:308;
top:-35;
left:850;
}
.rect
{
position:absolute;
background:url(rect.png);
repeat x;
repeat y;
}
#special
{position:absolute;
background:url(special.png);
width:696;
height:255;
top:-30;
left:132;
z-index:1000;
}
#chasb
{
position:absolute;
background:url(chasb.png);
width:56;
height:62;
top:50;
right:300;
z-index:1000;
}


#takhte
{
position:absolute;
background:url(takhte.png);
width:51;
height:58;
top:170;
right:300;
z-index:1000;
}
#sabad1{
position:absolute;
width:80;
height:17;
top:210;
right:370;
z-index:1000;
}
#sabad2{
position:absolute;
width:80;
height:17;
top:90;
right:370;
z-index:1000;
}
.sabad
{
background:url(sabad.png);
}

#left
{
position:absolute;
background:url(slideleft.png);
top:280;
left:125;
width:20;
height:69;
z-index:2000;
}
#right
{
position:absolute;
background:url(slideright.png);
top:280;
left:822;
width:17;
height:69;
z-index:2000;
}
#slide
{
position:absolute;
top:280;
left:125;
width:716;
height:69;
z-index:1500;
}
#staff
{
position:absolute;
background:url(staff.png);
width:228;
height:70;
top:280;
z-index:1000;
left:850;
}
#mybox
{
position:absolute;
background-color: white;
top:0;
left:865;
width:200;
height:260;
z-index:900;
}
#product
{
position:absolute;
background:url(products.png);
width:200;
height:76;
top:-30;
left:865;
z-index:1000;
}
</style>
</head>
<body>
<div id='main'>
<div id='header'>
<div id='logo'></div>
<div id='mymenu'></div>
<div id='mytext'></div>
<div id='nav'>
<div id='menu2'>
        <div id='home'></div><div id="pencil"></div>
        <div id="sep1" class="sep"></div><div id="archive"></div>
        <div id="sep2" class="sep"></div><div id="seminar"></div>
        <div id="sep3" class="sep"></div><div id="learn"></div>
        <div id="sep4" class="sep"></div><div id="art"></div>
        <div id="sep5" class="sep"></div><div id="engineer"></div>
        <div id="sep6" class="sep"></div><div id="publish"></div>
        <div id="sep7" class="sep"></div><div id="new"></div><div id="sep8" class="sep"></div>
</div>
<div id='contact'></div>
</div>

</div>

<div id='mycontainer'>

<div id='rect1' class='rect'></div>
<div id='rect2' class='rect'></div>
<div id='special'></div>
<div id='chasb'></div><div id='takhte'></div><div id='sabad1' class="sabad"></div><div id='sabad2' class="sabad"></div>
<div id='mybox'></div>
<div id='product'></div>
<div id='staff'></div>
<div id='slide' class="rect"></div>
<div id='left'></div><div id='right'></div>
</div>

</div>

</body>
</html>

as I said by including doctype it will just show the header

2 answers

solution1
 1  2012-10-22 15:59:34

The page has a large number of CSS errors. When you have no doctype, the page is processed in Quirks Mode , which means that browsers emulate old, broken versions of IE. Adding a doctype broke this. For example, any length expressions without unit, except 0, are ignored then.

You need to decide whether you wish to fix (or rewrite) the code to comply with HTML and CSS specifications or to play with Quirks Mode.

solution2
 0  2012-10-22 15:13:29

The only DOCTYPE that should be used is <!DOCTYPE html> .

I suspect that it is the lack of units. I'd guess that IE doesn't use the default value of px here.

width , height , left and top should all have units, try adding a px onto each of those. z-index doesn't need that of course.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Content overlapping when change doctype from HTML to XHTML Embedding Content (iframes) with an HTML 4.01 doctype? Inserting dynamic html content jQuery .html() not inserting content Added pixels when changing doctype from HTML 4 to 5 “Height=100%” is not working in html when using <!DOCTYPE>? unwanted borders when I use <!DOCTYPE html> HTML shows different DOCTYPE when opening with VIM syntaxhighlighter_3.0.83: theme_tests.html(A DOCTYPE is not allowed in content) Declaring XHTML doctype then using HTML content-type
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM