what I see in DW is different from what I see in the browser... why?

When I per view is my page in the browser works very well but just not DW works with me... why?

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

" < html xmlns =" http://www.w3.org/1999/xhtml ">

< head >

the Visual monarchy < title > < /title >

< link href = "css/style.css" rel = "stylesheet" type = "text/css" / > "

< / head >

< body >

< div id = "content" >

< div id = "logo2" > < a href = "index.html" > < img src = images/logo01.gif"" alt = "logo" border = "0" / > < / has > < / div > "

< div class = 'navi' >

< p > < span class = "naviOn" > work </span > / < a href = "about.html" > on < /a > / < a href = "mailto: " [email protected] "> contact < /a > < /p > .

< / div >

< div class = "navi02" > < / div >

< div id = 'hand' >

< div class = "atticNEW" > < a href = "work_mullusSynergy.html" > < img src = images/project1.jpg"" alt = "Project1" border = "0" width = "200" height = "90" / > "

< class p = "head" > Heading1 < /p >

< class p = "sub" > Sub1 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_mullusSynergy.html" > < img src = images/project2.jpg"" alt = "project2" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head2 < /p >

< class p = "sub" > Sub2 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_mullusSynergy.html" > < img src = images/project3.jpg"" alt = "Project3" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head3 < /p >

< class p = "sub" > Sub3 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_forza_interstellar .html" > < img src = "images/project4.jpg" alt = "project4" border = "0" width = "200" height = "90" / > "

< class p = "head" > public4 < /p >

< class p = "sub" > Sub4 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_forza_anaroland.html" > < img src = images/project5.jpg"" alt = "project5" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head5 < /p >

< class p = "sub" > Sub5 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_forza_comeback.html" > < img src = images/project6.jpg"" alt = "MDP6" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head6 < /p >

< class p = "sub" > Sub6 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_forza_loveboat.html" > < img src = images/project7.jpg"" alt = "project7" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head7 < /p >

< class p = "sub" > Sub7 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_forza_silvestra.html" > < img src = images/project8.jpg"" alt = "project8" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head8 < /p >

< class p = "sub" > Sub8 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_loslogos.html" > < img src = images/project9.jpg"" alt = "project9" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head9 < /p >

< class p = "sub" > Sub9 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_400ml.html" > < img src = images/project10.jpg"" alt = "project10" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head10 < /p >

< class p = "sub" > Sub10 < /p >

< /a > < / div >

< div class = "atticNEW" > < a href = "work_lamm_hbp.html" > < img src = images/project11.jpg"" alt = "locationacquisition11" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head11 < /p >

< class p = "sub" > Sub11 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_tinger.html" > < img src = images/project12.jpg"" alt = "project12" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head12 < /p >

< class p = "sub" > Sub12 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_forza_juicy.html" > < img src = images/project13.jpg"" alt = "project13" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head13 < /p >

< class p = "sub" > Sub13 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_fbwl_hotsauce.html" > < img src = images/project14.jpg"" alt = "CarboAfrica14" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head14 < /p >

< class p = "sub" > Sub14 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_bust.html" > < img src = images/project15.jpg"" alt = "projet15" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head15 < /p >

< class p = "sub" > Sub15 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_jb.html" > < img src = images/project16.jpg"" alt = "project16" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head16 < /p >

< class p = "sub" > Sub16 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_owerkHH.html" > < img src = images/project17.jpg"" alt = "project17" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head17 < /p >

< class p = "sub" > Sub17 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_mullus.html" > < img src = images/project18.jpg"" alt = "Recherche18" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head18 < /p >

< class p = "sub" > Sub18 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_ads.html" > < img src = images/project19.jpg"" alt = "project19" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head19 < /p >

< class p = "sub" > Sub19 < /p >

< /a > < / div >

< div class = "breadbasket" > < a href = "work_soundbombing.html" > < img src = images/project20.jpg"" alt = "project20" border = "0" width = "200" height = "90" / > "

< class p = "head" > Head20 < /p >

< class p = "sub" > Sub20 < /p >

< /a > < / div >

< div id = "bottom" >

< hr noshade = "noshade" size = "1" / >

Copyright Visual monarchy 2000-2009 < /p > < p >

"< id p = 'above' > < a href =" "id ="logo"> < img src =" images/button_top.gif "alt ="upward"border ="0"width ="22"height ="17"border ="0"/ > < /a > < /p >

< / div >

< / div >

< / div >

< / body >

< / html >

{body

background-color: #1E1E1E;

padding: 0;

text-align: left;

}

{p}

color: #666666;

are-family: Helvetica, Verdana, Arial, without serif.

are-size: 12px;

police-weight: normal;

margin: 0;

padding: 0;

}

p #above {}

margin: 10px 0 0;

padding: 0;

}

p #copy {}

color: #999999;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

line-height: 18px;

margin: 0 30px 0;

padding: 0;

}

H1 {}

color: #888888;

are-family: Helvetica, Verdana, Arial, without serif.

are-size: 68px;

make-style: normal;

make-weight: bold;

letter-spacing:-2px;

margin: 0;

padding: 0;

}

H2 {}

color: #B7EEE7;

are-family: Times, serif;

are-size: 20px;

make-style: italic;

police-weight: normal;

margin: 0 0 10px;

padding: 0;

}

/ * tr, td {}

color: #999999;

are-family: Helvetica, Verdana, Arial, without serif.

are-size: 11px;

police-weight: normal;

height: 18px;

margin: 0 30px 0;

padding: 0;

}*/

. New {}

clear: right;

color: #FFCC00;

are-family: Times, serif;

are-size: 17px;

make-style: italic;

police-weight: normal;

margin: 0 3px 8px 8px;

padding: 0;

}

a {}

color: #B7EEE7;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

line-height: 18px;

margin: 0;

padding: 0;

text-decoration: none;

}

a: hover {}

color: #B7EEE7;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

line-height: 18px;

margin: 0;

padding: 0;

text-decoration: underline;

}

{.attic}

float: left;

height: 160px;

margin: 0;

padding: 1px;

text-align: left;

width: 216px;

}

. Attic a {}

float: left;

height: 160px;

margin: 0;

position: relative;

text-decoration: none;

top: 0;

width: 216px;

}

. Attic a: hover {}

background-color: #525252;

}

. Attic img {}

border-style: none;

float: left;

margin: 8px;

padding: 0;

position: relative;

}

. Attic p.head {}

color: #B7EEE7;

are-family: Times, serif;

are-size: 17px;

make-style: italic;

police-weight: normal;

margin: 0 3px 8px 8px;

padding: 0;

}

. Attic p.sub {}

color: #8A8A8A;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

margin: 0 8px 8px;

padding: 0;

}

{.atticNEW}

float: left;

height: 160px;

margin: 0;

padding: 1px;

text-align: left;

width: 216px;

}

.atticNEW a {}

background-color: #323232;

float: left;

height: 160px;

margin: 0;

position: relative;

text-decoration: none;

top: 0;

width: 216px;

}

.atticNEW a: hover {}

background-color: #525252;

}

.atticNEW img {}

border-style: none;

float: left;

padding: 0;

margin: 8px;

position: relative;

}

.atticNEW p.head {}

color: #B7EEE7;

are-family: Times, serif;

are-size: 17px;

make-style: italic;

police-weight: normal;

padding: 0;

top of the margin: 8px;

right margin: 0;

margin-bottom: 3px;

margin left: 8px;

}

.atticNEW p.sub {}

color: #8A8A8A;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

margin: 0 8px 8px;

padding: 0;

}

/*

{#workBox}

clear: left;

float: left;

margin: 0;

padding: 0;

position: relative;

width: 850px;

}

. Sample {}

float: left;

margin: 0;

padding: 0;

position: relative;

width: 550px;

}

. Sample img {}

border-style: none;

margin: 0 0 10px;

padding: 0;

}

{.sampleTxt}

clear: both;

margin: 2px 0 0 565px;

padding: 0;

position: absolute;

width: 230px;

}

.sampleTxt p.head {}

color: #B7EEE7;

are-family: Times, serif;

are-size: 17px;

make-style: italic;

police-weight: normal;

margin: 8px;

padding: 0;

}

.sampleTxt p.sub {}

color: #999999;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

line-height: 18px;

margin: 0 8px 8px;

padding: 0;

}

.sampleTxt a {}

color: #B7EEE7;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

line-height: 18px;

margin: 0;

padding: 0;

text-decoration: none;

}

.sampleTxt a: hover {}

color: #B7EEE7;

are-family: Helvetica, Verdana, without serif.

are-size: 11px;

make-style: normal;

police-weight: normal;

line-height: 18px;

margin: 0;

padding: 0;

text-decoration: underline;

}*/

{.navi}

margin: 0 0 0 8px;

padding: 0;

text-align: left;

}

. Navi a: link {}

color: #6F6F6F;

are-family: Helvetica, Verdana, Arial, without serif.

font-size: 24 PX.

police-weight: normal;

letter-spacing: 1px;

margin-left: 0;

text-decoration: none;

}

. Navi a: visited {}

color: #6F6F6F;

are-family: Helvetica, Verdana, Arial, without serif.

font-size: 24 PX.

police-weight: normal;

letter-spacing: 1px;

margin-left: 0;

text-decoration: none;

}

. Navi a: hover {}

color: #96CBC4;

are-family: Helvetica, Verdana, Arial, without serif.

font-size: 24 PX.

police-weight: normal;

letter-spacing: 1px;

margin-left: 0;

text-decoration: none;

}

. Navi a: active {}

color: #CCCCCC;

are-family: Helvetica, Verdana, Arial, without serif.

font-size: 24 PX.

police-weight: normal;

letter-spacing: 1px;

margin-left: 0;

text-decoration: none;

}

. Navi p {}

color: #1E1E1E;

are-family: Helvetica, Verdana, Arial, without serif.

font-size: 24 PX.

police-weight: normal;

}

{.naviOn}

color: #B7EEE7;

are-family: Helvetica, Verdana, Arial, without serif.

font-size: 24 PX.

police-weight: normal;

letter-spacing: 1px;

}

{.navi02}

height: 25px;

margin: 10px 0 10px 8px;

padding: 0;

text-align: left;

}

.navi02 img {}

float: left;

margin: 0 0 5px 20px;

padding: 0;

position: relative;

}

#content {}

margin: 0;

padding: 10px;

text-align: left;

}

#logo {}

margin: 0 0 0 8px;

padding: 0;

text-align: left;

}

{#logo2}

border-style: none;

margin: 0 20px 15px 10px;

padding: 0;

position: relative;

}

#main {}

margin: 0 0 0 8px;

padding: 0;

text-align: left;

}

{#bottom}

clear: both;

margin: 0 0 0 0;

padding: 0;

text-align: left;

}