Related
I have a centered page layout for a website I'm designing, and I've used Ryan Fait's CSS Sticky Footer, but I just can't seem to extend my content div tag (div#container in the code below) down to the footer.
Here's my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MathExplained.com</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<link rel="icon" type="image/ico" href="https://www.iconfinder.com/icons/21328/download/png/24">
</head>
<body>
<div class="wrapper">
<div id="headerbar"><div id="header">
<h1>MathExplained.com</h1>
<div id="nav">
<ul>
<li>Contact</li>
<li>Archives</li>
<li>About</li>
</ul>
</div>
</div></div>
<img id="header-underline" src="files/header-underline.png" alt="" />
<div id="container">
<div id="contentmargin">
<div class="post">
<h2>What Pi Really Means</h2>
<h3>5th September 2013</h3>
<div class="post-content">
<iframe src="https://www.youtube.com/embed/yJ-HwrOpIps" allowfullscreen></iframe>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
<div class="push"></div>
</div>
<div class="footer">
Designed by Riley Wheb <br />
WhebDesigns 2013
</div>
</body>
</html>
...And my CSS (here be dragons):
* {
margin: 0;
}
html,body {
height: 100%;
}
body {
background: url('files/bg2.gif');
display: block;
font-family: Tahoma, Geneva, sans-serif;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -35px; /* the bottom margin is the negative value of the footer's height */
}
div#headerbar {
background: rgba(73,155,234,1);
background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 );
margin: 0;
padding: 0;
}
div#header {
display: block;
height: 38px;
margin: 0 auto;
overflow: hidden;
padding: 0;
width: 750px;
}
div#header > h1 {
float: left;
margin: 0;
padding: 0;
position: relative; top: -2px;
}
div#header > h1 > a:link, div#header > h1 > a:visited {
color: white;
font: 28px/35px "Lucida Console", monospace;
text-decoration: none;
text-shadow: -1px -1px 0 gray;
vertical-align: middle;
}
div#header > h1 > a:hover, div#header > h1 > a:active {
}
div#nav {
float: right;
margin: 0;
padding: 0;
}
div#nav > ul {
height: 100%;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
div#nav > ul > li {
float: right;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
width: 150px;
}
div#nav > ul > li > a:link, div#nav > ul > li > a:visited {
color: white;
display: block;
font: 16px Verdana,sans-serif;
height: 100%;
margin: 0 25px;
padding: 10px 0;
text-decoration: none;
text-shadow: -1px -1px 0 gray;
}
div#nav > ul > li > a:hover, div#nav > ul > li > a:active {
background: -moz-linear-gradient(top, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.25)), color-stop(100%,rgba(255,255,255,0.25))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0.25) 0%,rgba(255,255,255,0.25) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40ffffff', endColorstr='#40ffffff',GradientType=0 ); /* IE6-9 */
}
img#header-underline {
padding: 0; margin: 0;
position: absolute;
top: 38px;
height: 4px;
}
div#container {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
border: 3px solid #D6D6D6;
display: block;
height: 100%;
margin: 0 auto;
width: 800px;
}
div#contentmargin {
padding: 20px 25px;
}
div.post {
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #BDBDBD;
position: relative;
margin: 0 0 60px 0;
padding: 0 10px 20px 10px;
overflow: hidden;
}
div.post > h2 {
font: italic 24px/26px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
letter-spacing: normal;
margin: 15px 0 0 0; padding: 0;
}
div.post > div.post-content {
clear: both;
}
div.post > div.post-content > p {
font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
padding: 5px 0;
}
div.post > h3 {
font: italic 12px/14px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
margin: 0 0 10px 0; padding: 0;
}
iframe {
width: 726px;
height: 416px;
border: 1px inset #BDBDBD;
}
.footer, .push {
height: 35px; /* '.push' must be the same height as 'footer' */
}
div.footer {
background: rgba(0,0,0,0.8);
border-top: 2px solid black;
color: gray;
font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Sans-Serif;
text-align: center;
padding: 10px 0;
}
Here's a screenshot of what it looks like now.
And here's what I would like to achieve.
The .wrapper has height: auto !important; and also 100%. The 100% will be ignored and only the !important will be used.
Delete the auto !important height of the .wrapper element and adjust the footer css. You need to pay attention at the .wrapper margin too!
change the css:
div#contentmargin {
padding: 20px 25px;
height:100%
}
.wrapper {
height: 100%;
}
Have you considered using the <header>, <main> and <footer> tags instead of your current divs? They will automatically scale and fill 100% of your screen.
Here is my page HTML. Below is my CSS for the main navigation styles. IE7 does not display the padding, hover or drop down items. IE8 padding is good, hover works, but drop downs do not display. My code may be a big mess- probably a lot of unnecessary stuff. I've been working with all sorts of suggestions to no avail. So anyone willing to take the time and help me resolve my navigation issue? I will be so incredibly appreciative! I'm hoping there's something obvious here to someone who is much more knowledgeable than myself. Here is the live site. http://www.tortolasportsclub.com/ Also, my animation's down level poster image loads with scroll bars (Adobe Edge Animate). Not sure what's going on there. Have been unable to find a solution for that also.
<!doctype html>
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title></title>
<link href="css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/respond.min.js"></script>
</head>
<body id="home">
<div class="gridContainer clearfix">
<div id="header">
<div id="logo"><img src="images/logo.jpg"></div>
<div id="register">
<span class="button"></span>
</div>
</div>
<div id="nav">
<ul id="menu">
<li>Home </li>
<li>About
<ul>
<li>Committee Members</li>
</ul>
</li>
<li>Sports
<ul>
<li>Squash </li>
<li>Tennis</li>
<li>Gym</li>
<li>Multipurpose</li>
<li>Junior Programs</li>
</ul>
</li>
<li>Clubhouse
<ul>
<li>Restaurant Menu</li>
<li>Events</li>
<li>Staff</li>
</ul>
</li>
<li>News
<ul>
<li>Events</li>
<li>Submit News</li>
</ul>
</li>
<li>Sponsors
<ul>
<li>Become a Sponsor</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="figure"><object id="bannerframe" data="animation/tsc-index-banner.html" width="100%" height="100%"><embed href="tsc-index-banner.html" width="100%" height="100%"></embed></object>
<div id="blktxtbar"></div>
</div>
<div id="section">
<div id="article1"></div>
<div id="article3"></div>
</div>
<div id="footer-nav"></div>
<div id="footer-nav2"></div>
<div id="footer-co"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/selectnav.min.js"></script>
<script>selectnav('menu'); </script>
<script type="text/javascript" language="javascript">
$(function() {
var resizeObject = function() {
var object = $('#bannerframe');
var width = object.width();
var ratio = 350.0 / 960.0;
var height = Math.floor(width * ratio) + 'px';
object.height(height);
};
$(window).resize(resizeObject);
resizeObject();
});
</script>
</body>
</html>
#nav {
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
background: #FFF;
display: block;
position: relative;
margin-top: 0px;
font: 1.1em Tahoma, Geneva, sans-serif;
}
#nav ul {
clear:left;
float:right;
list-style:none;
margin:0;
padding:0;
position:relative;
right: 50%;
text-align:center;
}
#nav ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
width: 6.5em;
cursor: pointer;
text-align: center;
white-space: nowrap;
font-size: 100%;
font-weight: bold;
padding-top: 2px;
padding-bottom: 2px;
background: #FFF;
}
#nav ul li a {
color: #FFF;
display:block;
right: 50%;
text-align: center;
text-decoration: none;
border:1px solid #224b09;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: 1px;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
padding: 10px 5px;
}
#nav ul li.active a {
color: #FFFFFF;
background-color: #4ba614;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ba614), color-stop(100%, #030));
background-image: -webkit-linear-gradient(top, #4ba614, #030);
background-image: -moz-linear-gradient(top, #4ba614, #030);
background-image: -ms-linear-gradient(top, #4ba614, #030);
background-image: -o-linear-gradient(top, #4ba614, #030);
background-image: linear-gradient(top, #4ba614, #030);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#4ba614, endColorstr=#030);
display: block;
padding: 10px 5px;
}
#nav ul li:hover a, #nav ul li.hover a /* This line is required for IE 6 and below */{
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
}
#nav ul ul {
display: none;
position: absolute;
top: 3em;
left: 1;
padding-top: 0px;
opacity: 1;
right: auto;
font-size: .9em;
width: auto;
padding-top: 0px;
padding-bottom: 0px;
z-index: 1;
}
#nav ul ul li {
padding-top: 0px;
opacity: 0.9;
left: auto;
margin: 0;
clear: left;
width: 100%;
font-size: 0.9em;
padding-top: 0px;
padding-bottom: 0px;
}
#nav ul ul li a,
#nav ul li.active li a,
#nav ul li:hover ul li a,
#nav ul li.hover ul li a { /* This line is required for IE 6 and below */
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #005900));
background-image: -webkit-linear-gradient(top, #36780f, #005900);
background-image: -moz-linear-gradient(top, #36780f, #005900);
background-image: -ms-linear-gradient(top, #36780f, #005900);
background-image: -o-linear-gradient(top, #36780f, #005900);
background-image: linear-gradient(top, #36780f, #005900);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#005900);
text-align: left;
line-height:1.4em;
border-bottom:1px solid #000;
display: block;
}
#nav ul ul li a:hover,
#nav ul li.active ul li a:hover,
#nav ul li:hover ul li a:hover,
#nav ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
font-size:1em;
color: #FFF;
background-color: #36780f;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#36780f), color-stop(100%, #000));
background-image: -webkit-linear-gradient(top, #36780f, #000);
background-image: -moz-linear-gradient(top, #36780f, #000);
background-image: -ms-linear-gradient(top, #36780f, #000);
background-image: -o-linear-gradient(top, #36780f, #000);
background-image: linear-gradient(top, #36780f, #000);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#36780f, endColorstr=#000);
text-align: left;
display: block;
}
#nav ul ul.last {
left:auto;
right:0;
}
#nav ul li:hover ul,
#nav ul li.hover ul { /* This line is required for IE 6 and below */
display:block;
}
I am making a website for my brother and I did a dropdown CSS menu for him which worked on the :hover to display the secondary options. Then he decided he wanted people to click on the main navigation box which would then dropdown the menu to show the secondary levels...
I tried changing the :hover to :focus (also the a:active) on the a element and this worked fine in IE9, but Firefox, Safari, Chrome and Opera wouldn't recognise the new commands. I read about a Javascript alternative but I'm not familiar with it too much to really feel confident about going down that route.
Just wondering if someone could help:
Link to web: http://www.doogledesigns.co.uk/prime%20elements/website/
HTML Code:
<div class="nav1">
<div class="menu-item-home">
<h4>Home</h4>
<ul>
<li>Plumbing & Gas Work</li>
<li>Electrical Work</li>
<li>Extensions</li>
<li>Internal & External Developments</li>
</ul>
</div>
<div class="menu-item-garden">
<h4>Garden</h4>
<ul>
<li>Garden Maintenance</li>
<li>Landscaping</li>
<li>Patios & Driveways</li>
<li>Walls & Fencing</li>
<li>Ponds & Water Features</li>
<li>Lighting</li>
<li>Drainage</li>
</ul>
</div>
<div class="menu-item-construction">
<h4>Construction</h4>
<ul>
<li>Home Redevelopment</li>
<li>New Builds</li>
<li>Driveways</li>
</ul>
</div>
</div>
CSS Code:
.nav1 {
float: left;
background: #404041;
height: 500px;
line-height: 1.5;
width: 170px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,2);
box-shadow: 2px 2px 5px rgba(0,0,0,2);
}
.menu-item-home, .menu-item-garden, .menu-item-construction {
background: #404041;
width: 170px;
}
.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px;
background: #10702a;
}
.menu-item-home h4 a, .menu-item-garden h4 a, .menu-item-construction h4 a {
color: #fff;
display: block;
text-decoration: none;
width: 170px;
}
/* Menu Header Styles */
.menu-item-home h4, .menu-item-garden h4, .menu-item-construction h4 {
border-bottom: 1px solid rgba(0,0,0,3);
border-top: 1px solid rgba(225,225,225,0.2);
color: #fff;
font-size: 13px;
font-weight: 500;
padding: 7px 12px;
/* Gradient */
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #02942a 0%, #0b872d 44%, #0f722a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02942a), color-stop(44%,#0b872d), color-stop(100%,#0f722a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#80b872d 44%,#0f722a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* IE10+ */
background: linear-gradient(top, #02942a 0%,#0b872d 44%,#0f722a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02942a', endColorstr='#0f722a',GradientType=0 ); /* IE6-9 */
}
/* ul styles */
.menu-item-home ul, .menu-item-garden ul, .menu-item-construction ul {
background: #404041;
font-size: 12px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px
}
.menu-item-home ul a, .menu-item-garden ul a, .menu-item-construction ul a {
margin-left: 2.5px;
text-decoration: none;
color: #404041;
diplay: block;
width: 173px;
}
/* li styles */
.menu-item-home li, .menu-item-garden li, .menu-item-construction li {
border-bottom: 1px solid #eee;
}
.menu-item-home li:hover, .menu-item-garden li:hover, .menu-item-construction li:hover {
background: #eee;
}
/* ul styles */
.menu-item-home ul, .menu-item-construction ul, .menu-item-garden ul {
background: #fff;
font-size: 12px;
line-height: 30px;
min-height: 0px;
max-height: 0px /* collapses the menu */
list-style-type: none;
overflow: hidden;
padding: 0px;
/* Animation */
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item-home:hover ul {
height: 155px;
}
.menu-item-garden:hover ul {
height: 220px;
}
.menu-item-construction:hover ul {
height: 90px;
}
CSS sheet needs cleaning up a bit but you get the general jist!
You want that menu to appear on click event.
To make that possible and to also make that cross browser compatible i would recommend using a jquery library jQuery just download the library and attach the link in the <head> section of your page and simply write jquery code to attach click event handler.
jQuery Download Link
basically you need to code only this much
after you link the jquery to your page write this in
<script>
$(document).ready(function(){
$(".menu-item-home a").click(function(){
$(".menu-item-home ul").slideToggle('slow');
});
$(".menu-item-garden a").click(function(){
$(".menu-item-garden ul").slideToggle('slow');
});
$(".menu-item-construction a").click(function(){
$(".menu-item-construction ul").slideToggle('slow');
});
});
</script>
and a little change to css is also required.and thats it you wana do.
have changed your css code and witten the jquery code for you for your website
check this link and you will have both your changed code.
and on the right side is the working website with click enabled.
http://jsfiddle.net/znsZu/
Hope it helps.
I for whatever reason cannot get rid of the gap between my header and the nav bar menu. I've tried every adjustment of padding/margins I can think of to either push it up or move the bar, but it just does funky stuff with the menu or pushes other content up. I need some help.
and the code
#header_wrap {
width:100%;
height:144px;
text-align: center;
}
#header {
width:980px;
margin:0 auto;
}
#preloadedImages
{
width: 0px;
height: 0px;
display: none;
background-image:url(Logo/logo14hover.gif);
}
.site_logo {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14.gif) no-repeat;
}
.site_logo:hover {
float:left;
width:302px;
height:144px;
background:url(Logo/logo14hover.gif) no-repeat;
}
.headerpic {
float:left;
width:678px;
height:144px;
background:url(Images/headerpic.gif) no-repeat;
}
#menu_wrap {
position:relative;
z-index:2;
text-align:center;
width:100%;
padding: 0px 0px;
}
#menu {
position:relative;
z-index:2;
width:1000px;
text-align:center;
margin:0 auto;
height:61px;
padding: 0px 0px;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
box-shadow: 0px 0px 9px rgba(0,0,0,0.5);
padding: 0px 0px;
list-style:none;
position: relative;
display:inline-table;
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
text-shadow: 1px 1px #000000;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #736e57;
background: linear-gradient(top, #BBB38F 0%, #6B6441 40%);
background: -moz-linear-gradient(top, #BBB38F4 0%, #6B64415 40%);
background: -webkit-linear-gradient(top, #BBB38F 0%,#6B6441 40%);
text-decoration:none;
font-family:Copperplate Gothic Light,Georgia, Palatino, Times New Roman, serif;
font-size:17px;
color:#FFFFFF;
font-weight:light;
outline:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover a {
color:#FFFFFF;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li a {
color:#FFFFFF;
display: block;
padding: 12px 42px;
text-decoration:none;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul li:hover > ul {
background: #303030;
text-decoration:none;
display: block;
}
nav ul ul {
background: #303030;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:14px;
text-decoration:none;
color:#000;
font-weight:light;
outline:none;
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity:0.95;
}
nav ul ul li {
text-decoration:none;
float: none;
position: relative;
}
nav ul ul li a {
text-decoration:none;
padding: 0px 0px;
color:#000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul li a:hover {
text-decoration:none;
background: #736e57;
text-shadow: 1px 1px #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul {
text-decoration:none;
padding: 0px;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
padding: 10px 40px 10px 15px;
color:#000;
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
text-align: left;
}
nav ul ul li a:hover {
font-family: Helvetica, Copperplate Gothic Light, Arial, sans-serif;
font-size:15px;
background: #6B6441;
text-align: left;
background: #bbb38f; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYjM4ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2YjY0NDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #bbb38f 0%, #6b6441 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbb38f), color-stop(100%,#6b6441)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbb38f 0%,#6b6441 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbb38f 0%,#6b6441 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbb38f', endColorstr='#6b6441',GradientType=0 ); /* IE6-8 */
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
}
nav ul ul ul {
position: absolute;
left: 100%; top:0;
}
and the HTML
<div align="center" id="header_wrap">
<div id="header">
<div id="preloadedImages"></div><div class="site_logo"></div>
<div class="headerpic"></div>
</div>
</div>
<!-- START MENU NAV BAR CODE -->
<div id="menu_wrap">
<div id="menu">
<nav>
<ul>
<li>Company
<ul>
<li>Mission</li>
<li>Philosophy</li>
</ul>
</li>
<li>Solutions
<ul>
<li>Q Pipe Estimator
<ul>
<li>Advantage</li>
<li>Differentiator</li>
<li>Features</li>
<li>Screen Shots</li>
</ul>
</ul>
</li>
</li>
<li>Services
<ul>
<li>Technical Support</li>
<li>Training</li>
<li>Customization</li>
<li>FAQ's</li>
</ul>
</li>
<li>Industry
<ul>
<li>Focus</li>
<li>Customers</li>
</ul>
</li>
<li>Contact
<ul>
<li>Contact Information</li>
<li>Request Information</li>
</ul>
</li>
<li>Login
</li>
</ul>
</nav>
</div>
</div>
<!-- END MENU NAV BAR CODE -->
added fiddle link in comments
Simply remove the default margin for your main ul (the direct descendant of nav)
Select it using the following CSS, or giving that specific ul a class or id (this way you target only the ul causing you trouble).
nav > ul {margin: 0}
I stuck it into the top of your fiddle, and updated it here
I realise this has now been answered because I took way too long formatting this, but I'd just like to point out that it has nothing to do with the box-shadow which has no impact on positioning.
The ul default margin is responsible for this space. Try setting margin-top:0 to nav ul. Demo: http://jsfiddle.net/xtsAx/8/
for me the error was because i used dream weaver to edit my code.
this give me a hiccup by adding default headers.
when i removed those headers and just gave<html> <head>...<?php>....?> .... </html> it worked perfect.
always remove html tags and header by dream weaver.
**Update: I had the same error again in Firefox so i applied
*{
margin:0;
padding:0;
}
And hence got rid of it completely now.
**
There is a strange border on my fixed header and footer elements in firefox..
Does anyone know how to get rid of this or is it a bug?
HTML
This is the html for the home page..
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--><head>
<meta charset="utf-8">
<!-- Use the .htaccess and remove these lines to avoid edge case issues.
More info: h5bp.com/b/378 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>my Sitelocker!</title>
<meta name="description" content="">
<meta name="author" content="">
<base href="http://sitelocker.local/" />
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->
<!-- CSS: implied media=all -->
<!-- CSS concatenated and minified via ant build script-->
<link rel="stylesheet" type="text/css" href="resource/css/grid.css"/>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="resource/css/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="resource/css/ie.css" /><![endif]-->
<link rel="stylesheet" type="text/css" href="resource/css/style.css">
<link rel="stylesheet" type="text/css" href="resource/css/uniform.default.css">
<link href='http://fonts.googleapis.com/css?family=Yellowtail' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bangers' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="resource/css/smoothness/jquery-ui-1.8.2.custom.css" />
<!-- end CSS-->
<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
<!-- All JavaScript at the bottom, except for Modernizr / Respond.
Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
<script src="resource/js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body>
<header id="masthead" class="clearfix">
<div id="masthead-inner" class="container_12 clearfix">
<div id="logo" class="grid_6">
<img src="resource/img/logo.jpg"/>
</div><!--/#logo-->
<div id="tools" class="grid_6">
Add Site
<ul id="top_menu">
<li>Welcome, <strong>lemonfreshdesign</strong>.</li>
<li>Account</li>
<li>Sign out</li>
</ul><!--/#top_menu-->
</div><!--/#tools-->
</div><!--/#masthead-inner-->
</header><!--/#masthead-->
<div id="main" role="main" class="container_12 clearfix">
<div id="main_inner">
<div id="ajaxLoadAni">
<img src="resource/img/ajax-loader.gif" alt="Ajax Loading Animation" />
<span>Loading...</span>
</div><!--/#ajaxLoadAni-->
<div id="siteholder" class="column grid_12 clearfix">
</div><!--/#siteholder-->
<div id="delConfDialog" title="Confirm">
<p>Are you sure?</p>
</div><!--/#siteholder-->
<div id="msgDialog">
<p></p>
</div><!--/#siteholder-->
<div id="myModal" class="reveal-modal">
<form action="http://sitelocker.local/usersites/insert_site" method="post" accept-charset="utf-8" class="addsite_form"> <input id="account_id" type="hidden" value="1"/>
<label for="site_title"><strong>Site Name:</strong></label>
<input id="site_title" type="text" maxLength="25" tabindex="1" name="site_title" />
<label for="site_url"><strong>Site Address:</strong></label>
<input id="site_url" type="text" tabindex="2" name="site_url" />
<label for="site_description"><strong>Site Description:</strong></label>
<input id="site_description" type="text" tabindex="3" name="site_description" />
<label for="site_category"><strong>Site Category:</strong></label>
<input id="site_category" type="text" tabindex="4" name="site_category" />
<input id="addsite_form_submit" type="submit" value="Add Site" name="submit" class="addsite_form_submit" tabindex="5" />
</form>
</div><!--/#myModal-->
</div><!--/#main_inner -->
</div><!--/#main -->
<footer id="footer" class="clearfix">
<div id="footer-container" class="container_12 clearfix">
<div id="copyright" class="grid_4">
© my SiteLocker 2011 | All Rights Reserved
</div><!--/#copyright -->
<div id="benchmarking" class="grid_4">
Page rendered in 0.0533 seconds
</div><!--/#benchmarking -->
<div id="category-select" class="grid_4">
<form>
<select style="opacity: 0;">
<option value="option1">Category</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</form>
</div><!--/#category-select -->
</div><!--/#footer-container -->
</footer><!--/#footer -->
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="resource/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="resource/js/libs/jquery-ui-1.7.2.custom.min.js"></script>
<script defer src="resource/js/plugins.js"></script>
<script type="text/template" id="readTemplate">
<div class="scroll-content-item dragbox clearfix" id="dragbox${site_id}">
<h2 class="h2handle">${site_title}<span class="close"><img src="resource/img/closepanel.png"></span></h2>
<div class="dragbox-content">
<p><a class="sitelink" href="${site_url} ?>" title="${site_title}"><img src="http://immediatenet.com/t/l?Size=1024x768&URL=${site_url}" alt="${site_title}" title="${site_title}"/></a></p>
</div>
<div class="dragbox-footer">
<p>in: ${site_category}</p>
</div>
</div>
</script>
<script defer src="resource/js/script.js"></script>
<script>
//display ajax loader animation
$( '#ajaxLoadAni' ).fadeIn( 'slow' );
$('a#viewqr').click(function(e) {
e.preventDefault();
$('div#qr').reveal({
animation: 'fadeAndPop', //fade, fadeAndPop, none
animationspeed: 300, //how fast animtions are
closeonbackgroundclick: true, //if you click background will modal close?
});
});
</script>
<!-- end scripts-->
<!-- Change UA-XXXXX-X to be your site's ID -->
<script>
window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
Modernizr.load({
load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
CSS
This is the main layout css file for the main page
/*
* HTML5 ✰ Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* ==|== normalize ==========================================================
*/
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Force vertical scrollbar in non-IE
* 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 13px; line-height: 1.231; }
body, button, input, select, textarea { font-family: sans-serif; color: #222; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
/* =============================================================================
Links
========================================================================== */
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; }
/* =============================================================================
Typography
========================================================================== */
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/e
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
* 2. Correct inner spacing displayed oddly in IE6/7
*/
button, input { line-height: normal; *overflow: visible; }
/*
* Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
*/
table button, table input { *overflow: auto; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
body {
background:url(../img/background.png) repeat;
font-size:100%;
}
/* =============================================================================
header
========================================================================== */
#masthead {
background: url(../img/header.gif) repeat-x;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
height:54px;
position:fixed;
width:100%;
top:0;
z-index:1000;
text-shadow: 1px 1px 2px #000000;
filter: dropshadow(color=#000000, offx=1, offy=1);
}
/*------------------------------------------------------------------------------*/
#logo {
height:54px;
line-height:50px;
}
#logo img {
padding:0px 15px 0px 0;
background: url(../img/header-sep.png) no-repeat right;
}
/*------------------------------------------------------------------------------*/
#tools {
text-align:right;
}
#tools ul {
float:right;
}
#tools ul li {
display:inline;
}
/* =============================================================================
main
========================================================================== */
#main .dragbox{
margin:20px 15px;
padding:10px;
width:207px;
background-color: rgba(0, 0, 0, .2);
position:relative;
border:1px solid #4e4e4e;
-webkit-box-shadow: 0px 0px 10px 0px #000000;
-moz-box-shadow: 0px 0px 10px 0px #000000;
box-shadow: 0px 0px 10px 0px #000000;
float:left;
}
/*------------------------------------------------------------------------------*/
#main .dragbox h2 {
border-bottom: 1px solid #CCCCCC;
font-size: .8em;
padding: 0;
margin: 0;
background: #7b7b7b; /* Old browsers */
background: -moz-linear-gradient(top, #515151 0%, #303030 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#515151), color-stop(100%,#303030)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #515151 0%,#303030 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #515151 0%,#303030 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #515151 0%,#303030 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#303030',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #515151 0%,#303030 100%); /* W3C */
padding: 0px 12px;
cursor: move;
font-family:'cabin';
border-top: thin solid #777777;
border-left: thin solid rgba(255, 255, 255, .25);
border-right: thin solid rgba(255, 255, 255, .25);
border-bottom:solid thin #1a1a1a;
text-shadow: 1px 1px 0px #606060;
color:#000000;
font-weight:bold;
text-transform:uppercase;
line-height:2.4em;
}
#main .dragbox h2 a {
text-decoration:none;
color:#000000;
}
#main .dragbox h2 a:hover {
text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
color:#aadb02;
}
#main .dragbox h2 span.close {
float:right;
}
/*------------------------------------------------------------------------------*/
.dragbox-content{
background:#fff;
min-height:100px;
border-left: 1px solid #a3a3a3;
border-right: 1px solid #a3a3a3;
}
.dragbox-content p {
margin:0;
}
/*------------------------------------------------------------------------------*/
#main .dragbox-footer {
border-bottom: 1px solid #CCCCCC;
font-size: 0.8em;
padding: 0;
margin: 0;
background: #7b7b7b; /* Old browsers */
background: -moz-linear-gradient(top, #7b7b7b 0%, #4d4d4d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7b7b7b), color-stop(100%,#4d4d4d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7b7b7b', endColorstr='#4d4d4d',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #7b7b7b 0%,#4d4d4d 100%); /* W3C */
padding: 6px 12px;
cursor: move;
font-family:'cabin';
border-bottom: thin solid rgba(255, 255, 255, .25);
border-left: thin solid rgba(255, 255, 255, .25);
border-right: thin solid rgba(255, 255, 255, .25);
border-top:none;
text-shadow: 1px 1px 0px rgba(255, 255, 255, .25);
color:#0c0c0c;
font-weight:normal;
}
#main .dragbox-footer p {
margin:0;
}
/*------------------------------------------------------------------------------*/
#ajaxLoadAni {
background: #3A3A3A;
color: #fff;
display: none;
font-weight: bold;
position: fixed;
top: 0;
left: 40%;
padding: 8px;
width: 106px;
z-index: 9999;
}
#ajaxLoadAni span {
float: right;
margin: 2px 0 0 0;
}
/*------------------------------------------------------------------------------*/
.ui-widget-content {
font-size: .8em;
}
#delConfDialog, #msgDialog {
font-size: 1em;
}
/* =============================================================================
footer
========================================================================== */
footer {
background:url(../img/footer.png) repeat-x;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 1);
position:fixed;
bottom:0;
z-index:1000;
height:75px;
width:100%;
}
/*------------------------------------------------------------------------------*/
#footer-top {
height:50px;
}
/*------------------------------------------------------------------------------*/
#footer-bottom {
height:24px;
color:#999;
text-decoration: none;
text-shadow: 1px 1px 0px #000;
font-family:'Yellowtail';
line-height:24px;
color:#aadb02;
}
#copyright {
float:left;
line-height:30px;
font-family: 'Play', sans-serif;
text-shadow: 1px 1px 0px rgba(255, 255, 255, .75);
filter: dropshadow(color=#000000, offx=0, offy=1);
color:#212121;
}
#category-select form {
float:right;
}
/*------------------------------------------------------------------------------*/
input:focus, select:focus {
outline: none;
}
.InputGroup {
display: inline-block;
padding: 3px 4px;
border: 1px solid #FFF;
border-radius: 7px;
-moz-border-radius: 7px;
}
.ErrorField {
border-color: #D00;
color: #D00;
background: #FFFFFE;
}
span.ValidationErrors {
display: inline-block;
font-size: 12px;
color: #D00;
padding-left: 10px;
font-style: italic;
}
/* --------------------------------------------------
Reveal Modals
-------------------------------------------------- */
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
background: #eee url(../resource/img/modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/* ==|== media queries ======================================================
PLACEHOLDER Media Queries for Responsive Design.
These override the primary ('mobile first') styles
Modify as content requires.
========================================================================== */
#media only screen and (min-width: 480px) {
/* Style adjustments for viewports 480px and over go here */
}
#media only screen and (min-width: 768px) {
/* Style adjustments for viewports 768px and over go here */
}
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
#media print {
* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
#page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
That's a Firefox bug, when you are using position:fixed with background-color:rgba(), it cause that problem. You can fix it changing the position to other value, changing the background-color to a solid color or adding -moz-border-radius:0 1px.
I was getting strange border artifacts around a span with a PNG background and a border.
I "fixed" that by adding a white border on the parent. It probably still has those artifacts, it's just that it's not visible anymore.