html - Space above header in ddsmoothmenu -
html - Space above header in ddsmoothmenu -
i'm coding website friends i'm using ddsmoothmenu dropdowns.. there's weird spacing between header , top of body, , appears on pages.. weird, , when checking out through chromes developer options, simple cannot find reason spacing. btw, i'm using 960 gs. header gradient body background image.
editi know problem is. in head tag gets moved body, on pages weird spacing. have no thought why or how.
no weird spacing, should be. http://i.imgur.com/5cl7w.jpg
weird spacing! http://i.imgur.com/7gldl.png
here rendered source of 1 of pages without error:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="icon" type="image/png" href="img/favicon.ico" /> <title>armilla - forside</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" > <meta name="viewport" content="width=960"> <!--//////////////////// //imports - js , css// /////////////////////--> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/text.css" /> <link rel="stylesheet" href="css/960.css" /> <link rel='stylesheet' id='style-css' href='css/diapo.css' type='text/css' media='all'> <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" /> <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu-v.css" /> <script type='text/javascript' src='js/jquery.min.js'></script> <!--[if !ie]><!--><script type='text/javascript' src='js/jquery.mobile-1.0rc2.customized.min.js'></script><!--<![endif]--> <script type='text/javascript' src='js/jquery.easing.1.3.js'></script> <script type='text/javascript' src='js/jquery.hoverintent.minified.js'></script> <script type='text/javascript' src='js/diapo.js'></script> <script type='text/javascript' src='js/ddsmoothmenu.js'></script> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!--/////// //init js// ////////--> <script> ddsmoothmenu.init({ mainmenuid: "menu", //menu div id orientation: 'h', //horizontal or vertical menu: set "h" or "v" classname: 'ddsmoothmenu', //class added menu's outer div //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }); </script> </head> <body> <div id="header" class="container_12"> <div id="logo" class="grid_5"> <a href="index.php"> <img src="img/logo.png" width="226" height="65"/> </a> </div> <div id="nav" class="grid_7"> <div id="menu" class="ddsmoothmenu"> <ul> <li id="prodli"><a href="?p=products"><img src="img/produkter.png"/></a> <ul style="z-index: 1;"> <li><a href="?p=prod$type="armb�nd">armb�nd</a></li><li><a href="?p=prod$type="overlevelsesudstyr">overlevelsesudstyr</a></li> </ul> </li> <li><a href="?p=armilla"><img src="img/armilla.png"/></a></li> <li><a href="?p=news"><img src="img/nyheder.png"/></a></li> <li><a id="lasta" href="?p=contact"><img src="img/kontakt.png"/></a></li> </ul> <br style="clear: left" /> </div> </div> </div> <section> <div style="overflow:hidden; width:960px; margin: auto auto; padding:0 20px;"> <div class="pix_diapo"> <div data-thumb="img/thumbs/megamind_07.jpg"> <img src="img/slides/megamind_07.jpg"> <div class="caption elemhover fromright" style="bottom:65px; padding-bottom:5px; color:#ccc; text-transform:uppercase"> armilla </div> <div class="caption elemhover fromleft" style="padding-top:5px;"> verdensklasses overlevelsesudstyr.tjek vores nye <a href="?p=products">produkter</a> ud </div> </div> <div data-thumb="img/thumbs/wall-e.jpg" data-time="7000"> <img src="img/slides/wall-e.jpg"> <div class="elemhover caption fromleft" style="bottom:70px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px;"> can same effect caption with: </div> <div class="elemhover button fromtop" data-easing="easeoutexpo" style="left:388px; bottom:78px;"> button </div> <div class="elemhover button button2 frombottom" data-easing="easeoutexpo" style="left:512px; bottom:78px;"> or 2 buttons </div> <div class="elemhover fadein" style="left:600px; bottom:auto; top:0; padding-top:50px; color:#ff0; font-size:13px; line-height:20px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; background:url(img/demo/arrow_caption.png) no-repeat 230px 30px"> or other html element...<br> , can decide transition time of slide </div> </div> <div data-thumb="img/thumbs/up-official-trailer-fake.jpg"> <iframe width="940" height="470" src="http://www.youtube.com/embed/qas5lwp7_r0?wmode=transparent&autoplay=1" data-fake="img/slides/up-official-trailer-fake.jpg" frameborder="0" allowfullscreen></iframe> <div class="elemhover caption fromleft elemtohide" style="bottom: 350px; width:auto; -webkit-border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; left:0"> can display videos, requires "fake image"... read documentation please </div> </div> </div><!-- #pix_diapo --> </div> </section> <script> $(function(){ $(".pix_diapo").diapo(); }); </script> <div id="footer" class="container_12"> <div style="text-align:center; color:#333333;" id="copyright" class="grid_12"> <p>copyright 2012 © - armilla.dk - alle rettigheder forbeholdt armilla - <a href="?p=admin">kontrolpanel</a> - <a href="?p=logout">log ud</a> <br />webdesign af <a href="http://www.doweb.dk" target="_blank">doweb</a></p> </div> </div> </body> </html>
it might white-space issue, html, css looks on paper (in chrome developer), isn't interpreted should be. detect, if case, uglify html , strip whitespace in html problem area.
if turns out true, here various approaches topic, though of 'em have little drawbacks (long uglified html lines, unnecessary comments, uncommon line breaks, ..).
html css margin spacing
Comments
Post a Comment