SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast stef686's Avatar
    Join Date
    Aug 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tabbed Menu IE Problem

    This one is bugging me a little bit. I've used the tabbed menu from DynamicDrive for the menu on a site I'm putting together. That bits all working fine but I've made a few alterations that aren't working in IE.

    Well, it's not that its not working, just that I'm not quite getting the effect I'm after, so here's the link, code and info - if anyone has any ideas or suggestions please let me know!!

    The current state of the template can be seen here:
    http://216.70.108.61/

    It is the menu portion in question really. The menu uses the following HTML:
    HTML Code:
    <!-- Main Menu -->
    			<div id="main_menu">
    			  <ul>
    					<li class="on"><a href="./" title="Home"><span>Home</span></a></li>
    					<li><a href="gallery/" title="Gallery"><span>Gallery</span></a></li>
    					<li><a href="articles/" title="Articles"><span>Articles</span></a></li>
    					<li><a href="blogs/" title="Blogs"><span>Blogs</span></a></li>
    					<li><a href="resources/" title="Resources"><span>Resources</span></a></li>	
    					<li><a href="members/" title="Members"><span>Members</span></a></li>
    					<li><a href="forums/" title="Forums"><span>Forums</span></a></li>
    			  </ul>
    			</div>
    			<!-- Main Menu -->
    			
    			<div class="clear"></div>
    			
    			<!-- Search Bar -->
    			<div id="search_bar">
    				<p id="search_bar_left">16th September 2006, 14:49pm</p>
    				<div id="search_bar_right">
    					<form action="" method="post">
    						<fieldset>
    							<legend>Search</legend>
    							<input type="hidden" name="search_submit" value="Submit" />
    							<input class="input" type="text" id="frm_search_keywords" name="frm_keywords" value="search..." />
    							<input type="image" name="frm_search" src="images/butt_search.gif" alt="Search" />
    						</fieldset>
    					</form>
    					<p><a href="advanced/">Advanced</a></p>
    				</div>
    				<div class="clear"></div>
    			</div>
    			<!-- Search Bar -->
    And the CSS:
    Code:
    /*	-------------------------------------------------------------
    	MAIN MENU
    	-------------------------------------------------------------	*/
    	
    	#main_menu {
    		float: left;
    		width: 100%;
    		font-size: 1.1em;
    		line-height: normal;
    	}
    	
    		/*IE fix*/
    		* html #main_menu { 
    			margin-bottom: 1em;
    		}
    	
    		#main_menu ul{
    			list-style: none;
    			margin: 0;
    			margin-left: 68px;
    			padding: 0;
    		}
    	
    		#main_menu li{
    			display: inline;
    			margin: 0;
    			padding: 0;
    		}
    	
    		#main_menu a {
    			float: left;
    			background: url(../images/menu_bg1.gif) no-repeat left top;
    			margin-right: 4px;
    			padding-left: 9px;
    			text-decoration: none;
    		}
    	
    			#main_menu a span {
    				float: left;
    				display: block;
    				background: url(../images/menu_bg2.gif) no-repeat right top;
    				padding: 5px 19px 4px 10px;
    				color: #2D2D2D;
    			}
    	
    			/* Commented Backslash Hack hides rule from IE5-Mac \*/
    			#main_menu a span {
    				float:none;
    			}
    			/* End IE5-Mac hack */
    	
    			#main_menu a:hover span {
    				color: #1E517E;
    			}
    	
    			#main_menu .on a {
    				background-position:	0 -180px;
    			}
    	
    				#main_menu .on a span {
    					background-position: 100% -180px;
    					color: #FFF;
    					border-bottom: 2px solid #1E517E;
    				}
    	
    		#main_menu a:hover {
    			background-position: 0 -360px;
    		}
    	
    			#main_menu a:hover span {
    				background-position:100% -360px;
    			}
    			
    			#main_menu .on a:hover {
    				background-position:	0 -180px;
    			}
    	
    				#main_menu .on a:hover span {
    					background-position: 100% -180px;
    					color: #FFF;
    					border-bottom: 2px solid #1E517E;
    				}
    
    /*	-------------------------------------------------------------
    	SEARCH BAR
    	-------------------------------------------------------------	*/
    	
    	#search_bar {
    		border-top: 1px solid #1E517E;
    		border-bottom: 1px solid #1E517E;
    		margin-top: -2px;
    		color: #FFF;
    		padding: 8px 8px 6px 8px;
    		background: #6D9EBB url(../images/search_bar_bg.gif) repeat-x;
    	}
    	
    		#search_bar #search_bar_left {
    			float: left;
    		}
    		
    		#search_bar #search_bar_right {
    			float: right;
    		}
    		
    		#search_bar a {
    			color: #FFF;
    		}
    Plus these styles for IE only in a separate CSS file:
    Code:
    /*	-------------------------------------------------------------
    	MAIN MENU
    	-------------------------------------------------------------	*/
    	
    	#main_menu .on a span {
    		z-index: 100;
    	}
    
    /*	-------------------------------------------------------------
    	SEARCH BAR
    	-------------------------------------------------------------	*/
    	
    	#search_bar {
    		margin: -19px 4px 0 4px;
    		float: left;
    		z-index: 1;
    		padding: 8px 8px 0 8px;
    	}
    The problem is with the "active" menu item. In Firefox you will see that the active tab blends straight into the bar underneath. In IE, the light blue line spans all the way accross. My best guess is that the menu is sitting behind the bar underneath - as you can see from the code this bar has a minus margin to move it up, which in firefox seems to place it behind the menu. The light blue line is currently part of a background image.

    Now I'm not 100% that this is the best way to achieve what I'm after, if you know of another more efficient way please let me know - I'm only just starting this project (as you can see) and so I don't mind messing around with the code to get it right.

    Thanks for reading (sorry for long post!)

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might need to use an IE-only filter to give #search_bar a 1px different top margin.

  3. #3
    SitePoint Enthusiast stef686's Avatar
    Join Date
    Aug 2005
    Posts
    86
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately not, I tried this and it simply moved up but over the menu rather than under it.


Bookmarks

Posting Permissions

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