i'm coding a website for some friends where i'm using ddsmoothmenu for dropdowns.. BUT now it there's a weird spacing between the header and top of the body, and it only appears on some pages.. It is very weird, and when checking it out through chromes developer options, i simple cannot find the reason for this spacing. BTW, i'm using 960 gs. The header gradient is body background image.
EDIT
I now know WHAT the problem is. Everything in the head tag gets moved into body, on the pages with weird spacing. I have no idea why or how.
No weird spacing, exactly as it should be. https://i.stack.imgur.com/fuQMK.jpg
Weird spacing! https://i.stack.imgur.com/u5zQB.png
Here is the rendered source of one of the pages without the 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 and 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 to "h" or "v"
classname: 'ddsmoothmenu', //class added to 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;">
You can also get the same effect as the caption with:
</div>
<div class="elemHover button fromTop" data-easing="easeOutExpo" style="left:388px; bottom:78px;">
A button
</div>
<div class="elemHover button button2 fromBottom" data-easing="easeOutExpo" style="left:512px; bottom:78px;">
Or two 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 any other html element...<br>
and you can decide the transition time of any 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">
You can also display videos, but it requires a "fake image"... read the 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>
