Hey I have a test site that works fine on all browsers except on mobile devices. For Android and Iphone. Please have a look.
Css for the Nav
ul#topnav {
/*Nav position*/
list-style: none;
width: 850px;
float: left;
margin: 0 -40px !important;/*top,right,bottom,left;*/
overflow:hidden;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
padding-right:1.5px;
}
ul#topnav a {
float: left;
display: block;
height: 74px;
text-indent: -99999px;
background-position: left top;
/*Siding Transition
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;*/
}
ul#topnav a:hover {
background-position: left -37px;
}
/*body id's to shiow active states*/
#HOME li.HOME a,
#RUGS li.RUGS a,
#CARPETS li.CARPETS a,
#UPHOLSTERY li.UPHOLSTERY a,
#MATTRESSES li.MATTRESSES a,
#WATERDAMAGE li.WATERDAMAGE a ,
#COMMERCIAL li.COMMERCIAL a ,
#factory li.factory a ,
#faqs li.faqs a {
background-position: left -37px;
}
ul#topnav li.HOME a {
background-image:url(../areaImages/home.png);
width: 62px;
}
ul#topnav li.RUGS a {
background-image:url(../areaImages/rugs.png);
width: 61px;
}
ul#topnav li.CARPETS a {
background-image:url(../areaImages/carpets.png);
width: 83px;
}
ul#topnav li.UPHOLSTERY a {
background-image:url(../areaImages/upholstery.png);
width: 112px;
}
ul#topnav li.MATTRESSES a {
background-image:url(../areaImages/mattress.png);
width: 112px;
}
ul#topnav li.WATERDAMAGE a {
background-image:url(../areaImages/waterDamge.png);
width: 138px;
}
ul#topnav li.COMMERCIAL a {
background-image:url(../areaImages/commercials.png);
width: 115px;
}
ul#topnav li.factory a {
background-image:url(../areaImages/factory.png);
width: 83px;
}
ul#topnav li.faqs a {
background-image:url(../areaImages/faq.png);
width: 58px;
}
Here is the Body CSS code:
/* =RESET
=------------------------------------*/
/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline}:focus{outline:0}body{line-height:1;color:666;background:black}ol,ul{list-style:none}table{border-collapse:separate;border-spacing:0}caption,th,td{text-align:left;font-weight:normal}blockquote:before,blockquote:after,q:before,q:after{content:""}blockquote,q{quotes:""""}
*/
body{
text-align: left;
padding: 0;
margin: 0;
line-height: 1.4;
width:100%;
height: 100%;
}
body a{
color:#4a3c31;
text-decoration:none;
}
body a:hover{
color:#fff;
text-decoration:none;
}
html{
width:100%;
color:#fff;
/*FULLSCREEN BACKGROUND
background: url(../areaImages/bg/bg_two.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;*/
}
/*HTML 5 specific*/
header,section,article,aside,footer,dialog{
display: block;
margin: 0 auto;
}
/*//////HEADER//////*/
header{
width: 838px;
height: 187px;
overflow:hidden;
background:#c5dead;
}
/*SEARCH BOX*/
#searchwrapper {
width:191px; /*follow your image's size*/
height:21px;/*follow your image's size*/
padding:0px;
margin: 100px 48px 0px 0px;/*top,right,bottom,left;*/
position:relative; /*important*/
float:right;
}
#searchwrapper form { display:inline ; }/*important*/
.searchbox {
background-color:#fff; /*transparent; important*/
border-color:#4a3c31;
border:1px solid;
position:absolute; /*important*/
top:4px;
left:0px;
width:191px;
height:17px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:195px;
width:21px;
height:21px;
}
.searchbox_submit a{
background-image:url(..areaImages/searchBttn.gif);
background-repeat:no-repeat;
}
.searchbox_submit a:hover {
background-image:url(..areaImages/searchBttn_On.gif);
background-repeat:no-repeat;
}
.hasPlaceholder{/*Class for placeholder color - Connected to "PlaceHolder Text "Visible" In All Browsers" script in the header*/
color:#777;
}
/*//////NAV//////*/
nav{
width: 100%;
height: 100%;
margin-top:150px;
margin-left:0px;
z-index:99;
}
/*//////SECTION//////*/
section{
width: 838px;
height: 100%;
padding:0px;
margin-top:3px;
margin-bottom:3px;
}
/*//////HEADING//////*/
h{
font-family: Verdana, Geneva, Serif !important;
font-size: 1.1em;
font-weight: normal;
color: #4a3c31 !important;
text-align: left;
padding-top:5px;
padding-left:16px !important;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: normal;
color: #4a3c31 !important;
text-align: left;
margin-top:0px;
margin-bottom:0px;
padding-left:16px !important;
}
/*//////PARAGRAPH//////*/
p{
font-family: Verdana, Geneva, Serif;
font-size: .75em;
font-weight: normal;
text-align: left;
padding:0px 15px 0px 15px; /*top,right,bottom,left;*/
}
p.padding{
padding:15px 50px;/*top and bottom paddings are 15px right and left paddings are 50px*/
}
/*//////BANNER IMAGES//////*/
#bannerImage{/*Banner With Contact*/
float: left;
width: 838px;
height:125px;
margin-top:3px;
margin-bottom:3px;
background-image:url(../areaImages/banner.jpg);
}
/*Contact Button*/
.contactSlide a{
float:right;
width:168px;
height:35px;
margin-top:43px;
overflow:hidden;
}
.contactSlide img{
border:none;
margin: 0;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
}
.contactSlide a:hover img{
margin-top:-35px;
}
/*Center Banner - Left Side*/
#bannerImageTwo{
float: left;
width: 373px;
height:192px;
background:#4a3c31;
color: #FFF;/*background-image:url(../areaImages/centerLeft.gif);*/
}
#bannerImageCenter{/*Center Banner - Middle Image*/
float: left;
width: 297px;
height:192px;
}
.bannerImageCoupon a{/*Center Banner - Coupon*/
float: left;
width: 168px;
height:192px;
margin-top:0px;
margin-bottom:0px;
overflow:hidden;
}
.bannerImageCoupon img{
border:none;
margin: 0;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
}
.bannerImageCoupon a:hover img{
margin-top:-192px;
}
/*//////CENTER IMAGES//////*/
#containerOne{
float: left;
width: 838px;
height:100%;
margin-bottom:-3px;
}
ul#imgPlaceId {
margin: 3px 27px 0px auto;/*top,right,bottom,left;*/
padding: 0;
list-style: none;
width:100%;
}
ul#imgPlaceId li{
display:inline;
}
/*//////BOTTOM TEXT WINDOWS//////*/
/*/CENTER BOTTOM TEXT/*/
#containerTwo{
float: left;
width: 838px;
height:225px;
margin-bottom:3px;
color: #4a3c31;
}
#textImageOne{/*BOTTOM TEXT LEFT*/
float: left;
width: 267px;
height:225px;
margin-right:3px;
background-image:url(../areaImages/centerTxtLft.gif);
}
#textImageTwo{/*BOTTOM TEXT MIDDLE*/
float: left;
width: 296px;
height:225px;
margin-left:1px;
margin-right:4px;
background-image:url(../areaImages/centerTxtLftMid.gif);
}
#textImageThree{/*BOTTOM TEXT RIGHT*/
float: left;
width: 267px;
height:225px;
background-image:url(../areaImages/centerTxtRght.gif);
}
/*/CENTER BOTTOM TEXT-BOX FOR PAGE PARAGRAPHS/*/
#containerThree{
float: left;
width: 838px;
height:100%;
margin-bottom:3px;
color: #4a3c31;
}
#textImageGreen{/*BOTTOM TEXT TOP GREEN FOR HEADERS*/
float: left;
width: 838px;
height:25px;/*-25px*/
background-image:url(../areaImages/greenSpacer.gif);
}
#textImageFull{/*BOTTOM TEXT FOR PARAGRAPHS*/
float: left;
width: 838px;
height:100%;/*254px*/
background-image:url(../areaImages/greenSpacerBttm.gif);
}
/*//////CONTACT FORM//////*/
fieldset ul, fieldset li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:.88em;
list-style: none;
border:0;
margin:26px 50px 28px 20px; /*top,right,bottom,left;*/
padding:0;
}
fieldset li{
list-style:none;
padding-bottom:10px;
}
fieldset input{
float:left;
}
fieldset label{
width:140px;
float:left;
}
#message{
width:240px;
height:110px;
float:left;
}
#button{
float:left;
margin:90px 0px 10px -247px;/*top,right,bottom,left;*/
text-align:left;
}
#clear{
float:left;
margin:52px 0px 10px -120px;
}
/*//////FOOTER//////*/
footer, .push{
clear:both !important; /*MULIT COLUN FIX*/
background-image:url(../areaImages/footerNoLeaves.gif);
background-repeat: no-repeat;
padding-top: 35px;
margin-top: 4px; /* -50px; negative value of footer height */
width:838px;
height: 133px;
color:#4a3c31;
}
/*FOOTER NAVIGATION*/
#footerNav{
margin:0px;
text-align:center;
font-family: Verdana, Geneva, Serif;
font-size:.8em;
}
ul.imgPlaceIdText {
margin: -20px 27px 0px auto;/*top,right,bottom,left;*/
padding: 0;
list-style: none;
width:100%;
}
ul.imgPlaceIdText li{
display:inline;
}
/*BOTTOM ICONS*/
ul#footImage{
margin: 20px auto;/*top,right,bottom,left;*/
padding: 0;
list-style: none;
width:100%;
text-align:left;
}
ul#footImage li{
display:inline;
margin: auto 10px;
}
/*COPYWRITE*/
#copyWrite{
float:left;
font-family: Verdana, Geneva, Serif;
font-size:.7em;
margin-left:10px;
margin-top:110px;
}
Here is the Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Area Rug Cleaning</title>
<link rel="SHORTCUT ICON" href="favicon.ico"/>
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="areaCss/areaBody.css">
<link rel="stylesheet" href="areaCss/nav.css">
<!--///////include the Jquiry Tools////////-->
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<!--///////CSS SELECTORS FOR ALL BROWSERS////////-->
<script src="areaJs/css_browser_selector.js" type="text/javascript"></script>
<!--///////PlaceHolder Text "Visible" In All Browsers////////-->
<script>
// This adds 'placeholder' to the items listed in the jQuery .support object.
jQuery(function() {
jQuery.support.placeholder = false;
test = document.createElement('input');
if('placeholder' in test) jQuery.support.placeholder = true;
});
// This adds placeholder support to browsers that wouldn't otherwise support it.
$(function() {
if(!$.support.placeholder) {
var active = document.activeElement;
$(':text').focus(function () {
if ($(this).attr('placeholder') != '' && $(this).val() == $(this).attr('placeholder')) {
$(this).val('').removeClass('hasPlaceholder');
}
}).blur(function () {
if ($(this).attr('placeholder') != '' && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {
$(this).val($(this).attr('placeholder')).addClass('hasPlaceholder');
}
});
$(':text').blur();
$(active).focus();
$('form:eq(0)').submit(function () {
$(':text.hasPlaceholder').val('');
});
}
});
</script>
<!--/////// ICON ROLLOVER JAVASCRIPT////////-->
<script type="text/javascript">
$(document).ready(function() {
$("img.rollover").hover(
function() { this.src = this.src.replace("_On", "_Out");
},
function() { this.src = this.src.replace("_Out", "_On");
});
});
</script>
<!--///////DOM METHODS////////-->
<script type="text/javascript">
var elements = ['header', 'nav', 'section', 'article', 'aside', 'footer'];
for (var i = 0; i < elements.length; i++) {
document.createElement(elements*);
}
</script>
<!--/////// IE FIXES////////-->
<!--[if IE]>
<style type="text/css">
#bannerImageCoupon{
margin-top:0px;
}
.searchbox_submit {
border:0px; /*important*/
background-color:transparent; /*important*/
position:absolute; /*important*/
top:4px;
left:197px;
width:21px;
height:21px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
ul#topnav {
list-style: none;
width: 850px;
float: left;
margin: 0px -40px !important;
}
</style>
<![endif]-->
<!--///////END IE FIXES////////-->
<!-- ////////ANDROID FIX FOR NAVIGATION Y POSITION //////// -->
<script>
if( navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPod/i)
){
<style type="text/css">
ul#topnav {
list-style: none;
width: 850px;
float: left;
margin: 30px 120px !important;/*top,right,bottom,left*/
}
</style>
}
</script>
</head>
<body id="HOME">
<!--/////// HEADER ////////-->
<header style="background-image:url(areaImages/topheader/topHeaderNoLogo.jpg);background-repeat: no-repeat;">
<!--/////// SEARCH SITE ////////-->
<div id="searchwrapper"><form action="">
<input type="text" class="searchbox" name="s" value="" placeholder="Search This Site"/>
<input type="image" src="areaImages/searchBttn.gif" class="searchbox_submit" value="" />
</form>
</div>
<nav>
<ul id = "topnav">
<li class="HOME"><a href="#"><!--HOME--></a></li>
<li class="RUGS"><a href="rugs.html"><!--RUGS--></a></li>
<li class="CARPETS"><a href="carpets.html"><!--CARPETS--></a></li>
<li class="UPHOLSTERY"><a href="upholstery.html"><!--UPHOLSTERY--></a></li>
<li class="MATTRESSES"><a href="mattress.html"><!--MATTRESSES--></a></li>
<li class="WATERDAMAGE"><a href="waterDamage.html"><!--WATERDAMAGE--></a></li>
<li class="COMMERCIAL"><a href="commercial.html"><!--COMMERCIAL--></a></li>
<li class="factory"><a href="factory.html"><!--FACTORY--></a></li>
<li class="faqs"><a href="faqs.html"><!--FAQS--></a></li>
</ul>
</nav>
</header>
<!--/////// SECTION ////////-->
<section>
<!--/////// Banner With Contact ////////-->
<div id="bannerImage">
<div class="contactSlide">
<a href="contact.html"><img src="areaImages/contactFull.gif" alt=""/></a>
</div>
</div>
<!--/////// Center Banner - Left Side With Text ////////-->
<div id="bannerImageTwo">
<div id="leftText">
<p>Welcome to Bronx carpet cleaning , one of the trusted carpet cleaning company in NYC and surroundings. Providing you with the most effective cleaning, we offer the most reliable organic cleaning service in and around Bronx. We do include all sorts of cleaning procedures which could help you to get rid of unwanted stain of spots on your carpet or your rug. Here in Bronx carpet cleaning, we are equipped with state of the art cleaning mechanisms which could help you to get for what you pay.</p>
</div>
</div>
<!--/////// Center Banner - Middle Image ////////-->
<div id="bannerImageCenter">
<img src="areaImages/thmbs/safeImages/centerImage_01.jpg" alt="" />
</div>
<!--/////// Center Banner - Coupon ////////-->
<div class="bannerImageCoupon"><a href="#"><img src="areaImages/couponFull.gif" alt="" /></a></div>
</section>
<section>
<div id="containerOne">
<ul id="imgPlaceId">
<li><img src="areaImages/thmbs/cleaningImages/cleningImageLeft_01.jpg" alt="" style="border:none;"/></li>
<li><img src="areaImages/thmbs/cleaningImages/cleningImageMid_01.jpg" alt="" style="border:none;"/></li>
<li><img src="areaImages/thmbs/cleaningImages/cleningImageRght_01.jpg" alt="" style="border:none;"/></li>
</ul>
</div>
<div id="containerTwo">
<div id="textImageOne">
<h1>ADVANTAGES</h1>
<p>Here in Bronx carpet cleaning, we implement Eco-Friendly methods to cleaning(Organic Carpet cleaning methods), we offer one of the best and reliable Organic cleaning package in the area. Bronx carpet cleaning uses cleansers which are 100% Bio-Degradable, they are 100% enzyme based so t hat your children and your pets will be safe.</p>
</div>
<div id="textImageTwo">
<h1>OUR WORK</h1>
<p>Customer is given the primary importance here in Bronx carpet cleaning, we value all our customers and customer satisfaction is the trademark of our company. If you have further queries about our service you can contact us at: <b>800-483-9195</b><br>
we undertake all your cleaning needs, we are the people who could help make your living room as good as new:</p>
</div>
<div id="textImageThree">
<h1>PROTECTION METHODS</h1>
<p>We use high velocity air-dryers when needed so, you will be on your carpets faster than you might suspect. We recommend you keep regular traffic off carpet or upholstery for a period of 2 hours. You may use the carpet immediately after cleaning if you wear socks or house slippers. Walking on freshly cleaned carpet with bare feet may leave oil spots.</p>
</div>
</div>
</section>
<!--///////FOOTER ////////-->
<footer>
<!--///////Footer Nav ////////-->
<div id="footerNav">
<ul class="imgPlaceIdText">
<li><a href="#">Carpet Cleaning</a> |</li>
<li><a href="#">Rug Cleaning</a> |</li>
<li><a href="#">Upholstery Cleaning</a> |</li>
<li><a href="#">Organic Cleaning</a> |</li>
<li><a href="#">About us</a> |</li>
<li><a href="#"> Contact us</a></li>
</ul>
</div>
<!--///////CopyWrite ////////-->
<div id="copyWrite">
<a href="#">© 2011 Area Rug Cleaning. All Rights Reserved.</a>
</div>
<!--///////Footer Images ////////-->
<div>
<ul id="footImage">
<li><a href='#'><img alt='facebook Me' src='areaImages/ftrImgOne_On.png' title='facebook Me' class='rollover' style="border:none;"/></a></li>
<li><a href='#'><img alt='Twitt' src='areaImages/ftrImgTwo_On.png' title='Twitt' class='rollover' style="border:none;" /></a></li>
<li><a href='#'><img alt='Twitt' src='areaImages/ftrImgThree_On.png' title='Twitt' class='rollover' style="border:none;" /></a></li>
</ul>
</div>
</footer>
</body>
</html>
Here is a link to the test site:
http://darthrayzor.com/areaRugSite/index.html
If you can see it on a a mobile device, the navigation, the portion that should be hidden by overflow:hidden, shows.
I have had the code check by W3 validation standards and the code is fine. Please let me know if you have any ideas to fix this.
thanks;),
rmcnaugh…
