I have a website which is live. Its header should be like the below image:
When I am working on local its like that only, but when I am uploading to the server the header becomes small in every page except one page
every page it becomes small page except this page except
The CSS is below for header:
body {
font-family: Montserrat, sans-serif;
}
.navbar-inverse .navbar-toggle {
border-color: #fff;
border-radius: 0;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent;
padding: 10px 22px 0 5px;
}
.navbar-inverse :hover {
background-color: transparent;
}
.navbar-header {
float: none;
}
.custom-navbar {
padding: 0;
}
.navbar {
border-radius: 0;
background-color: #01b7a8;
border-color: #01b7a8;
box-shadow: 0 0px 10px 3px rgba(0, 0, 0, .5);
}
.navbar-inverse .navbar-nav>li>a {
font-size: 19px;
color: #fff;
letter-spacing: 1px;
}
.navbar-inverse .navbar-nav>li>a:hover {
background-color: #01b7a8;
color: #0a2240;
}
.navbar-inverse .navbar-toggle:focus,
.navbar-inverse .navbar-toggle:hover {
background-color: transparent;
}
#media screen and (max-width: 768px) {
.custom-navbar {
display: inline-flex;
}
.custom-navbar li .btn {
margin-bottom: 2vh;
}
}
#media screen and (min-width: 768px) {
.navbar-right {
/*position: relative;
top: -7vh*/
}
.custom-navbar {
position: absolute;
top: 1vh;
z-index: 2222;
right: 3vh;
}
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
}
#media (max-width: 767px) .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #0a2240;
background-color: #fff;
/* padding: 0 15px 0 15px; */
}
.dropdown-menu>li>a {
color: #0a2240 !important;
background-color: #efeff0;
}
/* dropdown-menu */
#media (max-width: 767px) .navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.container-fluid {
padding-right: 15px;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
color: #fff;
background-color: #d9f4f2;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 132%;
border-radius: 0;
padding: 0 0;
border: 0px;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #333! important;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-menu>li>a {
display: block;
padding: 10px 20px;
color: #0a2240 !important;
background-color: #efeff0;
}
.dropdown-menu>li>a:hover {
background-color: #d9f4f2;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
/*dropdown-menu end */
/*top button */
.btn:hover {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
.btn:active {
background-color: #2B3856 !important;
color: #f8dd4d !important;
border-color: #2B3856 !important;
}
/*links styling*/
#myNavbara>li>a: hover {
background-color: #01b7a8 !important;
color: #0a2240 !important;
}
can anyone tell me how to fix this?
I think, there is must be a live CDN link and which does not work on local may be because internet issue and when you upload on server then It works with internet.
You can check your all the files for this. May be this will work for you.
Thank you.
I'm noticing that you have inline styles applied to your header buttons, which are different for this page and this page. Also, I noticed that some of your font sizes are in vh. Try using something like em or rem instead.
I don't know how you're building this website, but if possible, drop the inline styles and style the buttons with their class instead.
We have decided to track our website's analytics by the below HOTJAR snippet below. We are using Visualforce page which has CSS as Header. We would like to include this JAVASCRIPT into this CSS.
Our HOTJAR tracking Script:
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:748410,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
</html>
<apex:outputPanel layout="none">
<script>
$j = jQuery.noConflict();
$j(document).ready(function(){
$j('#portalheaderbot').hide();
});
</script>
The below code is our Header which is in CSS. We would like to include into this so that whenever someone clicks on a page, HOTJAR can track the traffic.
<apex:page cache="false" showHeader="false" contentType="text/css" controller="BSHeaderCSSCntl">
/*Uncomment this for development*/
#import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.css')}");
#import url("{!URLFOR($Resource.PD_FLP360, 'style/main.css')}");
/*Uncomment this before deploying to prod.*/
/* #import url("{!URLFOR($Resource.PD_FLP360, 'style/bootstrap.min.css')}");
#import url("{!URLFOR($Resource.PD_FLP360, 'style/main.min.css')}");*/
#import url("{!URLFOR($Resource.PD_FLP360, 'style/font-awesome.min.css')}");
/* Hide SFDC stock communities components */
.bPageHeader {
display: none;
}
#tabContainer {
display: none;
}
#sidebarCell {
display:none;
}
/* Override to fix display of Chatter forms. Specific targetting to override computed styles.*/
.chatterPage, .profilePage, .zen-bodyInner {
font-size: 14px;
}
.chatterPage h3, .profilePage h3, .chatterPage legend, .profilePage legend, .pollquestion{
font-size: 14px;
}
.userProfilePage .vfButtonBar a.editLink img {
padding: 0px;
}
.zen-navigation {
height: 52px !important;
}
.uploadFile {
height: 52px !important;
}
.bottomBar{
height: 49px !important;
}
.zen-data table {
-webkit-border-horizontal-spacing: 0px;
-webkit-border-vertical-spacing: 0px;
border-bottom-color: rgb(153, 153, 153);
border-bottom-style: none;
border-bottom-width: 0px;
border-collapse: collapse;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(153, 153, 153);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(153, 153, 153);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(224, 224, 224);
border-top-style: solid;
border-top-width: 1px;
color: rgb(153, 153, 153);
display: table;
font-family: arial, helvetica, clean, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
table-layout: fixed;
text-align: left;
zoom: 1;
}
.feedcontainer {
max-width: 100% !important;
}
.threecolumn, .userProfilePage {
width: 100%;
}
.threecolumn .mainContent .lowerMainContent {
width: 100%;
}
.threecolumn .mainContent, .profilePage.userProfilePage .mainContent {
width: initial;
}
.threecolumn .centerContent, .userProfilePage .centerContent {
width: 72%;
}
.chatterPage .threecolumn .rightContent, .chatterPage .userProfilePage .rightContent {
display: none;
}
.userProfilePage .headerContent {
width: auto !important;
}
/* Hide default stock page title */
.bPageTitle {
display:none;
}
/* Override default background on page blocks and related lists */
.bPageBlock.brandSecondaryBrd.secondaryPalette, .bPageBlock.bEditBlock.brandSecondaryBrd {
border: 0;
background-color: transparent;
}
/* Override font size for stock pages */
.outerNoSidebar, #bodyTable {
font-size: 14px;
}
#bodyTable { /* Fix for DownlineMap rendering in FF */
table-layout: fixed;
}
/* Custom code from Custom Settings */
{!cssSettings.Custom_CSS__c}
/* Additional custom code */
/* Override heading display format */
#fl-pagetitle {
white-space: nowrap;
}
/* Override modal popup look and feel */
.modal-title {
color: rgb(218, 157, 39);
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.modal-content {
border-radius: 0px;
}
/* Fix bottom padding */
.panel {
/*padding: 13px 13px 13px 13px;*/
}
/* Fix header display */
#bootstrap-body {
margin-top: 100px;
}
#publishersharebutton {
background-attachment: scroll;
background-clip: border-box;
background-color: #C9920E;
background-image: none;
background-origin: padding-box;
background-position: 0% 0%;
background-repeat: repeat;
background-size: auto;
border-bottom-color: #ce9423;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: collapse;
border-left-color: #ce9423;
border-left-style: none;
border-left-width: 0px;
border-right-color: #ce9423;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #ce9423;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-weight: 300;
line-height: 18.699979782104492px;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
outline-color: rgb(255, 255, 255);
outline-style: none;
outline-width: 0px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 6px;
text-align: left;
text-decoration: none solid rgb(255, 255, 255);
box-shadow: none;
-webkit-box-shadow: none;
}
.publishercontainer.defaultState #publishersharebutton:hover, .publishercontainer.defaultState #publishersharebutton:active, .publishercontainer.defaultState #publishersharebutton:focus, .publishercontainer.defaultState #publishersharebutton.onHover {
background-color: #C9920E;
background-image: -ms-linear-gradient(top,#C9920E 0,#C9920E 100%);
background-image: -moz-linear-gradient(top,#C9920E 0,#C9920E 100%);
background-image: -webkit-linear-gradient(top,#C9920E 0,#C9920E 100%);
background-image: linear-gradient(top,#C9920E 0,#C9920E 100%);
border: 1px solid #ce9423;
}
#bootstrap-body ul li {
margin-left: 0px;
}
#bootstrap-body .site-title { // Override site title for Chatter page
box-sizing: border-box;
color: rgb(255, 255, 255);
display: inline;
font-family: 'Helvetica Neue', Helvetca, Arial, sans-serif;
font-size: 49px;
font-weight: bold;
height: auto;
letter-spacing: -1px;
line-height: 53.900001525878906px;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
margin-top: 20px;
padding-bottom: 60px;
padding-left: 0px;
padding-right: 0px;
padding-top: 40px;
text-shadow: rgb(34, 34, 34) 2px 2px 5px;
width: auto;
}
/* Hide dropdown box on right hand side of Chatter */
#moderatorMutton{
display: none;
}
/* Text wrapping for long names */
#profile-name {
word-wrap: break-word;
}
/* Hide contentWrapper as this interferes with min page width */
#contentWrapper, .zen-page {
display: none;
}
#site-header{
padding-top: 35px;
}
/* Override size of list view so that it renders correctly on small screens */
.listBody, .x-grid3, .x-grid-panel, .x-panel-body-noheader, .x-grid3-scroller {
min-height: 300px;
}
/* Widget header */
.panel-heading span.wdgHeader {
display: table;
}
#fchArea{
overflow: scroll;
height: 800px;
}
<!-- Hotjar Tracking Code for www.foreverliving.com -->
</apex:page>
You cannot include JS from CSS. The only thing you can do is to declare some kind of background image or alike, which creates a request to the tracker, like:
body:after {
content: '';
background-image: url(/path/to/tracker);
width: 1px;
height: 1px;
position: absolute;
left: -1px;
top: -1px;
display: block;
}
But be aware that css will be cached, so you probably need a url like:
/path/to/tracker?t=<timestamp>
Whereby the timestamp needs to be generated on each page request.
In my current example you see '.collapse' container which is triggered when someone clicks anywhere on the div itself. There are many '.collapse' divs but each one is triggered individually because of 'this' in the JS. The problem is that I don't want the whole container to be the trigger.
How can I replace '.collapse' in JS and use h2:after instead but still trigger .collapse as 'this'.
Let me know if this is confusing so I can edit my question to be more understandable.
HTML
<div class="collapse">
<h2>sometext
::after
</h2>
</div>
JS
$('.collapse').on('click',function(e){
e.preventDefault();
$(this).toggleClass('active');
});
http://codepen.io/mariomez/pen/jyaWax
I don't see any h6 in your code but you can use the h2 and use $(this) and parent() to select it's parent. I hope this is what you're looking for:
$('h2').on('click', function(e) {
$(this).parent().toggleClass('active');
});
#import url(http://fonts.googleapis.com/css?family=Roboto);
html {
height: 100%
}
body {
font-family: 'Roboto', sans-serif;
font-size: 15px;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; background:url(https://unsplash.imgix.net/40/OTwgwURiQN6DLk8zIr8E_DSC00953.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=408af6f15369c9d232097a79ff997fa7) center no-repeat;
background-size: cover
}
h1 {
color: #fff;
text-align: center
}
.wrap {
width: 80%;
margin: 0 auto;
}
.collapse {
background-color: rgba(255, 255, 255, 0);
border-bottom: 1px solid #eee;
cursor: pointer;
color: #fff;
padding: 10px;
margin: 0px;
max-height: 40px;
overflow: hidden;
transition: all 0.4s;
}
.collapse * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.collapse.active {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
z-index: 200;
color: #444;
max-height: 3000px;
padding: 10px 20px;
margin: 10px -10px;
transition: all 0.2s, max-height 4.8s;
}
.collapse h2 {
font-size: 18px;
line-height: 20px;
position: relative
}
.transparent {
background-color: rgba(255, 255, 255, 0) !important;
color: #fff !important;
box-shadow: none !important;
margin: 0px !important;
padding: 10px !important
}
.collapse h2::after {
content: "+";
text-align: center;
position: absolute;
width: 15px;
height: 15px;
border: 1px solid #ccc;
border-radius: 50%;
font-size: 12px;
line-height: 15px;
opacity: 0.5;
right: 0;
top: 0;
}
.collapse:hover h2::after {
opacity: 1
}
.collapse.active h2::after {
content: "-";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<h1>Collapsible drawers</h1>
<div class="collapse transparent">
<h2>I am transparent</h2>
The brain is like a muscle. When it is in use we feel very good. Understanding is joyous.
<b>Carl Sagan</b>
<p>This one keeps the transparency</p>
</div>
</div>
I tried putting the inline javascript code after</body> , but it didn't help.
HTML code:
<html>
<head>
<meta charset="UTF-8"/>
<title> Foodstant Delivery </title>
<link rel="stylesheet" type="text/css" media="screen" href="testCSS.css" />
<link rel="stylesheet" type="text/css" href="jquery.booklet.1.4.0.css" media="screen" />
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.min.js"> </script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/jquery.booklet.1.4.0.min.js" type="text/javascript">
</script>
</head>
<body>
<div id="container">
<div id="numb1">
<img src="images/number4.png" />
</div>
<figure id="logo">
<img src="images/logo23.png" alt="Foodstant Delivery logo" />
</figure>
<figure id="abtex">
<img src="images/abtext126.png" />
</figure>
<div class="Navigation">
<div id="navbar">
<ul>
<li class="OP"><img src="images/house.png" width="40" height="32" />
</li>
<li class="OP" id="OPM1"><img src="images/order.png" />Orders</li>
<li class="OP" id="OPM"><img src="images/menupic3.png" />Menu</li>
<li class="OP"> <img src="images/contact.png" />Contact
<div class="extended">
<div class="arrow-container"><div class="arrow-up"></div></div>
<ul class="smallNav">
<li>+65-65553333</li>
<li>Facebook</li>
<li>Twitter</li>
<li>enquiry [at] foodstant [dot] com</li>
</ul>
</div>
</li>
<li class="OP"><img src="images/Pen.png" />About Us</li>
<li class="OP"><img src="images/pin.png" />Jobs</li>
</ul>
</div>
</div>
<span id="papersl">
<img src="images/paperslant5.png" />
</span>
<div id="mybook">
<div>
<img src="images/CC1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/WC.png" width="100%" height="100%" />
</div>
<div>
<img src="images/ss1.png" width="100%" height="100%" />
</div>
<div>
<img src="images/beverages.png" width="100%" height="100%" />
</div>
</div>
<form action="" id="search-form" class="SF">
<fieldset>
<input type="text" id="search" name="search" onblur="if (this.value == '') {this.value = 'Search...';}" onfocus="if (this.value == 'Search...') {this.value = '';}" value="Search..." class="searchfield" />
<input type="submit" id="search-submit" value="" />
</fieldset>
</form>
<figure id="foot">
<img src="images/footer-comb1.png" usemap="#green" border="0">
<map name="green">
<area shape="rect" coords="503,41,614,85" href="http://www.trees.com/furniture.html">
<area shape="rect" coords="710,44,866,84" href="#0" id="se" >
</map>
</figure>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#numb1').hide().delay(800).fadeIn('normal');
$('#se').click(function() {
$('.SF').css('visibility','visible');
});
$(function() {
$('#mybook').booklet({
width:600,
height:350
});
});
});
</script>
</html>
CSS:
* {
margin: 0;
padding:0;
}
body {
background-image: url('images/BG-W1.png');
font-family: 'Conv_LITHOSPRO-REGULAR',Verdana,Helvetica,'Courier New',sans-serif;
/*height: 800px !important;*/
}
#font-face {
font-family: 'Conv_LITHOSPRO-REGULAR';
src: url('fonts/LITHOSPRO-REGULAR.eot');
src: url('fonts/LITHOSPRO-REGULAR.eot?#iefix') format('embedded-opentype');
src: local('☺'), url('fonts/LITHOSPRO-REGULAR.woff') format('woff'), url('fonts/LITHOSPRO-REGULAR.ttf') format('truetype'), url('fonts/LITHOSPRO-REGULAR.svg') format('svg');
}
#container{
max-width:1000px;
margin: 0 auto;
position: relative;
padding: 0 auto;
/*height: 762px !important;*/
/*border: 2px solid blue;*/
}
#logo {
float:left;
/*border: 1px solid black;*/
height: 180px;
}
#abtex {
float: left;
/*border: 1px solid black;*/
height: 180px;
}
#navbar {
}
.ftex {
position: relative;
}
#qqq {
position: static !important;
border: 1px solid black;
background-image:url('images/bg-fs-5.png');
background-repeat:no-repeat;
height: 125px;
width: 800px;
/*padding:25px 0 0 0;*/
/*padding-top: 50px;
padding-left: 34px;*/
}
.ftex ul {
list-style-type:none;
/*border:2px solid yellow;*/
width:1200px;
}
.ftex ul li {
display:inline;
padding-right: 170px;
font-family: 'Conv_LITHOSPRO-REGULAR';
font-size: 20px;
/*border:2px solid red;*/
color:#ffbf81;
}
.ftex li a:link {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:visited {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex li a:hover {
color: #ffbf81;
background:none;
border-radius: 0;
border-bottom:4px solid #ffbf81;
}
.ftex li a:active {
color: #ffbf81;
border-bottom:4px solid #ffbf81;
}
.ftex ul li#ss {
border-bottom:4px solid #ffbf81;
padding-right:5px;
}
#footerBg {
position: relative;
bottom:-90px;
left:-50px;
}
#foot {
padding-top: 10px;
}
#foot img {
display: block;
}
#foothome{
padding-top:100px;
}
#foothome img {
display: block;
}
#numb1 {
position: absolute;
/*border:10px solid red;*/
top:10px;
right:-124px;
/*z-index: 100;*/
/*background:url(images/number2.png); */
}
#abt {
position: relative;
/*border: 1px solid red;*/
height: 400px;
left:180px;
top:-60px;
z-index: -2;
}
#papersl {
position: absolute;
left: 60px;
top: 222px;
z-index: -4;
}
.Navigation { background:background: rgb(246,248,249); /* Old browsers */
background: -moz-linear-gradient(top, rgba(246,248,249,1) 0%, rgba(229,235,238,1) 46%, rgba(215,222,227,1) 65%, rgba(245,247,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(46%,rgba(229,235,238,1)), color-stop(65%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 46%,rgba(215,222,227,1) 65%,rgba(245,247,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
box-shadow: -3px -5px 10px #888888;
font-size: 26px;
/*position: relative;
top:-50px;*/
clear:both;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.Navigation ul li { position: relative; list-style: none; padding: 17px 10px; }
.Navigation ul li a { font-size: 26px; color: white; text-decoration: none; }
.Navigation ul li:hover { background: url(images/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4;}
.Navigation ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }
.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }
.Navigation ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(images/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }
.Navigation ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }
.Navigation ul li .extended a { font-size:14px;}
.Navigation ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(images/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; }
.Navigation ul li .extended span { padding-left: 10px; font-size: 11px; }
.Navigation ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50); padding: 10px; height: 100px; }
.Navigation ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(images/linkback.png) no-repeat; }
.extended ul li {float:left;}
.Navigation ul li .extended ul.smallNav li:first-child { margin: 0; }
.Navigation ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }
.Navigation ul li:hover .extended { display: block; }
.Navigation ul li ul li:hover a { color: white; }
#navbar ul {
list-style-position:inside;
padding-top: 10px;
padding-bottom: 10px;
}
#navbar ul li {
display: inline;
padding:0 20px 0px 0px;
margin-bottom: 10px;
list-style-type:disc;
}
#navbar ul li.OP {
/*list-style-image:url('images/order.png'); */
padding-left: 15px;
}
#navbar ul li.OP img {
vertical-align: middle;
}
#navbar li a:link {
color: #EF174A;
}
#navbar li a:visited {
color: #BF4100;
}
#navbar li a:hover {
color: black;
background-color:#D2D2D2;
border-radius: 10px;
}
#navbar li a:active {
color: #918FBC;
}
li a {
text-decoration:none;
}
#navbar ul li.OP a {
padding-left: 10px;
}
.Navigation ul li .extended ul.smallNav li a { color: #c7c7c7 !important; text-shadow: none !important; }
.Navigation ul li .extended ul.smallNav li a:hover { color: white !important;}
.arrow-container { margin-top:-16px; height:16px; }
fieldset {
border: 0 none;
margin: 0;
padding: 0;
vertical-align: baseline;
}
#main {
border: medium none;
/*height: 500px;*/
margin: 50px auto;
padding: 15px 0;
width: 326px;
font-family: 'Conv_LITHOSPRO-REGULAR';
}
.or1 input {
background-color: #303030;
border: medium none;
border-radius: 0.4em 0.4em 0.4em 0.4em;
box-shadow: 0 -1px 0 0 #000000;
color: #FFFFFF;
font-size: 1.2em;
height: 27px;
letter-spacing: 2px;
margin: 15px 0;
padding: 0 0 0 10px;
width: 316px;
}
.ico {
float: right;
}
button {
background: -moz-linear-gradient(center bottom , #303030, #3A3A3A) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(48,48,48,1)), color-stop(100%,rgba(58,58,58,1)));
background: -webkit-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(48,48,48,1) 0%,rgba(58,58,58,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303030', endColorstr='#3a3a3a',GradientType=0 ); /* IE6-9 */
border: medium none;
border-radius: 0.2em 0.2em 0.2em 0.2em;
-webkit-border-radius: .2em;
box-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
color: #FFFFFF;
float: right;
height: 24px;
text-align: right;
width: 79px;
}
button:hover {
background: -moz-linear-gradient(center bottom , #303030, #4B4B4B) repeat scroll 0 0 transparent;
}
button:active {
border: medium none;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.note1 {
padding-top: 40px;
padding-left: 20px;
font-size: 20px;
text-align: center;
color: #F74E09;
}
#search-form { width: 190px; position: absolute; right: 100px;
bottom:55px;
visibility: hidden; display: block;}
#search { background: #b2a48c; border: 3px solid #402f1d; color: #2b1e11; height: 20px; line-height: 20px; width: 150px; padding: 2px 4px; position: absolute; top: 11px; left: 0}
#search-submit { background: #b2a48c url(images/search.png) no-repeat 12px 7px; border: 3px solid #402f1d; height: 50px; width: 50px; position: absolute; top: 0; right: 0; display:block;}
#search-submit img {
display: block;
}
#search-submit:hover { background-color: #c7bba7;}
/* CSS3 */
#search { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
background: -webkit-gradient(linear, left top, left bottom, from(#b2a48c), to(#9b8d74));
background: -moz-linear-gradient(top, #b2a48c, #9b8d74);
text-shadow: rgba(0,0,0,.2) 0 0 5px;
display: inline;
}
#search-submit { border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; -mox-box-shadow: 0 0 5px black;display:block;
/* Webkit-transition */
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.4s, 0.4s;
-webkit-transition-timing-function: linear, ease-in;
}
Use css to set the visibility setting for body to hidden before the js is loaded then remove the property with js onload using jquery.
css:
body { visibility: hidden;}
javascript:
$().ready(function(){ $("body").css({visibility:'visible'})});
If I understand the question correctly, put this in testCSS.css...
#numb1 { visibility:hidden; }
or...
#numb1 { display:none; }
Whichever is more pleasing to you.
Doing that will hide the numb1 element before the page is displayed. What you're doing lets the page load before hiding it and then fading it in, so it's briefly visible.