Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member
    Join Date
    Sep 2009
    Posts
    2
    Member #
    19873
    Hi,
    I'm brand new here and fairly new to CSS. I've been designing a site for a client and have everything working in all browsers except a submenu isn't showing properly in IE7 (don't have access to earlier versions of IE). Here's the link: http://pinnacleoutdoors.net/products2.html. Thanks in advance for any help!

    Jen

    Here's the CSS for the submenu:
    Code:
    #productNav{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:13px;
    	font-variant: small-caps;
    	margin: 0px 0px 0px 64px;
    	padding:0px 0px 0px 0px;
    	height:43px;
    	position:absolute;
    	float:left;
    	clear:both;
    }
    #productNav ul{
    	margin:0;
    	padding:0;	
    	list-style:none;
    }
    #productNav div{
    	margin:0;
    	padding:0;
    	width:100%;
    	clear:left;
    }
    #productNav li{
    	float:left;
    }
    #productNav a:link{
    	background:transparent url('images/tab2.jpg') no-repeat scroll left top;
    	font-family:Times, Times New Roman, serif;
    	font-weight:bold;
    	font-size:13px;
    	font-variant: small-caps;
    	display:block;
    	width:110px;
    	height:43px;
    	color:#A35507;
    	text-decoration:none;
    	text-align:center;
    	display:table-cell; 
    	vertical-align:middle;
    }
    #productNav a:visited{
    	background:transparent url('images/tab2.jpg') no-repeat scroll left top;
    	font-family:Times, Times New Roman, serif;
    	font-weight:bold;
    	font-size:13px;
    	font-variant: small-caps;
    	display:block;
    	width:110px;
    	height:43px;
    	color:#A35507;
    	text-decoration:none;
    	text-align:center;
    	display:table-cell; 
    	vertical-align:middle;
    }
    #productNav a:hover{
    	font-family:Times, Times New Roman, serif;
    	font-weight:bold;
    	font-size:13px;
    	font-variant: small-caps;
    	display:block;
    	width:110px;
    	height:43px;
    	color:#333333;
    	text-decoration:none;
    	text-align:center;
    	display:table-cell; 
    	vertical-align:middle;
    }
    #productNav #active{
    	background:transparent url('images/tab2.jpg') no-repeat;
    	font-family:Times, Times New Roman, serif;
    	font-weight:bold;
    	font-size:13px;
    	font-variant: small-caps;
    	display:block;
    	width:110px;
    	height:43px;
    	color:#333333;
    	text-decoration:none;
    	text-align:center;
    	display:table-cell; 
    	vertical-align:middle;
    }
    #productNav #active a{
    	background:transparent url('images/tab2.jpg') top right no-repeat;
    	font-family:Times, Times New Roman, serif;
    	font-weight:bold;
    	font-size:13px;
    	font-variant: small-caps;
    	display:block;
    	width:110px;
    	height:43px;
    	color:#333333;
    	text-decoration:none;
    	text-align:center;
    	display:table-cell; 
    	display:table-cell; 
    	vertical-align:middle;
    }
    And the HTML, div is called productNav:
    HTML Code:
    <div id="mainNavContainer">
    <div id="topNav" class="clear">
    				<ul>
    					<li id="homeLink"><a href="index.html" title="Home">Home</a></li>
    					<li id="aboutLink"><a href="about.html" title="About Us">About Us</a></li>
    					<li id="productsLink"><a href="products.html" title="Our Products">Our Products</a></li>
    					<li id="prostaffLink"><a href="prostaff.html" title="Pro Staff">Pro Staff</a></li>
    					<li id="resourcesLink"><a href="resources.html" title="Resources">Resources</a></li>
    					<li id="communityLink"><a href="community.html" title="Community">Community</a></li>
    					<li id="vendorsLink"><a href="vendors.html" title="Vendors">Vendors</a></li>
    					<li id="contactLink"><a href="contact.html" title="Contact Us">Contact Us</a></li>
    				</ul>
    	  </div>
    	<div id="productNav">
    	<ul>
    		<li><a href="products_scents.html">Deer Scents &amp; Attractants</a></li>
    		<li><a href="products_gamecalls.html">Game Calls</a></li>
    		<li><a href="products_scentcontrol.html">Scent Control</a></li>
    		<li><a href="products_waterfowl.html">Waterfowl</a></li>
    		<li><a href="products_accessories.html">Hunting Accessories</a></li>
    		<li><a href="products_art.html">Photography &amp; Art</a></li>
    		<li><a href="products_apparel.html">Pinnacle Apparel</a></li>
    		<li><a href="products_health.html">Outdoor Health &amp; Nutrition</a></li>
    	</ul>
    	</div>		
    </div>

  2.  

  3. #2
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ie7 only supports hover on the a tag. sorry dude. even if you get it to work on ie7 it will not work properly. for a sec micro thought javascript would rule the web, then apple and firefox jumped in both feet first supporting css3 and google started penalizing sites that had javascript dependent nav. couple that with the downward spiral of their stock and they finaly felt the presure to add css support but it was so late in the game the support is limitted, we call it ie8.

    while($get_it !== true){ continue; }

  4. #3
    Junior Member
    Join Date
    Sep 2009
    Posts
    2
    Member #
    19873
    Thanks for the reply, Dorky. Is there a way around this IE inadequacy? I guess I don't understand how this won't work since I've basically got the same concept working on the main navigation (above the submenu). I've also gotten it to work on other sites I've done (ex. www.cpnsk.com). So what is the deal with it not working in this particular situation? Could it be because I've already got another menu right above it? But I don't know why that would affect this... Thoughts?

    Thanks again!
    Jen

  5. #4
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    not sure man. like i said you may be able to make it work but microsoft has an article(google it i dont remember the url) that gives the details about css hover and the report says ie7 only supports it on the a tag. i still use it for on page popups but not for nav because the ie7 issue. i totaly feel your pain. i had to do away with css drop nav because the poor support in ie7. one of the things you may try is adding { overflow: hidden; } to the element in question.

    while($get_it !== true){ continue; }


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:55 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com