I’m working on an opensource fluid html layout that uses jQuery too. There is one issue that has been driving me nuts as I was unable to solve the problem for the past few hours. I’m sure I’m missing something that is rather simple, if you could help me find it I would appreciate it.
The problem is when I try to make the div#content-wrapper have a min-height and margin-left/margin-right. Basically it should fill the page and have some spaces to the left and right.
It looks fine when it is viewed in the work space of cssdeck http://cssdeck.com/labs/fluid-html-template however when you go to view in full screen at http://cssdeck.com/labs/full/fluid-html-template/0, on Chromium Developer Tools (F12) I see that #content-wrapper class isn’t matched for div#content-wrapper style rule under Matched CSS Rules. What could be causing this? The only way I found to override this was to apply style directly to the div tag with the style attribute.
Since the template was written in jade-lang here is the computed html, JavaScript and CSS codes to make things easier.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="https://github.com/WeaponXI/cplog/raw/master/public/javascripts/jquery.js"></script>
<script type="text/javascript" src="https://raw.github.com/WeaponXI/cplog/master/public/javascripts/jquery-ui-1.9.1.custom.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WeaponXI</title>
</head>
<body>
<div class="wrapper">
<div class="top-nav ui-widget-header">Home | Login | Etc</div>
<div class="header">
<div class="logo"></div>
<div class="menu ui-widget-header">
<div id="menu">
<ul>
<li> <a href="/" title="Home"> Home</a>
<ul>
<li> <a href="/users" title="Users"> Users</a>
</li>
<li> <a href="/users2" title="Users"> Users</a>
</li>
</ul>
</li>
<li> <a href="/cplog" title="Captains Logs"> Captains Logs</a>
</li>
<li> <a href="/contact" title="Contact"> Contact</a>
</li>
</ul>
</div>
</div>
</div>
<div class="left-panel"></div>
<div id="content-wrapper" class="ui-widget-content ui-corner-all">
<div id="content">Content</div>
</div>
<div class="right-panel"></div>
<div class="bottom-panel"></div>
</div><!--
<end>wrapper</end>-->
<footer>
<div id="footer"><em>Copyright © 2013 WeaponXI.com</em></div>
</footer>
</body>
</html>
CSS:
body, html {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
}
.top-nav {
z-index:0 !important;
padding:4px;
background-color:#333;
color:white;
font-size:0.8em;
opacity:0.6;
}
.top-nav:hover {
opacity:0.9;
}
.header {
height: 200px;
background: #fff;
overflow: hidden;
display: block;
}
.logo {
/*width: 451px;*/
height:130px;
background-image:url(https://github.com/WeaponXI/cplog/raw/master/public/images/logo.png);
background-position:center center;
background-repeat:no-repeat;
}
.menu {
z-index:0 !important;
position:relative;
text-align: left;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
margin-top:5px;
margin-bottom:5px;
width:100%;
height:30px;
font-size : 0.7em;
}
.ui-menu { position: absolute; width: 100px;}
#content-wrapper {
width:auto;
margin-left:20px;
margin-right:20px;
min-height:600px;
margin-bottom:20px;
}
#content {
padding: 20px;
font:1em;
}
footer {
width: auto;
margin-left:20px;
margin-right:20px;
border-top: thin solid #999;
display: block;
}
#footer {
padding:10px;
font-size:0.8em;
}
JavaScript: (This only handles the menu)
$(function() {
$(document.createElement('div')).attr('id', 'menu-p').appendTo('#menu');
$(document.createElement('div')).attr('id', 'menu-c').appendTo('#menu');
$('#menu > ul').children('li').children('a').each(function(i) {
$(this).attr('id', 'menu-p-' + i).parent().children('ul').attr('id', 'menu-c-' + i).appendTo('#menu-c');
$(this).appendTo('#menu-p').parent().parent().children('ul').remove();
});
var shownmenu;
$('#menu-p').children('a').each(function() {
var n = $(this).attr('id').split('-')[2];
var button = $(this);
if ($('#menu-c-' + n).length) {
button.button({
text: true,
icons: {
secondary: "ui-icon-triangle-1-s"
}
}).hover(function() {
$('#menu-c-' + n).show().position({
my: "left top",
at: "left bottom",
of: this
});
}, function() {
$('#menu-c-' + n).hover(function() {
$('#menu-c-' + n).show();
}, function() {
$('#menu-c-' + n).hide();
});
$('#menu-c-' + n).hide();
});
$('#menu-c-' + n).hide().menu();
}
else {
button.button();
}
});
$('#menu-p').buttonset();
});
The problem wasn’t in the syntax. There was a character that was pasted from either jsfiddle or cssdeck. Which prevented the css rule after that special character from being read. I have copy pasted that character and it is:
U+200B ZERO WIDTH SPACE (That is Unicode U+hex notation)
I used http://rishida.net/tools/conversion/ to find out what that character was.