Solved

CSS: why do these <div> show inside <body>? pls take a look

Posted on 2011-02-17
4
182 Views
Last Modified: 2012-05-11
Hello Experts,

Please look at the code below, why do these <div> show inside <body> when looking at the source code?

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

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<!-- CSS -->
<style>
#bg {background: #9E1110; height:4px; margin: 0px 0px 0px 0px; }
#bg2 {background: #dddddd; height:2px; margin: 0px 0px 0px 0px; }
</style>

</head>

<div id="bg"> 	</div>
<div id="bg2">	</div>

<body>
  <nav>
    <menu>
       <div id="top"> top menu </div>
    </menu>
    <banner>
       <div id="banner"> banner here </div>
    </banner>
    <menu>
        <div id="menu"> mainMenu</div>
    </menu>
    <breadcrumbs>
    	<div id="pathway"> pathway </div>
    	<div id="separator"></div>
    </breadcrumbs>
  </nav>
  
  <section>
    <div id="content"> content here</div>
    <div id="right"> right content here </div>
  </section>
  
  <ads>
    <div id="ads"> ads here </div>
  </ads>

  <footer>
    <div id="footer"> footer </div>
  </footer>
</body>

Open in new window

0
Comment
Question by:epifanio67
  • 2
4 Comments
 
LVL 28

Accepted Solution

by:
sammySeltzer earned 250 total points
ID: 34920553
i don't understand your question though.

See screenshot
untitled.JPG
0
 
LVL 12

Assisted Solution

by:Amick
Amick earned 250 total points
ID: 34920574
It should work now:

<!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>
<title>test</title>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- CSS -->

<style type="text/css">
#bg {background: #9E1110; height:4px; margin: 0px 0px 0px 0px; }
#bg2 {background: #dddddd; height:2px; margin: 0px 0px 0px 0px; }
</style>

<style type="text/css">
/*<![CDATA[*/
 div.c1 {margin-left: 2em}
/*]]>*/
</style>
</head>

<body>
	<div id="bg"></div>
	<div id="bg2"></div>
	<div class="c1" id="top">top menu</div>
	<div id="banner">banner here</div>
	<div class="c1" id="menu">mainMenu</div>
	<div id="pathway">pathway</div>
	<div id="separator"></div>
	<div id="content">content here</div>
	<div id="right">right content here</div>
	<div id="ads">ads here</div>
	<div id="footer">footer</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:epifanio67
ID: 34920618
thank you experts....
0
 
LVL 12

Expert Comment

by:Amick
ID: 34920846
I apologize, I may have misunderstood your question.

The code you posted is mal-formed XHTML, but more reasonable HTML 5.  The <div>'s can't legally exist outside the <body> and your browser was making its best attempt at trying to render a reasonable page.  

You may want to see if there's a way to hint HTML 5 for  "< IE9"  browsers in order to help them understand what you intend with that code.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

740 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