Need help with a tabbed menu (with icons such as close)

**dAEk** · Sep 13, 2007 13:25

I'm feeling silly but for all that is holy, I cannot get this thing to work. It works okayish in Firefox but it is clearly broken in IE 6, which is the minimum requirement for this application.

What I am trying to do is a horizontal tabbed menu bar. It does not sound too difficult, I know.

The image I've attached to this post shows what I am trying to achieve.

I'd like the tabs to auto-expand. In other words: no fixed width. This is what breaks it for me in IE 6.
The icons should be positioned in the upper right corner of a tab. All tabs in this list will have these icons.
The ul element will have a gradient background color so I'd like it to automatically adjust its height.
Floating the elements in the <li> appeared to be the easiest solution beforehand but I could not get it to work. Why? Who knows. To place the icons/controls, I went with absolute positioning.

The markup code looks something like this:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
	<title>tabs</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
	@import "tabs.css";
	</style>
</head>


<body>
	
	<div id="eventListContainer">
		
		<ul id="eventList">
			<li class="eventTab">
				<div id="event1" class="event">
					<span class="title">[Title.text]</span>
					<span class="info">[Misc.text]</span>
				</div>
				
				<ul id="controls1" class="controls">
					<li><a class="close" title="close">x</a></li>
					<li><a class="activate" title="activate">▼</a></li>
				</ul>
			</li>
			
			<li class="eventTab current">
				<div id="event2" class="event">
					<span class="title">Nothing - Something</span>
					<span class="info">Game of the year...</span>
				</div>
				
				<ul id="controls2" class="controls">
					<li><a class="close">x</a></li>
					<li><a class="activate" title="activate">▼</a></li>
				</ul>
			</li>
			
			<li class="eventTab">
				<div id="event3" class="event">
					<span class="title">[Title.text]</span>
					<span class="info">[Misc.text]</span>
				</div>
				
				<ul id="controls3" class="controls">
					<li><a class="close" title="close">x</a></li>
					<li><a class="activate" title="activate">▼</a></li>
				</ul>
			</li>
		</ul>
		
		<br style="clear:both;">
	</div>
	
	
</body>
</html>

As you may have guessed from the ids, the list will be dynamic. It'll be possible to create tabs and remove them from the list.
The links in the "controls" will be styled by using image replacement and mouselistener will be set, etc etc.

What I need help with is getting the darn tabs to position the elements correctly. If needed, the HTML can be altered.

**Tyssen** · Sep 13, 2007 19:12

Going to need to see your CSS as well but preferably a link to the page.

**dAEk** · Sep 14, 2007 15:45

Yeah, I figured.

I didn't have access to the stylesheet before but here it is:

Code CSS:

body {
	font-family: verdana,sans-serif;
	font-size:   1em;
	color:       #000;
	background:  #fff;
}
 
#eventListContainer {
	margin:     0;
	padding:    0;
	height:     40px;
	background: url("tab-bar-background.gif") bottom left repeat-x;
}
 
	#eventList {
		margin:     0;
		padding:    0 10px 0 20px;
		height:     100%;
		list-style: none;
		float:      left;
	}
 
 
	.event {
		margin:     0;
		padding:    0 15px 0 10px;
		height:     30px;
		background: #f6f6f4;
	}
 
		.event span {
			display: block;
			margin:  0;
			padding: 0 15px 0 0;
		}
 
		.title {
			font-size: 12px;
		}
		.info {
			font-size: 9px;
		}
 
		.eventTab {
			position: relative;
			float:    left;
			margin:   9px 2px 0 0;
			padding:  0;
		}
		.current {
			margin:        8px 2px 0 0;
			border:        1px solid #bbb;
			border-bottom: 1px solid #f6f6f4;
		}
 
		.controls {
			position:   absolute;
			margin:     0;
			padding:    0;
			top:        2px;
			right:      7px;
			width:      10px;
			list-style: none;
			text-align: center;
			font-size:  9px;
		}
			.close a {
				display:    block;
				width:      10px;
				height:     10px;
			}

I've updated the html markup code in my earlier post since I had I missed a few things. There's been a few changes made since my original post but I don't have access to a computer with IE 6 at the moment, so the code above is not tested. It's probably broken still...

**Tyssen** · Sep 14, 2007 16:10

Removing the height from .event seems to produce nearly the same results in IE6, 7 & FF.

User Tag List

Thread: Need help with a tabbed menu (with icons such as close)

Thread Tools

Display

Need help with a tabbed menu (with icons such as close)

Bookmarks

Bookmarks

Posting Permissions