Log in

View Full Version : Resolved Weird nav problem in Firefox



zeech26
05-20-2009, 12:13 AM
Hello,
please see this link in Firefox on a MAC or PC
http://contentx.com/APROCESSR_WEB/

I cannot figure out why the image is being repeated!
It works fine on a MAC or PC in IE or Safari.

Anyone with a suggestion!? Help for Good Karma!
thank you!

This is the CSS I am using:


@charset "UTF-8";
/* CSS Document */
body {background-color:#FFFFFF;}
.container_a {width: 800px; height:600px; margin: 0px auto 0; padding: 0; position: relative; text-align: left; background-color:#ffffff;}
.container_a img {border: none; padding:0px 20px 20px 0px; vertical-align:top; float: left;}
.container_a p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000; padding:0px 30px 0px 0px;}
.h1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; color:#000099; font-weight: bold; padding:8px 200px 0px 0px;}
h2 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; font-weight: bold; padding:0px 200px 0px 0px;}
.head {width: 800px; height:100px; text-align: center; margin: 5px auto 0; padding: 0; position: relative; background-image:url(images/header.jpg)}
.buttondiv {width: 800px; text-align: center; margin: 10px auto 0; padding: 0; position: relative; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000;}
.footer {width: 800px; text-align: center; margin: 25px auto 0; padding: 0; position: relative;}
.footer p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:9px; color:#000000;}
p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000;}
.footer_font {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:x-small; color:#000000;}
ul {padding-left: 100px; margin-left: 100px;}
li {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000000; font-weight: bold; padding-right: 20px;}
a:link, a:visited {color:#0000cc;}
a:hover, a:active {color:#606360;}
.grey_box {width: 600px; padding: 0;float:left; text-align: left; background-color:#cccccc; border: solid 1px #333333;}
.grey_box img {border: none; padding:5px 5px 5px 5px; vertical-align:top; float: left;}
.grey_box p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#000000; padding:0px 30px 0px 0px;}
/*PHOTO GALLERY*/
.gallery {float: left; width: 400px; }
.pic {float: left; height: 80px; width: 65px; padding: 6px 6px 10px 6px; }
.pic_lg {margin: 0 0 20px; text-align: right;padding: 5px 10px 5px 5px}
.pic_lg p {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; padding-right: 15px;}

/* GLOBALHEADER */
#globalheader { width: 800px; height: 20px; margin: 1px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 160px; height: 0; padding-top: 20px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalnav {background-image:url(images/menu_bar.png); background-repeat: no-repeat; }
/* BUTTONS */
#globalheader #globalnav li#home a { background-position: 0 0; }
#globalheader #globalnav li#services a { background-position: -160px 0; }
#globalheader #globalnav li#contract a { background-position: -320px 0; }
#globalheader #globalnav li#aboutus a { background-position: -480px 0; }
#globalheader #globalnav li#case a { background-position: -640px 0; }
/* OVER STATES */
#globalheader #globalnav li#home a:hover { background-position: 0 -20px; }
#globalheader #globalnav li#services a:hover { background-position: -160px -20px; }
#globalheader #globalnav li#contract a:hover { background-position: -320px -20px; }
#globalheader #globalnav li#aboutus a:hover { background-position: -480px -20px; }
#globalheader #globalnav li#case a:hover { background-position: -640px -20px; }
/* PRESSED STATES */
#globalheader #globalnav li#home a:active { background-position: 0 -40px; }
#globalheader #globalnav li#services a:active { background-position: -160px -40px; }
#globalheader #globalnav li#contract a:active { background-position: -320px -40px; }
#globalheader #globalnav li#aboutus a:active { background-position: -480px -40px; }
#globalheader #globalnav li#case a:active { background-position: -640px -40px; }
/* ON STATES */
#globalheader.home #globalnav li#home a:hover { background-position: 0 0; cursor: default; }
#globalheader.services #globalnav li#services a { background-position: -160px -60px !important; }
#globalheader.contract #globalnav li#contract a { background-position: -320px -60px !important; }
#globalheader.aboutus #globalnav li#aboutus a { background-position: -480px -60px !important; }
#globalheader.case #globalnav li#case a { background-position: -640px -60px !important; }

rangana
05-20-2009, 12:49 AM
You might want to add this on your rule:


#globalheader ul#globalnav{
background:none;
height:20px;
}
#globalheader ul#globalnav li {
float:left;
width:140px;
}

hkp
05-20-2009, 07:05 AM
Add this to your code hope After that it will work fine.

background-image:
url('bgdesert.jpg');
background-repeat: no-repeat