CSS Creator Help with navigation problem

Posted: Thu, 2008-08-28 00:38

hey Peoples,
Im having some troubles getting the navigation to work properly on my latest design.
http://www.jammedia.com.au/waggamotors/WM_code_1.html

the 'about' button doesnt seem to work.

and when i go to validate the CSS i get this error

Value Error : margin-left only 0 can be a length. You must put an unit after your number : 35

what the hell does that mean?

what am i doing wrong? im sure its something simple, but i cant seem to figure it out!

any help is much appreciated Smiling

XHTML

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wagga Motors</title>
<link href="css/WM_css_1.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script type="text/javascript" src="scripts/swfobject.js"></script>
</head>

<body>

<div id = "footerwrapper">

<div id = "wrapper">
	<div id = "banner">
     							<div id = "flash"></div>
                				<script type="text/javascript">
                                           var so = new SWFObject("flash/banner_1.swf", "mymovie1", "819", "199", "8", "#fff" );
                                           so.addParam("wmode","transparent");
                                           so.write("flash");
                                </script>
    </div>
    <div id = "navbar">
    	<ul>
             <li><a href="newcars.html" id="new">newcars</a></li>
             <li><a href="usedcars.html" id="used">about</a></li>
             <li><a href="finance.html" id="finance">finance</a></li>
             <li><a href="service.html" id="service">service</a></li>
             <li><a href="parts.html" id="parts">parts</a></li>
             <li><a href="merchandise.html" id="merchandise">merchandise</a></li>
             <li><a href="trucks.html" id="trucks">trucks</a></li>
             <li><a href="about.html" id="about">about</a></li>
             <li><a href="contact.asp" id="contact">contact</a></li>
      	</ul>
    </div>
    <div id = "secondnav"></div>
  	<div id = "imagery"></div>
    <div id = "contentmain">
    	<div id = "content"> 
    	  <p>Visit the <a href="#">Mercedes Benz Australia</a> website to view our full vehicle range.<br />
    	    Or for more information please <a href="#">email Tony</a> today.</p>
    	</div>
    </div>
  	<div id = "footer">
    </div>
    <div id = "jamfooter">
    	<ul>
     		<li><a href="http://www.jammedia.com.au" id="jam">www.jammedia.com.au</a></li>
     	</ul>
    </div>

</div>

</div>

</body>
</html>

CSS

@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../images/bg_top.gif);
	background-repeat: repeat-x;
	background-position: top;
	font-size: 9pt;
	color: #333333;
	line-height: 15pt;
	background-color: #000000;
}
#horizon {				/* used to centre site vertically */
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -414px; /* half of wrapper hieght */
	text-align: center;
	min-width: 819px;
	background-image: url(../images/bg_1.gif);
	background-repeat: repeat;
	background-position: center bottom;
	background-attachment: scroll;
}
#wrapper {
	width: 819px;
	margin: 0 auto;
}
#banner {
	height: 199px;
}

#navbar {
	background-image: url(../images/navbar.gif);
	height: 45px;
	padding-left: 9px;
	background-repeat: no-repeat;
	
}
#navbar li {
	display: inline;
	height: 45px;
	list-style-type: none;
	float: left;
	margin: 0;
}
#navbar ul {
	display: inline;
	list-style-type: none;
	float: left;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 35;
}
#navbar a {
	margin-right: 0px;
}
#secondnav {
	background-image: url(../images/second_nav.gif);
	height: 37px;
	margin: 0px;
}
#imagery {
	background-image: url(../images/image_manu.gif);
	height: 372px;
}
#contentmain {
	background-image: url(../images/content_manu.gif);
	height: 176px;
	overflow: hidden;
}
#content {
	padding-top: 87px;
	padding-right: 62px;
	padding-bottom: 0px;
	padding-left: 62px;
}
#footer {
	background-image: url(../images/footer.gif);
	height: 42px;
	text-align: center;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}
#jamfooter {
	height: 25px;
	clear: both;
	width: 819px;
	text-align: center;
}

#footerwrapper {
	background-image: url(../images/bg_1.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 0px;
	padding: 0px;
}
#jamfooter li {
	padding: 0px;
	list-style-type: none;
	margin: 0px;
	height: 25px;
}
#jamfooter ul {
	padding: 0px;

	margin: 0px;
	height: 25px;
}
a:link, a:visited {
	color: #B90B0B;
	text-decoration: none;
}
a:hover {
	color: #B90B0B;
	text-decoration: underline;
}
img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#new{
	background-image: url(../images/nav_newcars.gif);
	margin: 0px;
	height: 45px;
	width: 83px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#new:hover{
	background-position: center bottom;
}
#used{
	background-image: url(../images/nav_used.gif);
	margin: 0px;
	height: 45px;
	width: 89px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#used:hover{
	background-position: center bottom;
}
#finance{
	background-image: url(../images/nav_finance.gif);
	margin: 0px;
	height: 45px;
	width: 72px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#finance:hover{
	background-position: center bottom;
}
#service{
	background-image: url(../images/nav_service.gif);
	margin: 0px;
	height: 45px;
	width: 70px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#service:hover{
	background-position: center bottom;
}
#parts{
	background-image: url(../images/nav_parts.gif);
	margin: 0px;
	height: 45px;
	width: 58px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#parts:hover{
	background-position: center bottom;
}
#merchandise{
	background-image: url(../images/nav_merchandise.gif);
	margin: 0px;
	height: 45px;
	width: 102px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#merchandise:hover{
	background-position: center bottom;
}
#trucks{
	background-image: url(../images/nav_trucks.gif);
	margin: 0px;
	height: 45px;
	width: 113px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#trucks:hover{
	background-position: center bottom;
}
#about{
	background-image: url(../images/nav_about.gif);
	margin: 0px;
	height: 45px;
	width: 60px;
	text-indent: 10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#about:hover{
	background-position: center bottom;
}
#contact{
	background-image: url(../images/nav_contact.gif);
	margin: 0px;
	height: 45px;
	width: 73px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#contact:hover{
	background-position: center bottom;
}
#jam{
	background-image: url(../images/footer_jam.gif);
	margin: 0px;
	height: 25px;
	width: 819px;
	text-indent: -10000px;
	overflow: hidden;
	display: block;
	background-repeat: no-repeat;
	background-position: center top;
}
#jam:hover{
	background-position: center bottom;
}

Tony

Moderator

Posts: 2808
Joined: 2003-03-12
Location: Brisbane

Hi big_pete, That error is

Posted: Thu, 2008-08-28 01:30

Hi big_pete,
That error is telling you that for values other then 0 you need to specify a unit such as px for pixel. Here's one example where you have missed the unit on the margin-left.

Quote:

#navbar ul { display: inline; list-style-type: none; float: left; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 35; }

Your question may have already been answered, search and read before you ask.

big_pete

Regular

Posts: 36
Joined: 2005-08-07
Location: Australia

ok thanks, ive updated that

Posted: Thu, 2008-08-28 03:53

ok thanks, ive updated that and now the css is valid.
However im still having troubles getting the navigation to align properly in both IE and Firefox.
the about button doesnt show up in IE but the navigation is aligned properly, and in FF the alignment is out.

arrgh!

can anyone help me with

Posted: Fri, 2008-09-05 01:08

can anyone help me with this, i cant seem to figure out what the hell my navigation is doing!

http://www.jammedia.com.au/waggamotors/WM_code_1.html

the alignment is different in firefox/IE and the about tab background rollover doesnt want to work?

any ideas????