WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > Tabbed Menu IE Problem

Reply
  Thread Tools Display Modes
Old 16th September 06, 05:50 PM   #1
stef686
WLC Member
 
Join Date: May 2006
Posts: 42
Default 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!)
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
stef686 is offline   Reply With Quote
Old 19th September 06, 11:25 AM   #2
stef686
WLC Member
 
Join Date: May 2006
Posts: 42
Default Re: Tabbed Menu IE Problem

No ideas?
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
stef686 is offline   Reply With Quote
Old 27th November 06, 01:11 PM   #3
stef686
WLC Member
 
Join Date: May 2006
Posts: 42
Default Re: Tabbed Menu IE Problem

Right, I just had a brain wave! Problem is I'm at work and can't do anything about it until I get home! argh!

Will post up what I try and whether I get it to work or not for reference
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
stef686 is offline   Reply With Quote
Old 28th November 06, 10:41 PM   #4
stef686
WLC Member
 
Join Date: May 2006
Posts: 42
Default Re: Tabbed Menu IE Problem

Brilliant I fixed it!

If anyone is interested, I made the double border that is at the top of the blue bar and background image that sits behind the menu at the bottom.

I feel so proud!
__________________

To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.


To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
stef686 is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Dropdown menu issues Faan CSS 0 22nd June 07 04:39 PM
Clearing Floating Menu with IE Problem? crimsongt Browser Compatibility 3 22nd May 07 03:51 PM
simple menu problem abec Browser Compatibility 2 20th September 06 03:45 PM
A problem with CSS menu. Niik CSS 4 17th September 06 08:12 AM
Problem with Menu WillisTi CSS 5 30th August 06 06:16 PM


All times are GMT. The time now is 07:23 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.