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 \[code\]min-height\[/code\] and \[code\]margin-left\[/code\]/\[code\]margin-right\[/code\]. 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 \[code\]#content-wrapper\[/code\] class isn't matched for \[code\]div#content-wrapper\[/code\] style rule under \[code\]Matched CSS Rules\[/code\]. What could be causing this? The only way I found to override this was to apply style directly to the \[code\]div\[/code\] tag with the \[code\]style\[/code\] attribute. Since the template was written in jade-lang here is the computed html, JavaScript and CSS codes to make things easier.HTML:\[code\]<!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="http://stackoverflow.com/" title="Home"> Home</a> <ul> <li> <a href="http://stackoverflow.com/users" title="Users"> Users</a> </li> <li> <a href="http://stackoverflow.com/users2" title="Users"> Users</a> </li> </ul> </li> <li> <a href="http://stackoverflow.com/cplog" title="Captains Logs"> Captains Logs</a> </li> <li> <a href="http://stackoverflow.com/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>\[/code\]CSS:\[code\]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;}\[/code\]JavaScript: (This only handles the menu)\[code\]$(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();});\[/code\]
Css Style isn't matching or refusing to match the element
- Thread starter syncaxosy
- Start date