Strange border on fixed postition elements in firefox 7.0.1 - css
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.
Related
CSS get extra two words on my button
I create a button with hover and active effect but after I created it come out extra "??" on my design.
<form id="form-login">
Login
</form>
And this is my CSS, I did change my "#form-login" to ".form-login" as well but not working. Please help me to check where is did wrong. It keep show me "??" on my design.
/* Login button */
#form-login {
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login {
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
I don't think it's your CSS.
Question signs ? always smell like an unicode character display problem.
Therefore the first thing to do is to check if you are using the correct encoding in your html document output. If it's not UTF-8, change it to UTF-8 and there's a good chance those question marks will "magically" turn into unicode characters instead of question marks. Just be sure to save and serve your html as UTF-8.
Hint to get you started:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
/* Login button */
#form-login
{
/* Size and position */
width: 340px;
margin: 60px auto 30px;
padding: 15px;
position: relative;
}
#form-login .login
{
/* Size and position */
width: 49%;
height: 38px;
float: left;
position: relative;
/* Styles */
border-radius: 3px;
cursor: pointer;
/* Font styles */
font-family: 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
line-height: 38px; /* Same as height */
text-align: center;
font-weight: bold;
/* Background color */
margin-right: 1%;
background: #34a5cf; /* Fallback */
background: -moz-linear-gradient(#34a5cf, #2a8ac4);
background: -ms-linear-gradient(#34a5cf, #2a8ac4);
background: -o-linear-gradient(#34a5cf, #2a8ac4);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
background: linear-gradient(#34a5cf, #2a8ac4);
border: 1px solid #2b8bc7;
color: #ffffff;
text-shadow: 0 -1px rgba(0,0,0,0.3);
text-decoration: none;
}
#form-login .login:hover {
box-shadow:
inset 0 1px rgba(255,255,255,0.3),
inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
top: 1px;
}
</style>
</script>
</head>
<body>
<form id="form-login">
Login
</form>
</body>
</html>
Copy-and-paste it into a new document, save it as "UTF-8", and then open it in your browser. You'll see there are no question signs ? (anymore).
Please note: I removed the useless spacing between the login text and the surrounding tag, changing > Login < to >Login<.
Chrome bug: Grey border showing up in chrome on page load?
I am noticing when i first load the page, I am noticing a grey border at the bottom of the chrome. It only happens when i open the browser after clearing all the cache. it does not happen when a 2nd tab is opened for the same page
Can any show me how to fix this and what could be causing this? I am attaching a screen grab below and the entire html and css
I am using Chrome version Version 27.0.1453.94 m
CSS
BODY {
padding:0;
margin:0;
background-color: #8DA3AE;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Opera */
background-image: -o-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #95ABB6), color-stop(1, #6D838E));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #95ABB6 0%, #6D838E 100%);
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
HTML {
height:100%;
}
input{
width: 172px;
}
.WhiteBg {
padding:0;
margin:0;
background: #FFFFFF;
}
/* Messages classes */
.ErrorMessageCSSClass{
color : red ;
}
.InfoMessageCSSClass{
color : blue ;
}
.WarningMessageCSSClass{
color : green ;
}
.MessageCSSClass{
}
/* ----------------------------------------------------------------- */
/* Login Styles */
.LoginPage {
background-image: url("../images/Login.gif");
background-position: center top;
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
color: #000000;
font: 12px Arial,Helvetica,sans-serif;
height: 405px;
position: relative;
text-align: left;
top: 200px;
width: 480px;
}
.LoginErrorPage {
background: url(../images/Login_error.gif) no-repeat left top;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
position: relative;
top: 150px;
height: 386px;
width: 432px;
text-align: left;
}
/* Error Message Area */
.LoginErrorLayer {
-x-system-font:none;
border:1px solid;
color:red;
background-color:white;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:16px;
overflow:hidden;
padding-bottom:2px;
padding-left:5px;
padding-top:2px;
text-align:left;
}
/* Button Normal Size Style */
.BtnLoginStyle {
border: 1px solid #BECDDC;
color: #000000;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 23px;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 340px;
width: 61px;
}
.BtnLoginStylePressed {
border: 1px solid #BECDDC;
color: #222222;
display: block;
font: 12px/22px Arial,Helvetica,sans-serif;
height: 23px;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 342px;
width: 61px;
}
.BtnLoginStyle A.Normal {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background-image: url(../images/LoginButtonNormal.gif) no-repeat;
}
.BtnLoginStyle A.Pressed {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/LoginButtonPressed.gif) no-repeat;
}
/* Button Big Size Style */
.BtnBigLoginStyle {
position:absolute;
top:346px;
width:118px;
height:23px;
z-index:1;
overflow: hidden;
}
.BtnBigLoginStyle A.Normal {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/BigButtonNormal.gif) no-repeat;
}
.BtnBigLoginStyle A.Pressed {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/BigButtonpRressed.gif) no-repeat;
}
.LoginVerNum {
position:absolute;
left:135px;
top:88px;
width:136px;
height:16px;
z-index:3;
font: 11px Arial, Helvetica, sans-serif;
color: #003984;
}
.LoginProductName {
color: #013A85;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
height: 17px;
left: 135px;
position: absolute;
top: 107px;
width: 289px;
z-index: 7;
}
.LoginEnterInfo {
position:absolute;
left:206px;
top:196px;
width:187px;
height:20px;
z-index:4;
text-align: right;
}
.LoginFieldBoxArea {
position:absolute;
left:245px;
top:205px;
width:200px;
height:59px;
z-index:5;
}
.LoginEntryBoxDiv {
position:relative;
width:100%;
height:28px;
}
.LoginFieldNameArea {
position:absolute;
left:145px;
top:200px;
width:93px;
height:59px;
z-index:6;
}
.LoginFieldName {
position:relative;
display:block;
height:28px;
text-align: right;
line-height: 17px;
font: 12px Arial, Helvetica, sans-serif;
}
.FieldsStyle {
font: 12px arial;
color: #000000;
width: 100%;
}
.LoginCopyright {
color: #5D5D5D;
font: 10px Arial;
height: 15px;
left: 210px;
position: absolute;
text-align: center;
top: 375px;
width: 240px;
z-index: 2;
}
.LoginOptions {
position:absolute;
text-align: center;
left:282px;
top:258px;
width:174px;
height:25px;
z-index:2;
font: 12px Arial;
text-decoration: underline;
color: #001ad5;
}
.LoginRemember {
position:absolute;
text-align: center;
left:135px;
top:278px;
width:334px;
height:25px;
z-index:2;
font: 12px Arial;
color: #000000;
}
.LoginWarning {
position:absolute;
text-align: center;
left:114px;
top:303px;
width:334px;
height:25px;
z-index:2;
font: 12px Arial;
color: #000000;
}
/* ----------------------------------------------------------------- */
/* Login Styles */
.HelpPage {
background: #FFFFFF url(../images/HelpAboutbg.jpg) no-repeat left top;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
}
.HelpInfoArea {
position:absolute;
left:10px;
top:257px;
width:411px;
height:7px;
z-index:1;
font: 14px/20px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
}
.HelpAppName {
display:block;
}
.HelpVerNum {
display:block;
}
/*
POLICY PERMISSION
*/
.groupList{
width : 400px ;
height: 388px ;
border: 1 ;
border-color: blue;
}
.viewGroupList{
width : 310px ;
height: 180px ;
border: 1 ;
border-color: blue;
}
.ackGroupList{
width : 310px ;
height: 180px ;
border: 1 ;
border-color: blue;
}
.rightButton{
border: 0 ;
width: 20px ;
height: 20px;
}
.leftButton{
border: 0 ;
width: 20px ;
height: 20px;
}
.selectOneMenu{
width: 150px;
}
.autoCompleteText{
width:320px ;
}
.autoCompleteSuggest{
width:340px ;
border-color: blue ;
}
HTML
<!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" lang="en">
<head>
<title> </title>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <style type="text/css" media="screen">#import 'css/cas.css';</style> -->
<style type="text/css" media="screen">#import 'css/ie_cas.css';</style>
<style type="text/css" media="screen">#import 'css/loginscreen.css'/**/;</style>
<script type="text/javascript" src="js/common_rosters.js"></script>
<link rel="icon" href="/cas-server/favicon.ico" type="image/x-icon" />
</head>
<body id="cas" onload="init();">
<div id="content">
<SCRIPT>
function showDownImage(id) {
var NAME = document.getElementById(id)
NAME.className="BtnLoginStylePressed"
}
function showUpImage(id) {
var NAME = document.getElementById(id)
NAME.className="BtnLoginStyle"
}
</SCRIPT>
<div align="center">
<form id="fm1" class="fm-v clearfix" action="" method="post">
<div class="LoginPage">
<input class="BtnLoginStyle" id="submit" name="submit" onmousedown="showDownImage('submit');" onmouseup="showUpImage('submit');" onmouseout=showUpImage('submit'); accesskey="l" value="Login" tabindex="4" type="submit" style="left:310px;" />
<input class="BtnLoginStyle" id="reset" name="reset" onmousedown="showDownImage('reset');" onmouseup="showUpImage('reset');" onmouseout=showUpImage('reset'); accesskey="c" value="Cancel" tabindex="5" type="reset" style="left:377px" />
<div class="LoginCopyright">© All Rights Reserved</div>
<div class="LoginVerNum">Version 11.0</div>
<div class="LoginFieldBoxArea">
<div class="LoginEntryBoxDiv">
<input id="username" name="username" class="required" tabindex="1" accesskey="n" type="text" value="" size="25" autocomplete="false"/>
</div>
<div class="LoginEntryBoxDiv">
<input id="password" name="password" class="required" tabindex="2" type="password" value="" size="25" autocomplete="false"/>
</div>
</div>
<div class="LoginFieldNameArea">
<div class="LoginFieldName"><label for="username">User</label></div>
<div class="LoginFieldName"><label for="password">Password</label></div>
</div>
<div class="LoginProductName">Infrastructure /<br>Provisioning
</div>
<div class="row btn-row">
<input type="hidden" name="lt" value="e2s1" />
<input type="hidden" name="_eventId" value="submit" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Add background-attachment: fixed; to your your first CSS rule:
BODY {
padding:0;
margin:0;
background-color: #8DA3AE;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Opera */
background-image: -o-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #95ABB6), color-stop(1, #6D838E));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #95ABB6 0%, #6D838E 100%);
background-attachment: fixed;
}
Demo
Joomla loads only certain parts of css template
I am working on a Joomla! template and I have my index and my template.css
When I leave all the design in css it appears to load only those parts concerning css classes and doesnt do anything else, so eventually I have to write everything else into de index.php which is silly because Im not supposed to.
For instance this is the code I want for my index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/posgradostemplate/css/template.css" type="text/css" />
<jdoc:include type="head" />
</head>
<body>
<div id="wrapper">
<div id="content">
<div class="mainmenu">
<jdoc:include type="modules" name="mainmenu" />
</div>
</div>
</div>
</body>
</html>
But wrapper and content do not behave as expected and no background is shown. This is my css file:
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* Opera */
background-image: -o-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #E6E6E6), color-stop(1, #858585));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #E6E6E6 0%, #858585 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #E6E6E6 0%, #858585 100%);
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.mainmenu ul {
font-family: Arial, Verdana;
font-size: 12px;
margin: 0;
padding: 0;
list-style: none;
}
.mainmenu ul li {
display: block;
position: relative;
float: left;
}
.mainmenu li ul {
display: none;
}
.mainmenu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
.mainmenu li:hover li a:hover {
background: #FFFF00;
color: #FF0000;
}
.mainmenu ul li a:hover {
background: #000000;
color: #FFFF00;
}
.mainmenu li:hover ul {
display: block;
position: absolute;
}
.mainmenu li:hover li {
background: #FFFF00;
float: none;
font-size: 11px;
color : #000000;
}
.mainmenu li:hover a {
background: #FFFF00;
color : #000000;
}
#wrapper{
width: 100%;
text-align: center;
}
#content{
display: inline-block;
}
Everything other than mainmenu is not working as the css tells it to. I am thinking that it is not being loaded properly, I want it to be loaded eagerly, so that everything is had in mind. Right now it only works if I add the css code in the index and it should not be that way. Suggestions?
Try loading the CSS file using the following: $document = JFactory::getDocument(); $document->addStyleSheet(JURI::root() . "templates/posgradostemplate/css/template.css");
css for dropdown selector
I'm not a web developer by any stretch of the imagination, I get things to the way I want them basically thru trial and lots of error. I can't seem to figure this one out.
I want to change the style of my dropdown selector from using the default OS styling to a suitable style I found but I can't figure out what goes where.
Here is my existing dropdown selector css:
/* select
==========================================================*/
.selector, .selector * {
/* margin: 0;
padding: 0; */
}
.selector select:focus { outline: 0; }
div.selector {
/* background-position: -490px -24px;
display: inline-block;
overflow: hidden;
padding-left: 2px;
position: relative;
vertical-align: middle;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); */
}
div.selector span {
/* background-position: 100% 0;
color: #fff;
font-size: 11px;
font-weight: bold;
overflow: hidden;
padding: 0px 27px 0px 7px;
text-overflow: ellipsis;
text-shadow: 1px 1px 0 #000;
white-space: nowrap; */
}
div.selector select {
/*background: #fff;
color: #000;
border: none;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
text-transform:none;*/
font-size:12px;
opacity: 1 !important;
}
div.selector, div.selector span {
/*background-repeat: no-repeat;
line-height: 24px;
text-transform: uppercase;
background-image: url("sprite.png");
background-repeat: no-repeat;
line-height: 24px;*/
}
div.selector, div.selector span, div.selector select { /*height: 24px;*/ }
/* #sort {
margin: 10px 0;
float:right;
width:257px;
}
#sort span {display:none;}
#sort SELECT {
background: none repeat scroll 0 0 #fff;
color: #000;
vertical-align: bottom;
opacity:1 !important;
float:left;
} */
button, textarea, input[type=text], input[type=password] {
border: 0;
margin: 0;
padding: 0;
}
textarea, input[type=text], input[type=password], select, .selector span {
color: #888;
font: 12px 'Helvetica Neue', Arial, sans-serif;
}
input[type=submit] { font: 12px 'Helvetica Neue', Arial, sans-serif; }
textarea, input[type=text], input[type=password] {
border: 1px solid #a9a9a9;
padding: 4px 8px;
}
button {
background: transparent;
color: #1b1e00;
font-size: 28px;
text-transform: lowercase;
}
button, label, input[type=submit] { cursor: pointer; }
.selector span { display: block; }
.selector, .selector span, .selector select { cursor: pointer; }
And here is the css for what I would like it to look like:
/* all form DIVs have position property set to relative so we can easily position newly created SPAN */
form div{position:relative;}
/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
position:relative;
z-index:10;
width:166px !important;
height:26px !important;
line-height:26px;
}
/* dynamically created SPAN, placed below the SELECT */
span.select{
position:absolute;
bottom:0;
float:left;
left:0;
width:166px;
height:26px;
line-height:26px;
text-indent:10px;
background:url(images/bg_select.gif) no-repeat 0 0;
cursor:default;
z-index:1;
}
Basically I don't know where anything goes. Any help would be very much appreciated.
Thank you!
Right now the only browsers to fully support styling of dropdown menus is chrome. See this post: How to style a <select> dropdown with CSS only without JavaScript? If you need your drop downs to match cross browsers there are a couple options. 1) http://harvesthq.github.com/chosen/ or others like it (my usual pick), 2) Compeletly redesign a drop down from scratch. This is not recommended as is is very complicated and easy to create errors. see http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx or http://css-tricks.com/dropdown-default-styling/ Hope this helps!
CSS: Menu Bar and content styling issues
I am currently adding a navigation bar to a web page. But I am running into some css styling issues. The navigation menu bar is pushing the content below, leaving a huge gap in between and making it uneven. I took the precaution in leaving out anything that will mess with the bottom like margin bottom-padding but I am still getting the same result. How can I get the menu bar to not affect the content below? EXAMPLE
With the Navigation bar added:
Without navigation bar the contents below are even:
I have added the specific css rules that are causing the issue to devgrow.css:
<style>
#navigation {
position:relative;
top:-45px;
left:450px;
}
#au_title {
color: #FC821D;
font-size: 120%;
font-weight: bold;
left: 515px;
letter-spacing: 2px;
position: relative;
text-transform: uppercase;
top: -105px;
}
#searchInput {
left: 700px;
position: relative;
top: -180px;
}
#contentNav { color: #cfdae3; }
/* Dark Button CSS */
.buttonNav {
outline: 0;
padding: 5px 12px;
display: block;
color: #EBEBEB;
font-weight: bold;
text-shadow: 1px 1px #1f272b;
border: 1px solid #1c252b;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #232B30; /* old browsers */
background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#3D4850), color-stop(4%,#313d45), color-stop(100%,#232B30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30',GradientType=0 ); /* ie */
box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* CSS3 */
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2); /* Safari, Chrome */
}
.buttonNav:hover {
color: #fff;
background: #4C5A64; /* old browsers */
background: -moz-linear-gradient(top, #4C5A64 3%, #404F5A 4%, #2E3940 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#4C5A64), color-stop(4%,#404F5A), color-stop(100%,#2E3940)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4C5A64', endColorstr='#2E3940',GradientType=0 ); /* ie */
}
.buttonNav:active {
background-position: 0 top;
position: relative;
top: 1px;
color: #fff;
padding: 6px 12px 4px;
background: #20282D; /* old browsers */
background: -moz-linear-gradient(top, #20282D 3%, #252E34 51%, #222A30 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(3%,#20282D), color-stop(51%,#252E34), color-stop(100%,#222A30)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#20282D', endColorstr='#222A30',GradientType=0 ); /* ie */
-moz-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Firefox */
-webkit-box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* Safari, Chrome */
box-shadow: 1px 1px 1px rgba(255,255,255,0.1); /* CSS3 */
}
/* Other stuff: */
.button-list { list-style: none; width: 100%; float: left; display: block; }
.button-list li { float: left; margin: 0 5px 0 0; }
.button-list li.search { padding-left: 18px; margin-left: 10px; position: relative; }
/* Search CSS: */
.search-input {
padding: 0 5px 0 22px;
border: 2px solid #DADADA;
height: 30px;
font-size: 12px;
line-height: 30px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
background: #FFF; /* old browsers */
}
.search-input:focus {outline: none;}
.search-submit {
width: 13px;
height: 13px;
border: none;
background: url(images/mag-glass.png) no-repeat;
display: block;
position: absolute;
left: 26px;
top: 10px;
text-indent: -9999em;
}
</style>
First i have say that the coding is really bad. For fixed that issue remove float from you button-list. Write like this :
.button-list {
list-style: none outside none;
overflow: hidden;
}
Hey now define overflow hidden in your css #contentArea id
as like this
#contentArea {
overflow: hidden;
}
Add style clear both in css of first content area <div id="contentArea" style="clear:both">