Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15

    Drop down menu problem


    I have used suckerfish dropdown menu on this site herel

    but in IE7 the 1st level links are to far left on the services menu.
    Fine in firefox.

    It will be something i missed

    here is the css i used on the menu

    Code:
    /* Start Menu  */
    #nav, #nav ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	
    }
    
    #nav a {
    	display: block;
    	width: 90px;
    	text-decoration:none;
    	color:#000000;
    	font-size:11px;
    	font-weight:400;
    }
    
    #nav li {
    	float: left;
    }
    
    #nav li ul {
    	position: absolute;
    	width: 90px;
    	left: -999em;
    	background-color:#CCCCCC;
    	
    }
    
    #nav li:hover ul {
    	left: auto;
    }
    
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    		
    #menu1 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu2 {
    		float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu3 {
    	float: left;
    	width: 90px;
    	padding-top:10px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu4 {
    	float: left;
    	width: 90px;
    	padding-top:10px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu5 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    		
    				#menu6 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    		#menu7 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu8 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu9 {
    		background-image:url(menu6.jpg);
    		background-repeat:no-repeat;
    	float: left;
    	width: 220px;
    	height:33px;
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    
    /* End Menu */
    
    this is doing my head in i just can't see it.
  2. #2
  3. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Try adding this to your CSS.

    Code:
    <!--[if IE 7]>
    #nav li:hover ul {
    	right:20px;
    }
    <![endif]-->
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    no luck did not do a thing
  6. #4
  7. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    Try adding position: relative to #nav li.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    Did that as well with no luck again
  10. #6
  11. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Did you do the position:relative and add that into my code? Try margin-right:-20px; instead if that doesn't work.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    yup treid that in your code but still nothing.
  14. #8
  15. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Durr I am so stupid. I need to place position:absolute on the parent element...Try this in full replacement of the conditional comment

    Code:
    <!--[if IE 7]>
    #nav {
    position:absolute;
    }
    #nav li:hover ul {
    	right:0px;
    	position: relative;
    }
    <![endif]-->
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    Thanks for your help sorted now
    Last edited by afcbob; August 2nd, 2008 at 03:23 AM.
  18. #10
  19. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    Well it probably is there, but it's off the screen.

    Using

    Code:
    <!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>
    <title>Property Ladders - Getting the best out of your property while working to your budget</title>
    <meta name="keywords" content="Building company, builder, Plastering, Conservatories, Refurbishment, wood , Fitting windows"  />
    <meta name="description" content=" Building company, Getting the best out of your property while working to your budget"  />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* CSS Document */
    
    	* {
    		margin:0;
    		padding:0;
    	}
    
    /* Start Wrapper  */
    
    	#wrapper {
    		width:760px;
    		height:1000px;
    		margin: 0 auto;
    
    	}
    
    /* End Wrapper  */
    
    body {
    background-color: #CCCCCC;
    }
    
    
    	#logo {
    		background-image:url(http://www.host2design.co.uk/clients/test/logo.jpg);
    		background-repeat:no-repeat;
    		float:left;
    		width:760px;
    		height:74px;
    		background-color:#FFFFFF;
    	}
    /* Start Menu  */
    #nav, #nav ul {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	
    }
    
    #nav a {
    	display: block;
    	width: 90px;
    	text-decoration:none;
    	color:#000000;
    	font-size:11px;
    	font-weight:400;
    }
    
    #nav li {
    	float: left;
    }
    
    #nav li ul {
    	position: absolute;
    	width: 90px;
    	left: -999px;
    	background-color:#CCCCCC;
    	
    }
    #nav li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    		
    #menu1 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(http://www.host2design.co.uk/clients/test/menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu2 {
    		float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(http://www.host2design.co.uk/clients/test/menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu3 {
    	float: left;
    	width: 90px;
    	padding-top:10px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu4 {
    	float: left;
    	width: 90px;
    	padding-top:10px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu5 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(http://www.host2design.co.uk/clients/test/menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    		
    				#menu6 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(http://www.host2design.co.uk/clients/test/menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    		#menu7 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(http://www.host2design.co.uk/clients/test/menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu8 {
    	float: left;
    	width: 90px;
    	height:33px;
    	background-image:url(http://www.host2design.co.uk/clients/test/menu5.jpg);
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    	
    			#menu9 {
    		background-image:url(http://www.host2design.co.uk/clients/test/menu6.jpg);
    		background-repeat:no-repeat;
    	float: left;
    	width: 220px;
    	height:33px;
    	padding-top:15px;
    	font-size:11px;
    	text-align:center;
    	}
    
    /* End Menu */
    	
    
    
    /* Start Of Menu*/
    	#headerimage {
    	background-image:url(http://www.host2design.co.uk/clients/test/Property_09.jpg);
    	background-repeat:no-repeat;
    	float:left;
    	clear:both;
    	width:760px;
    	height:107px;
    	padding:1px 0px 1px 0px;
    	margin:-13px 0px 0px 0px;
    	background-color:#FFFFFF;
    	}
    
    
    	#mid {
    		background-image:url(http://www.host2design.co.uk/clients/test/Property_10.jpg);
    		background-repeat:repeat;
    		float:left;
    		clear:both;
    		width:745px;
    		height:25px;
    		padding:5px 0px 0px 15px;
    		
    	}
    		
    /* End Of Menu */
    
    
    /* Start Of Main Part */
    
    	#leftinfo {
    	background-color:#FFFFFF;
    	width:230px;
    	height:600px;
    	float:left;
    	clear:left;
    	
    	}
    
    	#greyinfo {
    	background-color:#CCCCCC;
    	float:right;
    	width:150px;
    	height:600px;
    	
    	}
    	
    	h1 {
    	font-size:20px;
    	text-align:center;
    	color:#000099;
    	padding:10px 0px 0px 0px;
    	
    	}
    	
    	h2 {
    	font-size:11px;
    	color:#000099;
    	padding:0px 0px 0px 150px;
    	}
    	
    	h3 {
    	font-size:12px;
    	color:#000099;
    	padding:5px 0px 0px 30px;
    	
    	}
    	
    	h4 {
    	font-size:12px;
    	color:#000099;
    	padding:0px 0px 0px 5px;
    	}
    	
    	
    	
    	p {
    	padding:15px 0px 0px 6px;
    	font-size:12px;
    	}
    	
    	#main {
    	float:left;
    	margin:0px 0px 0px 0px ;
    	width:530px;
    	height:600px;
    	background-color:#FFFFFF;
    	}
    	
    	#craftsman {
    	background-image:url(http://www.host2design.co.uk/clients/test/craftsman.jpg);
    	background-repeat:no-repeat;
    	width:150px;
    	height:120px;
    	margin:10px 0px 0px 170px;
    	background-color:#FFFFFF;
    	}
    	
    		#chester {
    	background-image:url(http://www.host2design.co.uk/clients/test/chester.jpg);
    	background-repeat:no-repeat;
    	width:150px;
    	height:150px;
    	margin:10px 0px 0px 170px;
    	background-color:#FFFFFF;
    	}
    	
    <!--[if IE 7]>
    #nav {
    position:absolute;
    }
    #nav li:hover ul {
    	right:0px;
    	position: relative;
    }
    <![endif]-->
    
    /* End Of Main Part */
    
    
    /* Start Of Services */
    	
    	
    	#services2 li {
    	font-size:11px;
    	margin:0px 0px 0px 15px;
    	}
    	
    		#services li {
    	font-size:11px;
    	margin:0px 0px 0px 20px;
    	}
    	
    		#services {
    
    	background-color:#FFFFFF;
    	float:left;	
    	}
    	
    	#services2 {
    	
    	background-color:#FFFFFF;
    	float:right;
    	
    	}
    	
    	#mainservices {
    	float:left;
    	margin:-1000px 0px 0px 230px ;
    	width:530px;
    	height:1000px;
    	background-color:#FFFFFF;
    	}
    	
    	#greyinfoservices {
    	background-color:#CCCCCC;
    	width:150px;
    	height:1000px;
    	margin:0px 0px 0px 80px;
    	}
    	
    	
    	#leftinfos {
    	background-color:#FFFFFF;
    	width:230px;
    	height:1000px;
    	float:left;
    	clear:left;
    	
    	}
    	
    /* End Of Services */
    
    /* Start Of HandyMan */
    	#mainhandy {
    	float:left;
    	margin:-900px 0px 0px 230px ;
    	width:530px;
    	height:900px;
    	background-color:#FFFFFF;
    	}
    	
    	
    	#greyinfohandy {
    	background-color:#CCCCCC;
    	width:150px;
    	height:900px;
    	margin:0px 0px 0px 80px;
    	}
    		#leftinfoh {
    	background-color:#FFFFFF;
    	width:230px;
    	height:900px;
    	float:left;
    	clear:left;
    	
    	}
    
    
    /* End Of HandyMan * /
    
    /* Start Of Gallery */
    
    	#maing {
    	float:left;
    	margin:0px 0px 0px 0px ;
    	width:530px;
    	height:1100px;
    	background-color:#FFFFFF;
    	}
    	
    	#gallery {
    	float:left;
    	margin:0px 0px 0px 40px ;
    	}
    	
    
    
    /* End Of Gallery */
    
    /* Start Of T&S */
    
    	
    	#maints {
    	float:left;
    	margin:-1100px 0px 0px 230px ;
    	width:530px;
    	height:1100px;
    	background-color:#FFFFFF;
    	}
    	
    	#greyinfots {
    	background-color:#CCCCCC;
    	width:150px;
    	height:1100px;
    	margin:0px 0px 0px 80px;
    	}
    	
    			#leftinfot {
    	background-color:#FFFFFF;
    	width:230px;
    	height:1100px;
    	float:left;
    	clear:left;
    	
    	}
    	
    
    /* End Of T&S */
    
    
    /* Start Of Contact Us */
    		
    		#contact {
    		margin:0px 0px 0px 30px;
    		font-size:12px;
    		}
    
    
    /* End Of Contact Us */
    
    
    
    /* Start Of Footer */
    
    	#footer {
    	background-image:url(http://www.host2design.co.uk/clients/test/buttom.jpg);
    	width:760px;
    	height:0px;
    	font-size:11px;
    	text-align:center;
    	padding:13px 0px 0px 0px;
    	margin:0px 0px 0px 0px;
    	float:left;
    	}
    
    
    /* End Of Footer */
    
    
    /* LightBox*/
    
    #lightbox{
    	position: absolute;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	line-height: 0;
    	}
    
    #lightbox a img{ border: none; }
    
    #outerImageContainer{
    	position: relative;
    	background-color: #fff;
    	width: 250px;
    	height: 250px;
    	margin: 0 auto;
    	}
    
    #imageContainer{
    	padding: 10px;
    	}
    
    #loading{
    	position: absolute;
    	top: 40%;
    	left: 0%;
    	height: 25%;
    	width: 100%;
    	text-align: center;
    	line-height: 0;
    	}
    #hoverNav{
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 100%;
    	width: 100%;
    	z-index: 10;
    	}
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{
    	width: 49%;
    	height: 100%;
    	background: transparent url(http://www.host2design.co.uk/clients/test/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(http://www.host2design.co.uk/clients/test/images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(http://www.host2design.co.uk/clients/test/images/nextlabel.gif) right 15% no-repeat; }
    
    
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto;
    	line-height: 1.4em;
    	overflow: auto;
    	width: 100%	
    	}
    
    #imageData{	padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
    #imageData #caption{ font-weight: bold;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
    		
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	}
    
    .thumbnail {
    border: 1px solid #CCCCCC;
    padding: 4px;
    } </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" sfhover";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    
    
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <!-- Start Of Logo Here -->
    		
    		<div id="logo">	</div>
    
    <!-- End Of Logo Here -->
    
    
    <!-- Start Of Menu Here -->
    
    		
    			<ul id="nav">
    				<li id="menu1"><a href="index.html">HOME</a></li>
    				<li id="menu2"><a href="services.html">SERVICES</a>
    			<ul>
    				<li id="menu3"><a href="services.html">SERVICES</a></li>
    				<li id="menu4"><a href="services.html">SERVICES</a></li>
    			</ul>
    			</li>
    				<li id="menu5"><a href="gallery.html">GALLERY</a></li>
    				<li id="menu6"><a href="handyman.html">HANDY MAN</a></li>
    				<li id="menu7"><a href="tands.html">SAFETY</a></li>
    				<li id="menu8"><a href="contact_us.html">CONTACT US</a></li>				
    				<li id="menu9">&nbsp;</li>
    			</ul>
    
    
    <!-- End Of Menu Here -->
    
    <!-- Start Of Header Here -->
    
    		<div id="headerimage"></div>
    
    		<div id="mid">Property Ladders</div>
    
    <!-- End Of Header Here -->
    
    <!-- Start Of Grey Info -->
    	<div id="leftinfo">
    		<div id="greyinfo">
    			<h3>Contact Details</h3>
    			
    			<p>Telephone:<br />
    			01978 810502</p>
    			<p>Mobile:<br />
    			07788640304</p>
    			<p>Email:<br />
    			paul@property-ladderss.com</p>
    		</div>
    	</div>
    		<div id="main">
    			<h1>HOME IMPROVEMENTS*&amp;*PROPERTY REPAIRS</h1>
    			<h2>SUPPORT*YOUR LOCAL BUILDER</h2>
    			<p>Even the smallest projects can require many different tradesmen, 
    			finding the right tradesmen at the right time is not only difficult but can be very expensive.<br /><br />
    		
    			OUR ONE STOP SHOP HAS ALL THE TRADESMEN YOU WILL NEED<br /><br />
    		
    			Not only saving you time nut saving you money from flat pack furniture to full property restoration.<br />
    			Through good planning and communications we offer a quality and cost effective service calls us for your free &amp; fair estimate with no hidden
    			extras we won't be beaten on price.<br />
    			Try our handyman service for those small jobs that never seem to get done. You can hire one of our handyman for full or half day at fixed rate
    			you can share our handyman between friends, family or even neighbors call our friendly staff who help you with how ling your jobs will take.
    			</p>
    			
    			<div id="craftsman"></div>
    			<p>The guild supports &amp; promotes excellence. Our rigorous selection procedure ensures the highest standards.
    				To the trade and public alike, the Guild’s emblem and Coat of Arms
    				Represent skill, integrity, quality and service in all. PROFESSIONALISM
    				</p>
    				
    				<div id="chester"></div>
    			
    		
    		</div>
    
    <!-- End Of Grey Info -->
    
    		<div id="footer">Copyright &copy; 2008 propert-ladders.com | All rights reserved |</div>
    
    </div>
    
    </body>
    </html>
    I have got it dropped down and working in IE7/6. FF3, Opera 9.5 and untested in Safari 3.1.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    Yeah sorted it thanks mate for all the help.
  22. #12
  23. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    No problem. Come back here for any additional help.
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    Rigth still 100% right in firefox the dropdown does not show that background color

    Here is the url to site


    This is the code i changed:

    Code:
    #nav li ul {
    	width: 90px;
    	left: -999em;
    	position: relative;
    	background-color:#CCCCCC;
    	padding-bottom:5px;
    }
    that works in ie7 if i change the position to position:absolute; works in fire fox.
  26. #14
  27. Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2001
    Location
    Right now? On my chair.
    Posts
    1,777
    Rep Power
    258
    You have some float:left;clear:both; in there...Try giving the z-index:999; and why did you add the padding in there?
    Use markup the semantic way. You wouldn't want your dog answering the phone for you, would you?
    HTML Validator || CSS Validator -- HTML / CSS Main forums. JavaScript and PHP...maybe
    Bones: HTML; Skin: CSS; Muscle: JavaScript; Brains: PHP; Memory: MySQL
  28. #15
  29. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2004
    Posts
    99
    Rep Power
    15
    thanks sorted.
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo