...

View Full Version : Strange Side Menu Behavior



c0ding_n00b
07-29-2011, 05:55 AM
I have cleaned up my web design and code a lot and have addressed most of the glitches.

In IE 8 and IE 7 the side menu gets scrunched over? Just 1 list item only the text, moves right.
10118

http://furniturelandnewjersey.com/contact.html

This is the CSS. It meets W3C validation.


<!--
#menuheader {
position : relative;
margin-left : 10px;
marhin-right : 10px;
display : block;
width : 1000px;
height : 35px;
margin : 0;
padding : 0;
font : 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
line-height : 35px;
text-decoration : none;
font-family : "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
#menuheader-roundrect, #menuheader-fill {
display : block;
position : absolute;
width : 900px;
height : 35px;
top : 0;
left : 0;
z-index : 2;
}
#menuheader #navlists {
position : relative;
display : block;
margin : 0;
padding : 0;
}
#menuheader #navlists li {
display : inline;
text-align : center;
color : white;
}
#menuheader #navlists li a {
float : left;
height : 35px;
overflow : hidden;
background : url(http://www.furniturelandnewjersey.com/images/top_navigation.png) no-repeat;
color : white;
text-align : center;
width : 100px;
background-position : 100% 0%;
outline : none;
text-decoration : none;
}
#menuheader #navlists li a:link {
cursor : pointer;
}
#menuheader #navlists li#item-first a {
background-position : 0% 0%;
}
#menuheader #navlists li#item-first a.before {
background-position : 0% -35px;
}
#menuheader #navlists li#item-first a:hover {
background-position : 0% -70px;
}
#menuheader #navlists li#item-first a:active {
background-position : 0% -105px;
}
#menuheader #navlists li a.before {
background-position : 100% -35px;
}
#menuheader #navlists li a:hover {
background-position : 100% -70px;
}
#menuheader #navlists li a:active {
background-position : 100% -105px;
}
#menuheader #navlists li#item-last a {
background-position : -100px 0%;
}
#menuheader #navlists li#item-last a.before {
background-position : -100px -35px;
}
#menuheader #navlists li#item-last a:hover {
background-position : -100px -70px;
}
#menuheader #navlists li#item-last a:active {
background-position : -100px -105px;
}
#menuheader #navlists li a.current {
background-position : 100% -140px;
}
#menuheader #navlists li#item-last a.current {
background-position : -100px -140px;
}
hr {
color : #ccc;
background-color : #ccc;
}
.container footer p {
font-family : Verdana, Geneva, sans-serif;
font-size : 12px;
font-style : normal;
color : #999;
text-align : center;
}
ul, ol, dl {
padding : 0;
margin : 0;
}
h1, h2, h3, h4, h5, h6 {
margin-top : 0;
padding-right : 15px;
padding-left : 15px;
font-family : Verdana;
color : #333333;
text-align : left;
font-size : 20px;
}
p {
margin-top : 0;
padding-right : 15px;
padding-left : 15px;
font-family : Verdana;
color : #666666;
text-align : left;
font-size : 16px;
}
a img {
border : none;
}
a:link {
color : #42413c;
text-align : left;
}
a:visited {
color : #42413c;
text-decoration : underline;
}
a:hover, a:active {
text-decoration : none;
color : #c71f2e;
}
a {
outline : none;
}
.container {
width : 960px;
background : #ffffff;
margin : 0 auto;
}
.mainbody {
width : 1000px;
background : #ffffff;
margin : 0 auto;
}
.content {
padding : 10px 0;
width : 780px;
float : right;
}
.content ul, .content ol {
padding : 0 15px 15px 40px;
}
nav ul {
list-style : none;
border-top : 0 solid #666;
margin-top : 5px;
margin-bottom : 15px;
text-indent : 15px;
font-size : 14px;
font-family : Verdana, Geneva, sans-serif;
}
nav ul li {
border-bottom : 0 solid #666;
}
nav ul a, nav ul a:visited {
padding : 5px 5px 5px 15px;
display : block;
width : 160px;
text-decoration : none;
background : #ffffff;
}
nav ul a:hover, nav ul a:active {
background : #eeeeee;
}
footer {
padding : 0 0;
background : #fff;
position : relative;
clear : both;
}
header, section, footer, aside, nav, article, figure {
display : block;
text-align : center;
float : left;
font-family : Verdana, Arial, Helvetica, sans-serif;
color : #666666;
display: inline;
}
.sidebar nav aside hr {
width : 183px;
align : left;

}
.sidebar nav aside table {
width : 183px;
border: 0;
cellspacing: 0;
}
.sidebar nav aside table img {
border: 0;

}
.container article table {
border-left-width : 2px;
border-left-style : solid;
border-left-color : #c71f2e;
margin-left : -22px;
width: 780px;
cellpadding:0;
}
.container footer table {
border-top-width : 1px;
border-top-style : solid;
border-right-style : none;
border-bottom-style : none;
border-left-style : none;
border-top-color : #999;
border-collapse : collapse;
font-family : Verdana, Geneva, sans-serif;
font-size : 14px;
font-style : normal;
line-height : normal;
color : #999;
padding-left : 50px;
padding-top : 0;
text-align : left;
width : 998px;
}
.container footer p1 a:hover, .container footer p1 a:active {
background : #fff;
color : #c71f2e;
text-align : center;
font-size : 13px;
text-decoration : none;
}
.container footer p1 {
font-family : Verdana, Geneva, sans-serif;
font-size : 13px;
color : #666;
text-align : center;
text-decoration : none;
}-->


The html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="keywords" content="furniture nj, furniture, furniture store nj, funiture land,furniture nj, sofas, modern furniture, funiture store in nj"/>
<meta name="description" content="furniture nj, furniture store nj, furniture outlet nj, furniture warehouse nj, furniture new jersey, furniture store in nj, furniture"/>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE]>
<style type="text/css">
Content, section { zoom: 1;}
</style>
<![endif]-->
<title>Furniture Land: NJ's Discount Furniture Store</title>
</head>

<body>

<div class="container">
<header>
<a href="http://www.furniturelandnewjersey.com"><img src="http://www.furniturelandnewjersey.com/image/images/logo3.png" alt="Furniture Store NJ" width="1000" height="116" style=" display:block; align:left;" /></a>

<div id="menuheader">
<ul id="navlists">
<li id="item-first"><a href="http://www.furniturelandnewjersey.com" target="_top"><span>Home</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/bedrooms1.html" target="_top"><span>Bedrooms</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/living-rooms1.html" target="_top"><span>Living Rooms</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/dining-rooms1.html" target="_top"><span>Dining Rooms</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/kids-bedrooms1.html" target="_top"><span>Kids Bedrooms</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/coffee-tables1.html" target="_top"><span>Coffee Tables</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/sofas1.html" target="_top"><span>Sofas</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/sofa-beds1.html" target="_top"><span>Sofa Beds</span></a></li>
<li><a href="http://www.furniturelandnewjersey.com/futons1.html" target="_top"><span>Futons</span></a></li>
<li id="item-last"><a href="http://www.furniturelandnewjersey.com/mattresses1.html" target="_top"><span>Mattresses </span></a></li>
</ul>
</div>
</header>
<div class="mainbody">
<div class="sidebar1">
<nav>
<ul>
<li><a href="http://www.furniturelandnewjersey.com/storehours.html">Store Hours</a></li>
<li><a href="http://furniturelandnewjersey.com/contact.html"><font color="#C71F2E">Contact</font></a></li>
<li><a href="http://maps.google.com/maps?q=160+Passaic+Avenue+B24,+Kearny,+NJ+07032">Directions</a></li>
<li><a href="http://www.furniturelandnewjersey.com/contact.html"> Prices</a></li>
<li><a href="http://www.facebook.com/pages/Furniture-Land/103100306437927">Deals</a></li>
<li><a href="http://www.furniturelandnewjersey.com/chairs1.html">Chairs</a></li>
<li><a href="http://www.furniturelandnewjersey.com/entertainment1.html">Entertainment</a></li>
<li><a href="http://www.furniturelandnewjersey.com/futons1.html">Futons</a></li>
<li><a href="http://www.furniturelandnewjersey.com/mattresses1.html">Mattresses</a></li>
</ul>
<aside><hr width="183px" align="left"/>
<table cellpadding="0" width="183" cellspacing="0"><tr>
<td><a href="http://www.facebook.com/pages/Furniture-Land/103100306437927" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/FaceBook_48x48.png" alt="Join Our Facebook Fan Page" width="32" height="32" border="0"></a></td>

<td><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/MySpace_48x48.png" alt="Check Us Out On MySpace" width="32" height="32" border="0"></a></td>

<td><a href="http://twitter.com/FurnitureLandNJ" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/Twitter_48x48.png" alt="Follow Us On Twitter" width="32" height="32" border="0"></a></td>
<td><a href="http://twitter.com/FurnitureLandNJ" target="_blank"><img src="http://www.furniturelandnewjersey.com/image/images/Feed_32x32.png" alt="Follow Us On Twitter" width="32" height="32" border="0"></a></td>
</tr>
</table>
<p>Like and Follow Us!</p>
</aside>
</nav> <!-- end .sidebar1 --></div>
<article class="content">

<section><table width="780" cellpadding="0">

<tr>
<td width="780" height="328" align="left" valign="top" bgcolor="#FFFFFF">
<h1> <font style="font-family:Verdana; font-size:14pt; color:#333333;"> <b>Call 201-998-6656 for Prices!<br><br><a href="mailto:furnitureland@verizon.net?subject=Question" > FurnitureLand@verizon.net</a></b></font></h1>
<p style="text-align:left"><font style="font-family:Verdana; font-size:12pt; color:#666666; text-align: right;"><b> NJ Showroom:</b><br> 160 Passaic Ave #24 <br> Kearny NJ, 07032 <br><br> Give us a call, shoot us an email, or come visit the store!<br> <br> <a href="http://www.facebook.com/pages/Furniture-Land/103100306437927">Like us on Facebook to hear about sales and more. </a></b></font> </p>
</td>
<td align="left"> <img src="http://www.furniturelandnewjersey.com/image/images/Map.png" name="Banner" width="265" height="298">
</td>
</table></section>
<!-- end .content --></article>
<!-- end .mainbody --></div>
<footer><table>
<tr>
<td>
</tr>
</table>
<p1><a href="http://www.furniturelandnewjersey.com">Home</a> |<a href="http://www.furniturelandnewjersey.com/furniture-store-nj.html">Furniture Store NJ</a> |<a href="http://maps.google.com/maps?q=160+Passaic+Avenue+B24,+Kearny,+NJ+07032">Directions</a> |<a href="http://www.furniturelandnewjersey.com/storehours.html">Store Hours</a> |<a href="http://www.furniturelandnewjersey.com/mattresses-info.html">Mattress Info</a></p1><p>&copy;2011 Furniture Land, Inc. All Rights Reserved.| Furniture Land is a real furniture store and mattress outlet in NJ with a full showroom and warehouse. </p>
</footer>
<!-- end .container --></div>
</body>
</html>
Sorry for posting so many questions.

alykins
07-29-2011, 03:14 PM
i think u have something cached... i just looked on IE7,8,9 and chrome... everything looks the same and no movement right



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum