Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Suckerfish IE7 offset

    I have a sons of suckerfish dropdown here http://viperdesign.co.uk/dev/ese/defaultcopy.asp and it works well in every browser except IE7 which makes the submenus appear too far to the right.

    Here is my code:
    Code:
    #nav, #nav ul { /* all lists */
    		padding: 0;
    		margin: 0;
    		list-style: none;
    		float : left;
    		width : 147px; }
    	
    	#nav li { /* all list items */
    		position : relative;
    		float : left;
    		line-height : 1.25em;
    		margin-bottom : -1px;
    		width: 147px; }
    	
    	#nav li ul { /* second-level lists */
    		position : absolute;
    		left: -999em; 
    		margin-left : 148px;
    		margin-top : -32px; }
    	
    	#nav li ul ul { /* third-and-above-level lists */
    		left: -999em; margin-left:120px; border-left: 1px solid #e5e5e5; }
    	
    	#nav li a {
    		width: 112px;
    		w\idth : 111px;
    		display : block;
    		color : #fff;
    		text-decoration : none; text-align:left;
    		background: #00466d url(images/arrow.gif) no-repeat 8px 8px;
    		padding-top: 9px; padding-bottom:9px; padding-left:35px;
    		border-top: 1px solid #e5e5e5; }
    	
    	
    	
    	#nav li a:hover {
    		color: #ccc; background: #333 url(images/arrow.gif) no-repeat 10px 8px; }
    	
    	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    		left: -999em;  }
    	
    	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
    		left: 0; }
    	
    	#content {
    		margin-left : 12em; }
    	
    	
    	/*  VIPER MODS  */
    	
    	#nav li ul li a { background: #333; padding-left:8px; /*margin-left:-100px;*/ } /* Sub Menu style */ 
    	#nav li ul li a:hover { background: #333; color:#ccc; } /* Sub Menu hover */
    	
    	.menutop	{ background-image:url(images/menu-top.gif); height:18px; margin-bottom:0; }
    	.menubase	{ background-image:url(images/menu-base.gif); height:18px; margin-top:1px; }
    doctype is
    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">
    Having been trying to fix this for days now and would really appreciate some help!

    Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Is it OK in FF(2) at your end?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi

    Yeah looks fine in Mac Safari and FF and PC FF but not IE7

    Apologies I was messing with it around the time you posted so it may have looked different. I have put it back to how it was now.

    Any ideas?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Alright. I think the best way to deal with a multilevel drop down is to initially determine the required widths of each level. Then apply the corresponding left margins for the next level elements. Then apply display: block; to the anchors.

    Everything over! Now no need to apply display, margin-left properties for any of the other elements as all other elements inherit the widths and margins of it's parents.
    Have a try with
    Code:
    #nav, #nav ul { /* all lists */
    		padding: 0;
    		margin: 0;
    		list-style: none;
    		}
    	#nav{width:147px;}
    	#nav ul{width:130px; margin-left:148px;}
    	#nav ul ul{width:120px; margin-left:131px;}
    	* html #nav li{
    	height:1%; /*   */
    	}
    	
    	#nav li { /* all list items */
    		position : relative;
    		margin-bottom : -2px;
    		}
    	
    	#nav li ul { /* second-level lists */
    		position : absolute;
    		left: -999em; 
    		top:0; /* the top of every sub group*/
    		}
    	
    	#nav li ul ul { /* third-and-above-level lists */
    		left: -999em; 
    		border-left: 1px solid #e5e5e5;
    		}
    	
    	#nav li a {
    		/*width: 120px;*/
    		display : block;
    		color : #fff;
    		text-decoration : none; text-align:left;
    		background: #00466d url(arrow.gif) no-repeat 8px 8px;
    		/*padding-top: 9px; 
    		padding-bottom:9px; 
    		*/
    		height:32px;
    		line-height:32px; /* to centre the text, apply line-height, and remove all top& bottom paddings */
    		padding-left:35px;
    		border-top: 1px solid #e5e5e5; 
    		}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    strider (11-07-2008)

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok thanks for that - I have made the changes and it helps bring the subs into place but it has made the menu look 'odd' in IE7 so I'll have a play and see if I can get it to look right without breaking it!

    Cheers

  • #6
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oops my bad! Missed a 't' off the end of one of the heights - looks good now except the 3rd level butts into the second.

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Right, after a few tweaks it seems to work perfectly in Mac safari,FF and PC FF and IE7 - not sure about IE6 as I don't have it but I'm happy now

    Thanks for sorting this out

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Umm.. if all of them have the same width, then things would become much simplified
    It should work in IE6 as well, as I'd tested in it. Get an IE tester now.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, but I made the widths different because some of the titles were a lot longer in the submenus than the main categories and they were going on two lines


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •