#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Location
    Michigan.
    Posts
    35
    Rep Power
    12

    Suckerfish not aligning in IE


    I have been trying to get Son of Suckerfish dropdown menus to work in IE for me for the longest time... I just can't get it to align how I want it to when I add my own "tab" effect.

    Code:
    	<ul id="nav">
    
    		<li id="main1" class="mainMenu"><a href="./index.php">Home</a></li>
    		
    		<li id="main2" class="mainMenu"><a href="./about.php">About Us</a></li>
    
    		<li id="main3" class="mainMenu"><a href="./calendar.php">Calendar</a></li>
    
    		<li id="main4" class="mainMenu"><a href="./college.php">College&nbsp;Students</a>
    			<ul>
    				<li><a href="./studentNews.php">News</a></li>
    				<li><a href="./studentLeaders.php">Student Leaders</a></li>
    				<li><a href="./sundaySupper.php">Sunday Supper</a></li>
    				<li><a href="./serventEvents.php">Servant Events</a></li>
    				<li><a href="./gallery2/main.php?g2_itemId=40">Fall Retreat</a></li>
    			</ul>
    		</li>
    		
    		<li id="main5" class="mainMenu"><a href="./family.php">Family&nbsp;Ministry</a>
    			<ul>
    				<li><a href="./family.php">Overview</a></li>
    				<li><a href="./fmSchedule.php">Schedule</a></li>
    				<li><a href="./fmActivities.php">Activities</a></li>
    				<li><a href="./gallery2/main.php?g2_itemId=53">Photos</a></li>
    				<li><a href="./fmYouCanHelp.php">You Can Help</a></li>
    				<li><a href="./fmCoordination.php">Education Coordination Team</a></li>
    			</ul>
    		</li>
    		
    		<li id="main6" class="mainMenu"><a href="./serving.php">Ways&nbsp;to&nbsp;Serve</a></li>
    		
    		<li id="main7" class="mainMenu"><a href="./giving.php">Ways&nbsp;to&nbsp;Give</a>
    			<ul>
    				<li><a href="./giving.php">Financial Home</a></li>
    				<li><a href="https://www.eservicepayments.com/cgi-bin/specialwebapp.vps?appid=40a27221f816144b21e9f2e0d81891b8a68820b814b79fc6caf83c6a4fcf06b22f288aa4a34fa442a76b20a4eb1041b012267f0823e0ef99aeca1bf9c914f523">Make A Gift Online</a></li>
    				<li><a href="./eft.php">Electronic Fund Transfer</a></li>
    				<li><a href="./matching.php">Matching Gifts</a></li>
    				<li><a href="./meijer.php">Meijer Community Rewards</a></li>
    				<li><a href="./givingTools.php">Tools for Giving</a></li>
    				<li><a href="./endowment.php">Endowment Fund</a></li>
    			</ul>
    		</li>
    		
    		<li id="main8" class="mainMenu"><a href="./contact.php">Contact Us</a></li>
    		
    
    
    	</ul>
    That's the HTML

    Code:
    #nav {
    	float: left;
    	list-style: none;
    	line-height: 1;
    	font-size: 16px;
    	padding: 0;
    	margin: 0 0 0.5em 0.6em;
    }
    
    #nav ul {
    	list-style: none;
    	background: #006600;
    	padding: 0;
    	border: 1px solid #000;
    }
    
    #nav li.sfhover ul {
    	left: 1em;
    }
    
    #nav a {
    	display: block;
    	color: white;
    	text-decoration: none;
    	padding: 0.25em;
    	padding-right:0;
    }
    
    #nav ul a {
    	display: block;
    	width: 6em;
    	color: white;
    	text-decoration: none;
    	background:none;
    	border:none;
    }
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 7em;
    	height:auto;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 13.9em;
    	font-weight: normal;
    	border: 1px solid #000;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em;
    }
    
    #nav li ul a {
    	width: 12em;
    
    }
    
    #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 {
    	left: auto;
    }
    
    #nav ul li:hover,  #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
    	background: #009900;
    }
    
    /*  Width of the tabs */
    #nav #main1 {
    	width:3.4em;
    }
    
    #nav #main2 {
    	width:4.6em;
    }
    
    #nav #main3 {
    	width: 4.5em;
    }
    
    #nav #main4 {
    	width:7.85em;
    }
    
    #nav #main5 {
    	width:7em;
    }
    
    #nav #main6 {
    	width:6.8em;
    }
    
    #nav #main7 {
    	width:6.3em;
    }
    
    #nav #main8 {
    	width:5.5em;
    }
    
    #nav li {
    	margin-right: 3px;
    	border: 1px solid #000;
    	background: #006600;
    	color: white;
    	text-decoration:none;
    }
    
    #nav li ul li {
    	border:none;
    	background: #006600;
    	color: white;
    	text-decoration:none;
    }
    
    #nav li ul {
    	border: 1px solid black;
    }
    
    #nav li:hover, #nav li.sfhover {
        position: static;
    }
    And that's the CSS


    Just in case this will help, here's a link to a test page (just throw together so There is no content other than the menu)
    http://www.martinlutherchapel.org/test.html
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, Belak.

    What's the "mainMenu" class for? It looks like "dead weight" to me.

    Remove these three rules:
    Code:
    #nav li.sfhover ul {
    	left: 1em;
    }
    
    #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*/ {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
        position: static;
    }
    and add these two:
    Code:
    #nav li {
      position:relative;
    }
    
    #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 {
    	left: 0;
    }
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Location
    Michigan.
    Posts
    35
    Rep Power
    12
    It didn't do anything...
    I removed the manyMenu class (you're right, it was blank. I changed how I styled that section earlier and forgot about it...)
    The other 2 changes didn't change anything...

    I'm more of a PHP coder than any type of visual stuff...
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Perhaps I didn't understand what you were asking. You weren't very descriptive. Could you show us an image of what you're trying to achieve?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Location
    Michigan.
    Posts
    35
    Rep Power
    12
    Here's what I'm seeing in IE:


    See how the dropdown is skewed to the side?
    It should be lined up like in this picture (firefox):
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    The code I posted should fix that. Are you sure you made the changes exactly like I said?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Location
    Michigan.
    Posts
    35
    Rep Power
    12
    Positive.
    Here's the css code:
    Code:
    body {
    	padding: 0;
    	font-family: Arial, Helvetica, sans-serif;	
    }
    .container {
    	width:800px;
    	border: 1px solid #000;
    	margin: 0;
    	margin-left: auto; 
    	margin-right: auto;
    }
    #content {
    	clear:left;
    }
    
    #nav {
    	float: left;
    	list-style: none;
    	line-height: 1;
    	font-size: 16px;
    	padding: 0;
    	margin: 0 0 0.5em 0.6em;
    }
    
    #nav ul {
    	list-style: none;
    	background: #006600;
    	padding: 0;
    	border: 1px solid #000;
    }
    
    #nav a {
    	display: block;
    	color: white;
    	text-decoration: none;
    	padding: 0.25em;
    	padding-right:0;
    }
    
    #nav ul a {
    	display: block;
    	width: 6em;
    	color: white;
    	text-decoration: none;
    	background:none;
    	border:none;
    }
    #nav li {
    	margin-right: 3px;
    	border: 1px solid #000;
    	background: #006600;
    	color: white;
    	text-decoration:none;
    	float: left;
    	padding: 0;
    	width: 7em;
    	position:relative;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 13.9em;
    	font-weight: normal;
    	border: 1px solid #000;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em;
    }
    
    #nav li ul a {
    	width: 12em;
    
    }
    
    #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 {
    	left: 0;
    }
    
    #nav ul li:hover,  #nav li:hover, #nav ul li.sfhover, #nav li.sfhover {
    	background: #009900;
    }
    
    /*  Width of the tabs */
    #nav #main1 {
    	width:3.4em;
    }
    
    #nav #main2 {
    	width:4.6em;
    }
    
    #nav #main3 {
    	width: 4.5em;
    }
    
    #nav #main4 {
    	width:7.85em;
    }
    
    #nav #main5 {
    	width:7em;
    }
    
    #nav #main6 {
    	width:6.8em;
    }
    
    #nav #main7 {
    	width:6.3em;
    }
    
    #nav #main8 {
    	width:5.5em;
    }
    
    #nav li ul li {
    	border:none;
    	background: #006600;
    	color: white;
    	text-decoration:none;
    }
    And I removed the "mainMenu" class from anywhere in the page.

    EDIT: Could this be some bug in IE7?
  14. #8
  15. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Ah. Another example of why assumptions are dangerous. I didn't notice that you didn't set the margins on the <ul>s to 0. Do that and it should be fine.

    Many elements have default padding and/or margins.
    I recommend that you read No Margin For Error and Starting with CSS: revisited.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Location
    Michigan.
    Posts
    35
    Rep Power
    12
    Ok. That's a little odd, but it worked

    Thanks SO much for your help.
    I can finally get started with the "fun" php scripting. lol.
  18. #10
  19. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    Why is it odd? Different browsers have different defaults for margins and padding on many elements.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2007
    Location
    Michigan.
    Posts
    35
    Rep Power
    12
    Well, I guess it's not odd. I just wish there were standards that more browsers followed.

IMN logo majestic logo threadwatch logo seochat tools logo