1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Will pay for help with CSS menu for IE 7 and IE 6

Discussion in 'CSS' started by Mojave, Jun 15, 2007.

  1. #1
    I'm having trouble with my CSS menu. The last two sections are disappearing on rollover and the dropdown menus are working for the last two. But the code looks the same for all the menu items to me. What am I doing wrong?

    If you can help me get this to work, I'll rep and if it will take a while, I'd send paypal, just let me know a fair quote.

    The CSS and HTML are here (I know the CSS file is messy, I'll clean it up once I figure this problem out):

    http://www.thisismojave.com/navtest/

    Thanks to anybody who helps me out.

    - R
     
    Mojave, Jun 15, 2007 IP
  2. Audentio

    Audentio Well-Known Member

    Messages:
    424
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    108
    #2
    I dont see a problem. :p Is it just in IE?
     
    Audentio, Jun 15, 2007 IP
  3. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hey Mojave, I saw your thread on SitePoint about this. I'm still looking at it, but I do recommend combining all the lists into a single nested list. Is that ok with you?

    Also, would you like me to cross-post my solution here as well as at SitePoint?
     
    Dan Schulz, Jun 15, 2007 IP
  4. dollcharm

    dollcharm Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I don't see a problem at all, they all look fine to me.
     
    dollcharm, Jun 15, 2007 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Oh there is a problem, all right. I can see it in both IE 7 and my IE 6 standalone.

    (Mojave, I'm going to be out of town today, but I'll take my stab at it tomorrow if that's ok with you. Bear in mind that I may end up re-writing the page as a last resort though. But I'll do my best to avoid having to do that.)
     
    Dan Schulz, Jun 16, 2007 IP
  6. Mojave

    Mojave Peon

    Messages:
    145
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Dan,

    Thanks for the help - I'm hoping to get it fixed by monday, so tomorrow would be fine.
     
    Mojave, Jun 16, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    #navcontainer ul li {
    display: block;
    float: left;tht
     
    soulscratch, Jun 16, 2007 IP
  8. Mojave

    Mojave Peon

    Messages:
    145
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    soulscratch, thanks - I caught that last night, but I'm still getting the issue. thanks for looking, though.
     
    Mojave, Jun 16, 2007 IP
  9. Mojave

    Mojave Peon

    Messages:
    145
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    BTW - I upped it to $40 paypal to anyone who can help me today.
     
    Mojave, Jun 17, 2007 IP
  10. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Ok, I'm taking my stab at it now. One thing I noticed right away is that the link state order isn't being followed (should be :link :visited :hover :active). Not only that, but the dropdowns aren't appearing in IE 6 at all (checking IE 7 now).

    Another being that the list menus themselves can be consolidated into a single nested list of lists.

    Re-write is in progress.
     
    Dan Schulz, Jun 17, 2007 IP
  11. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #11
    http://205.209.146.76/nimblefish/index.html

    This is what I have so far, not everything is the same though, styling the dotted borders was a b!tch because I knew they would mess up in IE, tried using background images and just got fed up, so I left them out.

    Also, the background color of the primary nav anchors isn't the same, but I'm too tired to look into it again so hopefully someone can spot the error.

    I did have to use 1 hack for IE.. I'm wondering how Dan is going to do his.
     
    soulscratch, Jun 17, 2007 IP
  12. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #12
    I just noticed that the right hand featured clients area is messed up, I think you want the white background to go all the way down, the way to do it would be to take the color of the bottom most gradient on the left, and white on the right, and apply like a 700x1 gif background to #content with repeat-y, this is known as faux columns.
     
    soulscratch, Jun 17, 2007 IP
  13. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I'm hardly touching the HTML code (as much as I wanted to get rid of the tables), but I did toss the entire stylesheet.

    As for the dotted border, just use 2px instead of 1 and IE will be fine. :)
     
    Dan Schulz, Jun 17, 2007 IP
  14. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Ok, it's a (kinda) dirty job since I don't like to mess with "layout tables" but here you go. I nested the menu lists and cleaned up your whole stylesheet for you as well. Had to remove an inline style from the footer area and set the main content table to a fixed width, but at least it's working cross-browser. Tested in IE 6, IE 7, Firefox 2.0.4, Opera 9.1, and Safari 3 (Windows) Public Beta.

    I did re-use part of your stylesheet, so it's not as "optimal" or "clean" as it could be (I'll leave that up to you). If you want the dropdown menu to work in IE 6, let me know and I'll show you how to do that as well.
    
    <!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>Nimblefish - get relevant. get results.</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<base href="http://www.thisismojave.com/navtest/" />
    	<style type="text/css">
    	
    	body {
    		background: #E4E4E4 url('images/body-bg.jpg') left top repeat-x;
    		color: #818181;
    		font: normal 12px/16px Arial, Helvetica, sans-serif;
    		margin: 0 auto;
    		padding: 0;
    		width: 809px;
    	}
    	
    	.main-table {
    		margin: 12px auto 80px;
    	}
    		.index-header-bg {
    			background: url('images/index-header-bg.gif') left top no-repeat;
    			height: 122px;
    			padding: 0 6px 0 4px;
    		}
    		
    		#menu, #menu ul  {
    			list-style: none;
    			margin: 0;
    			padding: 0;
    		}
    		
    		#menu {
    			height: 35px;
    		}
    		
    		* html #menu {
    			overflow: hidden;
    		}
    			#menu li {
    				border-left: 1px dotted #F7F7F7;
    				display: inline;
    				float: left;
    				height: 35px;
    				margin: 0;
    				padding: 0;
    				position: relative;
    				text-align: center;
    				width: 106px;
    			}
    			
    			* html #menu li {
    				border-left: 2px;
    			}
    			
    			#menu li:hover ul {
    				left: 0;
    			}
    				#menu ul {
    					background: url('images/nav_bottom.gif') bottom left repeat-x;
    					border-left: 1px dotted #F7F7F7;
    					border-right: 1px dotted #F7F7F7;
    					margin: 0;
    					min-height: 1%;
    					padding: 0 0 41px 0;
    					position: absolute;
    						top: 36px;
    						left: -999em;
    				}
    				
    				* html #menu ul {
    					border-left: 2px dotted #F7F7F7;
    					border-right: 2px dotted #F7F7F7;
    				}
    					#menu ul li {
    						border-left: 0;
    						display: block;
    						height: auto;
    						margin: 0;
    						padding: 0;
    						text-align: left;
    						width: 106px;
    					}
    				
    				#menu a {
    					background: url('images/menu-normal-bg.gif') left top repeat-x;
    					color: #C9E4F6;
    					display: block;
    					font: bold 13px/30px Arial, Helvetica, sans-serif;
    					margin: 0;
    					padding-top: 10px;
    					text-decoration: none;
    					text-transform: uppercase;
    					width: 100%;
    				}
    				
    				#menu a:hover {
    					/* background: url('images/menu-hover-bg.gif') left top repeat-x; */
    					color: #FFF;
    					padding: 0;
    				}
    					#menu ul a {
    						background: #3AB0FD;
    						color: #C9E4F6;
    						display: block;
    						font: bold 11px/10px Arial, Helvetica, sans-serif;
    						padding: 15px 0 15px 7px;
    						text-align: left;
    						text-decoration: none;
    						text-transform: none;
    						width: 99px;
    					}
    					
    					#menu ul a:hover {
    						background: #3AB0FD;
    						color: #FFF;
    						padding: 15px 0 15px 7px;
    					}
    		
    		.body-left-bg {
    			background: url('images/body-left-bg.jpg') left top repeat-y;
    			width: 4px;
    		}
    			.body-banner {
    				background: url('images/body-banner.jpg') left top no-repeat;
    				padding-top: 303px;
    			}
    				.body-inside-bg {
    					background: #FAFAFA url('images/body-inside-bg.gif') left top repeat-x;
    					border-right: 1px solid #FFF;
    					padding: 34px 26px 50px 30px;
    				}
    					.fretured-client-bg {
    						background: #FFF url('images/featured-client-bg.gif') left top no-repeat;
    						padding-left: 27px;
    						width: 225px;
    					}
    						.blue-title {
    							background-color: inherit;
    							color: #0089E5;
    							font-size: 15px;
    							font-weight: bold;
    							line-height: 20px;
    							text-decoration: none;
    						}
    						
    						.body-link {
    							background: transparent;
    							color: #0984D7;
    							font-weight: bold;
    							text-decoration: none;	
    						}
    						
    						.body-link:hover {
    							background: #0984D7;
    							color: #FFF;
    							text-decoration: underline;
    						}
    	
    		.body-right-bg {
    			background: url('images/body-right-bg.jpg') left top repeat-y;
    			width: 4px;
    		}
    		
    		.footer-bg {
    			background: url('images/footer-bg.gif') left top no-repeat;
    			color: #FAFAFB;
    			height: 76px;
    			padding: 14px 33px 10px 33px;
    		}
    			.footer-link {
    				background-color: transparent;
    				color: #FAFAFA;
    				font: normal 12px/16px Arial, Helvetica, sans-serif;
    				text-decoration: none;
    			}
    			
    			.footer-link:hover {
    				background-color: transparent;
    				color: #D9F0FF;
    				text-decoration: underline;
    			}
    	
    	</style>
    </head>
    <body>
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
    	<tr>
    		<td align="center" valign="top">
    			<table width="809" border="0" cellpadding="0" cellspacing="0" class="main-table">
    				<tr>
    					<td align="left" valign="top">
    						<table width="809" border="0" cellspacing="0" cellpadding="0">
    							<tr>
    								<td align="left" valign="top" class="index-header-bg">
    									<table width="100%" border="0" cellspacing="0" cellpadding="0">
    										<tr>
    											<td height="86" align="left" valign="bottom">
    												<img src="images/logo.jpg" alt="" width="169" height="58" hspace="30" />
    											</td>
    										</tr>
    										<tr>
    											<!-- Start Main Navigation -->
    											<td width="779" height="35" style="padding-left:240px;">
    												<ul id="menu">
    													<li><a href="/company">Company</a>
    														<ul>
    															<li><a href="/company/index.html">Mission</a></li>
    															<li><a href="/company/team.html">Team</a></li>
    															<li><a href="/company/board.html">Board Members</a></li>
    															<li><a href="/company/careers.html">Careers</a></li>
    														</ul>
    													</li>
    													<li><a href="/solutions">Solutions</a>
    														<ul>
    															<li><a href="/solutions/index.html">Overview</a></li>
    															<li><a href="/solutions/handraiser.html">Hand-Raiser</a></li>
    															<li><a href="/solutions/crosssell.html">Cross-sell</a></li>
    															<li><a href="/solutions/salesdriven.html">Sales-driven</a></li>
    														</ul>
    													</li>
    													<li><a href="/services">Services</a>
    														<ul>
    															<li><a href="/services">Overview</a></li>
    														</ul>
    													</li>
    													<li><a href="/technology">Technology</a>
    														<ul>
    															<li><a href="/technology">Overview</a></li>
    															<li><a href="/technology/PURL.html">PURL</a></li>
    															<li><a href="/technology/print.html">Individualized Print</a></li>
    															<li><a href="/technology/email.html">Individualized Email</a></li>
    															<li><a href="/technology/dashboard.html">Dashboard</a></li>
    														</ul>
    													</li>
    													<li><a href="/casestudies">Case Studies</a>
    														<ul>
    															<li><a href="/casestudies/index.html">Overview</a></li>
    															<li><a href="/casestudies/sony.html">Sony</a></li>
    															<li><a href="/casestudies/hp.html">HP</a></li>
    															<li><a href="/casestudies/adobe.html">Adobe</a></li>
    															<li><a href="/casestudies/backroads.html">Backroads</a></li>
    														</ul>
    													</li>
    												</ul>
    											</td>   
    											<!-- End Main Navigation -->                       
    										</tr>
    									</table>
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    				<tr>
    					<td align="left" valign="top">
    						<table width="809" border="0" cellspacing="0" cellpadding="0">
    							<tr>
    								<td align="left" valign="top" class="body-left-bg">
    									<img src="images/left-bar.gif" alt="" width="4" height="97" />
    								</td>
    								<td align="left" valign="top" bgcolor="#FFFFFF">
    									<table width="801" border="0" align="center" cellpadding="0" cellspacing="0">
    										<tr>
    											<td align="left" valign="top" class="body-banner">
    												<table width="801" border="0" cellspacing="0" cellpadding="0">
    													<tr>
    														<td align="left" valign="top">
    															<table width="100%" border="0" cellspacing="0" cellpadding="0">
    																<tr>
    																	<td height="27" align="left" valign="top">
    																		&nbsp;
    																	</td>
    																</tr>
    																<tr>
    																	<td align="left" valign="top" class="body-inside-bg">
    																		<table width="100%" border="0" cellspacing="0" cellpadding="0">
    																			<tr>
    																				<td height="30" align="left" valign="top" class="blue-title">Meet the Industry Leader in Micromarketing Engines</td>
    																			</tr>
    																			<tr>
    																				<td align="left" valign="top">
    																					<table width="100%" border="0" cellspacing="0" cellpadding="0">
    																						<tr>
    																							<td width="113" align="left" valign="top">
    																								<img src="images/project-screen.jpg" alt="" width="90" height="113" />
    																							</td>
    																							<td align="left" valign="top">
    																								<strong>Nimblefish is the world's premier provider of <a href="#" class="body-link">automated micromarketing engines</a> for customer-centric enterprises. Our customized micromarketing engines enable large and leading-edge organizations to leverage the latest technology-powered relevant-messaging capabilities to significantly increase sales and win hearts and minds by providing the best customer experience. </strong>
    																								<br />
    																								<a href="#" class="body-link">Learn More</a><img src="images/orange-arrow.gif" alt="" width="6" height="6" />
    																							</td>
    																						</tr>
    																					</table>
    																				</td>
    																			</tr>
    																		</table>
    																	</td>
    																</tr>
    															</table>
    														</td>
    														<td align="left" valign="top" class="fretured-client-bg">
    															<table width="100%" border="0" cellspacing="0" cellpadding="0">
    																<tr>
    																	<td height="27" align="left" valign="middle" class="blue-title">
    																		Featured Clients
    																	</td>
    																</tr>
    																<tr>
    																	<td align="left" valign="middle">
    																		<table width="100%" border="0" align="left" cellpadding="10" cellspacing="0">
    																			<tr>
    																				<td align="left" valign="middle">
    																					<img src="images/apple.gif" alt="apple" width="34" height="33" />
    																				</td>
    																				<td align="left" valign="middle">
    																					<img src="images/at&amp;t.gif" alt="at&amp;t" width="71" height="32" />
    																				</td>
    																			</tr>
    																			<tr>
    																				<td align="left" valign="middle">
    																					<img src="images/hp.gif" alt="hp" width="43" height="34" />
    																				</td>
    																				<td align="left" valign="middle">
    																					<img src="images/lowe's.gif" alt="LOWE's" width="73" height="32" />
    																				</td>
    																			</tr>
    																			<tr>
    																				<td align="left" valign="middle">
    																					<img src="images/kodak.gif" alt="KODAK" width="61" height="19" />
    																				</td>
    																				<td align="left" valign="middle">
    																					<img src="images/adobe.gif" alt="Adobe" width="28" height="37" />
    																				</td>
    																			</tr>
    																		</table>
    																	</td>
    																</tr>
    															</table>
    														</td>
    													</tr>
    												</table>
    											</td>
    										</tr>
    									</table>
    								</td>
    								<td align="left" valign="top" class="body-right-bg">
    									&nbsp;
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    				<tr>
    					<td align="left" valign="top" class="footer-bg">
    						<table width="100%" border="0" cellspacing="0" cellpadding="0">
    							<tr>
    								<td style="height="20px" align="left" valign="middle">
    									<a href="#index.html" class="footer-link">Home</a> | <a href="#company.html" class="footer-link">Company</a> | <a href="solutions.html" class="footer-link">Solutions</a> | <a href="#services.html" class="footer-link">Services</a> | <a href="#technology.html" class="footer-link">Technology</a> | <a href="case-studies.html" class="footer-link">Case Studies</a> | <a href="#contact-us.html" class="footer-link">Contact Us</a>
    								</td>
    							</tr>
    							<tr>
    								<td style="font-size:10px;" height="20" align="left" valign="middle">
    									&copy; 2007 Nimblefish Technologies, Inc. All Rights Reserved
    								</td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    			</table>
    		</td>
    	</tr>
    </table>
    </body>
    </html>
    
    Code (markup):
     
    Dan Schulz, Jun 17, 2007 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #15
    It was an assorted collection of "hasLayout" issues that was causing him problems. I got them fixed though. :)
     
    Dan Schulz, Jun 17, 2007 IP
  16. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #16
    I think your nested UL is off by a pixel from the left, and the background color of the primary nav anchor should change on hover, and this is why I just gave up on the dotted borders, because they went ALL the way down and the bottom part of the nested UL doesnt look "right". I tried using a background image on the nested LIs that's equal to their width, and then put a class on the last nav item and give it the background image of the nav_bottom.gif

    IMO, you should use a very light blue solid border instead of dotted white.
     
    soulscratch, Jun 18, 2007 IP
  17. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Well, for starters, I was in excruciating pain (ended up calling 911 because of it), and two, I wanted to preserve as much of the OP's code as possible (since this was free help, not a contract job).

    If the OP wants to hire me for contract work (which would include re-coding to MY specifications), he knows how to contact me. :)

    Now if you'll excuse me, I have to head off to the pharmacist so I can get my vicodin. :(
     
    Dan Schulz, Jun 18, 2007 IP