Yet another z-index issue

apsoda · January 23, 2012, 10:09am

Greetings,

I’m furious with myself for not finding why this isn’t working and I’ve finally acknowledged that I need help. My CSS menu remains hidden beneath other layers and I cannot figure out why. If someone can find my error I’ll be immensely grateful!

(There’s a lot of source here, sorry. Figured it was better to hand it all over than pick bits out and potentially miss where the trouble is!)

CSS:

* {
	margin: 0;
	padding: 0;
	border :0;
}

body {			
	width: 100%;
}

h1 {
}

h2 {
	margin-top: 10px;
}

h3 {
	margin-top: 15px;
}

#header {
	margin-top: 50px;
}

#header, #content, #footer {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	position: relative;
	overflow: hidden;
}

/* row heights */
.logorow {
	height: 120px;
}

.logobox {
	margin-left: -2%;
	width: 25%;
	height: 120px;
	left: 6%;
	text-align: center;
}

.logobox p {
	font-size: 3em;
	line-height: 120px;
	vertical-align: middle;
}

.logoutbox {
	padding-top: 10px;
	text-align: right;
}

.breadcrumbrow {
	height: 30px;
}

#content .col1 {
	padding-top: 30px;
	padding-bottom: 30px;
}

#content ul li {
	list-style-type: circle;
	margin-left: 1.3em;
}

#menublock, #newsblock, #loginblock {
	padding-top: 30px;
	margin-bottom: 10px;
}
/* common column settings */
.colright, .colmid, .colleft {
	float: left;
	width: 100%;			/* width of page */
	position: relative;
}
.col1, .col2, .col3, .col4, .logobox {
	float: left;
	position: relative;
	overflow: hidden;
}
/* settings for the three columns */
.threecol .colmid {
	right: 25%;			/* width of the right column */
}
.threecol .colleft {
	right: 50%;			/* width of the middle column */
}

#header .threecol .col1 {
	width: 50%;
	left: 101%;
}

.threecol .col1 {
	width: 46%;			/* width of center column content (column width minus padding on either side) */
	left: 102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	margin-left: 1px;
	width: 25%;			/* Width of left column content (column width minus padding on either side) */
	left: 29%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width: 25%;			/* Width of right column content (column width minus padding on either side) */
	left: 79%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* different layout for two column section of header */
.threecol .col4 {
	width: 71%;
	left: 102%;
}

/* Footer */
#footer {
	margin-top: 10px;
	margin-bottom: 50px;
}

#footer .col1 {
	padding-top: 2%;
	padding-bottom: 2%;
}

#footer .col3 {
	left: 104%;
}

/* type styles */

* {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.1em;
}

h3{
	font-size: 1.2em;
}

.logoutbox p {				/* date, logged in user, etc in top right corner */
	font-size: .9em;
}

.logoutbox a.AspNet-LoginStatus, .breadcrumbrow a {				/* date, logged in user, etc in top right corner */
	font-size: inherit;
	text-decoration: none;
}

.logoutbox a.AspNet-LoginStatus:hover {
	text-decoration: underline;
}

.breadcrumbrow p {
	line-height: 30px;
	vertical-align: middle;
	font-size: .9em;
	margin-left: 2%;
}

#newsblock p.section, #loginblock p.section {
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: bold;
	text-indent: 8%;
	line-height: 30px;
}

#newsblock .newsitem {
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom: 1em;
	margin-top: 1em;
}

#newsblock .newsitem p {
	font-size: .9em;
	font-weight: bold;
}

#newsblock .newsdate, #newsblock .newsteaser {
	font-size: inherit;
	display: block;
}

#newsblock .newsteaser {
	font-weight: normal;
}

#menublock p.menuitem {
	font-size: 1.2em;
	text-indent: 8%;
	line-height: 30px;
}

.morelink {
	white-space: nowrap;
	display: inline;
	font-size: .9em;
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
}

.morelink:hover {
	text-decoration: underline;
}

.copyrightbox p {			/* smallprint in footer */
	font-size: .75em;
}

#tricollogin {
	padding: 0;
	margin: 8%;
	font-size: .8em;
	width: 90%;
}

#tricollogin a {
	margin-top: 2em;
	font-size: inherit;
	text-decoration: none;
}

#tricollogin a:hover {
	text-decoration: underline;
}

input[type=text] {
	display: block;	
	margin-bottom: 1em;
	padding: 3px;
	font-size: inherit;
	width: 90%;
}

input[type=submit] {
	width: 6em;
	height: 1.5em;
	display: inline;
	float: right;
	border: none;
}

.formrow {
	display: block;
	font-size: inherit;
	margin-top: 2em;
	margin-right: 6%;
}

/* NAVIGATION BAR */

.navrow {
	min-height: 30px;
	height: 30px;
}

.AspNet-Menu-Horizontal {
	clear: both;
	position: relative;
	z-index: 596;
	float: left;
}

ul.AspNet-Menu {
	float: left;
	position: relative;
	z-index: 597;
}

ul.AspNet-Menu ul {
	width: 150px;
	list-style-type: none;
	list-style-image: none;
	position: absolute;
	visibility: hidden;
	top: 100%;
	left: 0;
	z-index: 598;
}

ul.AspNet-Menu li {
	float: left;
	list-style-type: none;
	list-style-image: none;
	display: inline-block;
	vertical-align: middle;
	font-size: .9em;
	padding: 0 1.4em;
	line-height: 30px;
}

ul.AspNet-Menu li:hover {
	position: relative;
	z-index: 599;
}


ul.AspNet-Menu li:hover > ul {
	visibility: visible;
}

ul.AspNet-Menu ul li {
	float: none;
}

ul.AspNet_Menu ul ul {
	top: 1px;
	left: 99%;
}

ul.AspNet-Menu a {
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

HTML:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Template 1</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="Css/Custom/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="Css/Custom/colorway1.css" media="screen" />
</head>

<body>

<div id="header">
	<div class="threecol logorow">
		<div class="colmid">
			<div class="colleft">
			
				<div class="col4">
					<!-- Column 4 start -->
					<div class="logoutbox"><p>11:45 Fri 29 July | Print | Legal information | Welcome, John.Abbott@abbotworldwide.com - <a id="ctl00_ctl00_LoginStatus1" title="" class="AspNet-LoginStatus" href="">Logout</a></p></div>
					<!-- Column 4 end -->
				</div>
				<div class="logobox">
					<!-- Column 5 start -->
					<p>LOGO</p>
					<!-- Column 5 end -->
				</div>
				
			</div>
		</div>
	</div>
	<div class="threecol navrow">
		<div class="colmid">
			<div class="colleft">
			
				<div class="col1">
					<!-- Column 1 start -->
					<div class="main-navigation" id="ctl00_ctl00_Menu1">
						<div class="AspNet-Menu-Horizontal">
							<ul class="AspNet-Menu">
								<li class="AspNet-Menu-WithChildren"> <a href="/en/about-us" class="AspNet-Menu-Link"> About Us</a>
									<ul>
										<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Company Profile</a> </li>
										<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Core Competence</a> </li>
									</ul>
								</li>
								<li class="AspNet-Menu-WithChildren"> <a href="/en/products-and-publications" class="AspNet-Menu-Link"> Products and Publications</a>
									<ul>
										<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Publications</a>
											<ul>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Market Reports</a> </li>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Press and Media</a> </li>
											</ul>
										</li>
										<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Commodities</a>
											<ul>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Commodity Alpha OP</a> </li>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius Commodity Alpha Euro OP</a> </li>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius Active Commodity OP</a> </li>
											</ul>
										</li>
										<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Absolute Return</a>
											<ul>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Absolute Return Commodity OP</a> </li>
											</ul>
										</li>
										<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Bonds</a>
											<ul>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius InterBond OP</a> </li>
												<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius EuroBond OP</a> </li>
											</ul>
										</li>
									</ul>
								</li>
								<li class="AspNet-Menu-Leaf"> <a href="/en/career" class="AspNet-Menu-Link"> Career</a> </li>
								<li class="AspNet-Menu-Leaf"> <a href="/en/contact" class="AspNet-Menu-Link"> Contact</a> </li>
							</ul>
						</div>
					</div>

					<!-- Column 1 end -->
				</div>
				<div class="col2">
					<!-- Column 2 start -->
					<p></p>
					<!-- Column 2 end -->
				</div>
				<div class="col3">
					<!-- Column 3 start -->
					<p></p>
					<!-- Column 3 end -->
				</div>
				
			</div>
		</div>
	</div>
	<div class="threecol breadcrumbrow">
		<div class="colmid">
			<div class="colleft">
			
				<div class="col1">
					<!-- Column 1 start -->
					<p><a href="index.htm">Home</a> > <a href="#">Our Funds</a> > <a href="#">Absolute Return</a></p>
					<!-- Column 1 end -->
				</div>
				<div class="col2">
					<!-- Column 2 start -->
					<p></p>
					<!-- Column 2 end -->
				</div>
				<div class="col3">
					<!-- Column 3 start -->
					<p></p>
					<!-- Column 3 end -->
				</div>
				
			</div>
		</div>
	</div>
</div>

<div id="content" class="threecol">
	<div class="colmid">
		<div class="colleft">
		
			<div class="col1">
				<!-- Column 1 start -->
				<h1>Our Funds</h1>
				<h2>ICM currently manages four funds; Absolute Return, Global Convertible, Global Diversified and Market Neutral.</h2>
				<h3>Absolute Return</h3>
				<p>The investment strategy minimizes industry and factor exposure with the objective of producing consistent absolute returns with low volatility and with low ocrrelation to the equity market. The fund achieves these objectives through superior stock selection, both long and short, while using the relative mix of longs and shorts to hedge overall exposure to stock market volatility. <a href="#" class="morelink">View more details...</a></p>
				<h3>Global Convertible</h3>
				<p>The Global Convertible Fund seeks to maximise profits through investments mainly in convertible bonds, warrants and preferred stocks. This investment strategy targets equity-like returns but with much lower risk. The Global Convertible fund uses a non-benchmark approach and focuses primarily on stock selection with a trading overlay. <a href="#" class="morelink">View more details...</a></p>
				<h3>Global Diversified</h3>
				<p>In the fixed income fund, a top-down, macroeconomic approach is taken when investing in government and index-linked bonds. A framework model, focussing on the key drivers of the bond markets, is utilised as part of he process. Portfolio management systems are employed to construct the portfolio in a manner consistent ith our views on interest rates (duration) and the dynamics of the yield curve. The corporate bond portfolio invests largely in high-grade bonds - mainly AAA and AA - with bond selection based on long-term fundamentals and relative value considerations. <a href="#" class="morelink">View more details...</a></p>
				<h3>Market Neutral</h3>
				<p>The Market Neutral Fund aims to obtain an appreciation of capital utilising a number of arbitrage strategies.</p>
				<p>Capital is invested in the following areas:</p>
				<ul>
					<li>Convertible arbitrage</li>
					<li>Credit and capital structure arbitrage</li>
					<li>Asian long/short</li>
					<li>Emerging markets</li>
				</ul>
				<p><a href="#" class="morelink">View more details...</a></p>
				<!-- Column 1 end -->
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				<div id="menublock">
					<p class="menuitem activemenuitem">Absolute Return</p>
					<p class="menuitem">Global Convertible</p>
					<p class="menuitem">Global Diversified</p>
					<p class="menuitem">Market Neutral</p>
				</div>
				<!-- Column 2 end -->
			</div>
			<div class="col3">
				<!-- Column 3 start -->
				<div id="newsblock">
					<p class="section">latest news</p>
					<div class="newsitem"><p>Breaking News<span class="newsteaser">News article 1 teaser text</span></p></div>
					<div class="newsitem"><p>News Article 1<span class="newsdate">Thursday, October 01, 2009</span><span class="newsteaser">News article 1 teaser text</span></p></div>
					<div class="newsitem"><p>News Article 2<span class="newsdate">Friday, September 18, 2009</span><span class="newsteaser">It is possible to link to a web file to be downloaded from within the text edition</span></p></div>
				</div>
				<div id="loginblock">
					<p class="section">Log in</p>
					<form id="tricollogin">
						<input type="text" size="30" maxlength="40" value="Email">
						<Input type="text" size="30" maxlength="40" value="Password">
						<span class="formrow"><input type="checkbox"> Remember me next time</span>
						<span class="formrow"><a href="#">Forgotten password?</a> <input type="submit"></span>
					</form>
				</div>
				<!-- Column 3 end -->
			</div>
			
		</div>
	</div>
</div>

<div id="footer" class="threecol">
	<div class="colmid">
		<div class="colleft">
		
			<div class="col1">
				<!-- Column 1 start -->
				<div class="copyrightbox"><p>&copy; Infinity Capital Management. All rights reserved.<br />
				Registered office: ICM House, 49 Atlanta Street, London SW6 6TU tel: +44 20 7381 7910 | fax: +44 20 7381 7911<br />
				Registered in England. Company Registration Number 0123456<br />
				Infinity Capital Management Ltd is ficticious and not authorised or regulated by the Financial Services Authority.</p></div>
				<!-- Column 1 end -->
			</div>
			<div class="col2">
				<!-- Column 2 start -->
				<p></p>
				<!-- Column 2 end -->
			</div>
			<div class="col3">
				<!-- Column 3 start -->
				<img src="Images/Custom/logo.jpg" width="256" height="93" alt="Investor Relations Technology">
				<!-- Column 3 end -->
			</div>
			
		</div>
	</div>
</div>

</body>
</html>

PaulOB · January 24, 2012, 2:02pm

Hi,

You’ve hidden the overflow and therefore the menu can never show.
Restate the overflow and it should appear.


.navrow .col1,#header{overflow:visible}

That’s a lot of a code for a simple 3 column layout and all those nestings are just going to make it hard for you to work with. As I couldn’t see images I guess you are going for some sort of equal background approach but that always comes with overheads of complexity.

apsoda · January 25, 2012, 8:18pm

Hi Paul, thanks so much for answering. However, that still isn’t working. When the menu expands it’s simply pushing the rest of the content on the page downwards.
Perhaps I need to re-write this from scratch to get better control of things!

~ Sarah

PaulOB · January 25, 2012, 8:53pm

It doesn’t with the code I gave you and the code above.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template 1</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="Css/Custom/layout.css" media="screen" />
<link rel="stylesheet" type="text/css" href="Css/Custom/colorway1.css" media="screen" />
<style>
* {
	margin: 0;
	padding: 0;
	border :0;
}

body {			
	width: 100%;
}

h1 {
}

h2 {
	margin-top: 10px;
}

h3 {
	margin-top: 15px;
}

#header {
	margin-top: 50px;
}

#header, #content, #footer {
	width: 1024px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	position: relative;
	overflow: hidden;
}

/* row heights */
.logorow {
	height: 120px;
}

.logobox {
	margin-left: -2%;
	width: 25%;
	height: 120px;
	left: 6%;
	text-align: center;
}

.logobox p {
	font-size: 3em;
	line-height: 120px;
	vertical-align: middle;
}

.logoutbox {
	padding-top: 10px;
	text-align: right;
}

.breadcrumbrow {
	height: 30px;
}

#content .col1 {
	padding-top: 30px;
	padding-bottom: 30px;
}

#content ul li {
	list-style-type: circle;
	margin-left: 1.3em;
}

#menublock, #newsblock, #loginblock {
	padding-top: 30px;
	margin-bottom: 10px;
}
/* common column settings */
.colright, .colmid, .colleft {
	float: left;
	width: 100%;			/* width of page */
	position: relative;
}
.col1, .col2, .col3, .col4, .logobox {
	float: left;
	position: relative;
	overflow: hidden;
}
/* settings for the three columns */
.threecol .colmid {
	right: 25%;			/* width of the right column */
}
.threecol .colleft {
	right: 50%;			/* width of the middle column */
}

#header .threecol .col1 {
	width: 50%;
	left: 101%;
}

.threecol .col1 {
	width: 46%;			/* width of center column content (column width minus padding on either side) */
	left: 102%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	margin-left: 1px;
	width: 25%;			/* Width of left column content (column width minus padding on either side) */
	left: 29%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width: 25%;			/* Width of right column content (column width minus padding on either side) */
	left: 79%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}
/* different layout for two column section of header */
.threecol .col4 {
	width: 71%;
	left: 102%;
}

/* Footer */
#footer {
	margin-top: 10px;
	margin-bottom: 50px;
}

#footer .col1 {
	padding-top: 2%;
	padding-bottom: 2%;
}

#footer .col3 {
	left: 104%;
}

/* type styles */

* {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.1em;
}

h3{
	font-size: 1.2em;
}

.logoutbox p {				/* date, logged in user, etc in top right corner */
	font-size: .9em;
}

.logoutbox a.AspNet-LoginStatus, .breadcrumbrow a {				/* date, logged in user, etc in top right corner */
	font-size: inherit;
	text-decoration: none;
}

.logoutbox a.AspNet-LoginStatus:hover {
	text-decoration: underline;
}

.breadcrumbrow p {
	line-height: 30px;
	vertical-align: middle;
	font-size: .9em;
	margin-left: 2%;
}

#newsblock p.section, #loginblock p.section {
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: bold;
	text-indent: 8%;
	line-height: 30px;
}

#newsblock .newsitem {
	padding-left: 8%;
	padding-right: 8%;
	padding-bottom: 1em;
	margin-top: 1em;
}

#newsblock .newsitem p {
	font-size: .9em;
	font-weight: bold;
}

#newsblock .newsdate, #newsblock .newsteaser {
	font-size: inherit;
	display: block;
}

#newsblock .newsteaser {
	font-weight: normal;
}

#menublock p.menuitem {
	font-size: 1.2em;
	text-indent: 8%;
	line-height: 30px;
}

.morelink {
	white-space: nowrap;
	display: inline;
	font-size: .9em;
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
}

.morelink:hover {
	text-decoration: underline;
}

.copyrightbox p {			/* smallprint in footer */
	font-size: .75em;
}

#tricollogin {
	padding: 0;
	margin: 8%;
	font-size: .8em;
	width: 90%;
}

#tricollogin a {
	margin-top: 2em;
	font-size: inherit;
	text-decoration: none;
}


#tricollogin a:hover {
	text-decoration: underline;
}

input[type=text] {
	display: block;	
	margin-bottom: 1em;
	padding: 3px;
	font-size: inherit;
	width: 90%;
}

input[type=submit] {
	width: 6em;
	height: 1.5em;
	display: inline;
	float: right;
	border: none;
}

.formrow {
	display: block;
	font-size: inherit;
	margin-top: 2em;
	margin-right: 6%;
}

/* NAVIGATION BAR */

.navrow {
	min-height: 30px;
	height: 30px;
}

.AspNet-Menu-Horizontal {
	clear: both;
	position: relative;
	z-index: 596;
	float: left;
}

ul.AspNet-Menu {
	float: left;
	position: relative;
	z-index: 597;
}

ul.AspNet-Menu ul {
	width: 150px;
	list-style-type: none;
	list-style-image: none;
	position: absolute;
	visibility: hidden;
	top: 100%;
	left: 0;
	z-index: 598;
}

ul.AspNet-Menu li {
	float: left;
	list-style-type: none;
	list-style-image: none;
	display: inline-block;
	vertical-align: middle;
	font-size: .9em;
	padding: 0 1.4em;
	line-height: 30px;
}

ul.AspNet-Menu li:hover {
	position: relative;
	z-index: 599;
}


ul.AspNet-Menu li:hover > ul {
	visibility: visible;
}

ul.AspNet-Menu ul li {
	float: none;
}

ul.AspNet_Menu ul ul {
	top: 1px;
	left: 99%;
}

ul.AspNet-Menu a {
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.navrow .col1,#header{overflow:visible}
ul.AspNet-Menu ul{background:red}
ul.AspNet-Menu ul ul{left:150px;top:0}
</style>
</head>

<body>
<div id="header">
		<div class="threecol logorow">
				<div class="colmid">
						<div class="colleft">
								<div class="col4"> 
										<!-- Column 4 start -->
										<div class="logoutbox">
												<p>11:45 Fri 29 July | Print | Legal information | Welcome, John.Abbott@abbotworldwide.com - <a id="ctl00_ctl00_LoginStatus1" title="" class="AspNet-LoginStatus" href="">Logout</a></p>
										</div>
										<!-- Column 4 end --> 
								</div>
								<div class="logobox"> 
										<!-- Column 5 start -->
										<p>LOGO</p>
										<!-- Column 5 end --> 
								</div>
						</div>
				</div>
		</div>
		<div class="threecol navrow">
				<div class="colmid">
						<div class="colleft">
								<div class="col1"> 
										<!-- Column 1 start -->
										<div class="main-navigation" id="ctl00_ctl00_Menu1">
												<div class="AspNet-Menu-Horizontal">
														<ul class="AspNet-Menu">
																<li class="AspNet-Menu-WithChildren"> <a href="/en/about-us" class="AspNet-Menu-Link"> About Us</a>
																		<ul>
																				<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Company Profile</a> </li>
																				<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Core Competence</a> </li>
																		</ul>
																</li>
																<li class="AspNet-Menu-WithChildren"> <a href="/en/products-and-publications" class="AspNet-Menu-Link"> Products and Publications</a>
																		<ul>
																				<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Publications</a>
																						<ul>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Market Reports</a> </li>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Press and Media</a> </li>
																						</ul>
																				</li>
																				<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Commodities</a>
																						<ul>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Commodity Alpha OP</a> </li>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius Commodity Alpha Euro OP</a> </li>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius Active Commodity OP</a> </li>
																						</ul>
																				</li>
																				<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Absolute Return</a>
																						<ul>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Absolute Return Commodity OP</a> </li>
																						</ul>
																				</li>
																				<li class="AspNet-Menu-WithChildren"> <a href="#" class="AspNet-Menu-Link"> Bonds</a>
																						<ul>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius InterBond OP</a> </li>
																								<li class="AspNet-Menu-Leaf"> <a href="#" class="AspNet-Menu-Link"> Tiberius EuroBond OP</a> </li>
																						</ul>
																				</li>
																		</ul>
																</li>
																<li class="AspNet-Menu-Leaf"> <a href="/en/career" class="AspNet-Menu-Link"> Career</a> </li>
																<li class="AspNet-Menu-Leaf"> <a href="/en/contact" class="AspNet-Menu-Link"> Contact</a> </li>
														</ul>
												</div>
										</div>
										
										<!-- Column 1 end --> 
								</div>
								<div class="col2"> 
										<!-- Column 2 start -->
										<p></p>
										<!-- Column 2 end --> 
								</div>
								<div class="col3"> 
										<!-- Column 3 start -->
										<p></p>
										<!-- Column 3 end --> 
								</div>
						</div>
				</div>
		</div>
		<div class="threecol breadcrumbrow">
				<div class="colmid">
						<div class="colleft">
								<div class="col1"> 
										<!-- Column 1 start -->
										<p><a href="index.htm">Home</a> > <a href="#">Our Funds</a> > <a href="#">Absolute Return</a></p>
										<!-- Column 1 end --> 
								</div>
								<div class="col2"> 
										<!-- Column 2 start -->
										<p></p>
										<!-- Column 2 end --> 
								</div>
								<div class="col3"> 
										<!-- Column 3 start -->
										<p></p>
										<!-- Column 3 end --> 
								</div>
						</div>
				</div>
		</div>
</div>
<div id="content" class="threecol">
		<div class="colmid">
				<div class="colleft">
						<div class="col1"> 
								<!-- Column 1 start -->
								<h1>Our Funds</h1>
								<h2>ICM currently manages four funds; Absolute Return, Global Convertible, Global Diversified and Market Neutral.</h2>
								<h3>Absolute Return</h3>
								<p>The investment strategy minimizes industry and factor exposure with the objective of producing consistent absolute returns with low volatility and with low ocrrelation to the equity market. The fund achieves these objectives through superior stock selection, both long and short, while using the relative mix of longs and shorts to hedge overall exposure to stock market volatility. <a href="#" class="morelink">View more details...</a></p>
								<h3>Global Convertible</h3>
								<p>The Global Convertible Fund seeks to maximise profits through investments mainly in convertible bonds, warrants and preferred stocks. This investment strategy targets equity-like returns but with much lower risk. The Global Convertible fund uses a non-benchmark approach and focuses primarily on stock selection with a trading overlay. <a href="#" class="morelink">View more details...</a></p>
								<h3>Global Diversified</h3>
								<p>In the fixed income fund, a top-down, macroeconomic approach is taken when investing in government and index-linked bonds. A framework model, focussing on the key drivers of the bond markets, is utilised as part of he process. Portfolio management systems are employed to construct the portfolio in a manner consistent ith our views on interest rates (duration) and the dynamics of the yield curve. The corporate bond portfolio invests largely in high-grade bonds - mainly AAA and AA - with bond selection based on long-term fundamentals and relative value considerations. <a href="#" class="morelink">View more details...</a></p>
								<h3>Market Neutral</h3>
								<p>The Market Neutral Fund aims to obtain an appreciation of capital utilising a number of arbitrage strategies.</p>
								<p>Capital is invested in the following areas:</p>
								<ul>
										<li>Convertible arbitrage</li>
										<li>Credit and capital structure arbitrage</li>
										<li>Asian long/short</li>
										<li>Emerging markets</li>
								</ul>
								<p><a href="#" class="morelink">View more details...</a></p>
								<!-- Column 1 end --> 
						</div>
						<div class="col2"> 
								<!-- Column 2 start -->
								<div id="menublock">
										<p class="menuitem activemenuitem">Absolute Return</p>
										<p class="menuitem">Global Convertible</p>
										<p class="menuitem">Global Diversified</p>
										<p class="menuitem">Market Neutral</p>
								</div>
								<!-- Column 2 end --> 
						</div>
						<div class="col3"> 
								<!-- Column 3 start -->
								<div id="newsblock">
										<p class="section">latest news</p>
										<div class="newsitem">
												<p>Breaking News<span class="newsteaser">News article 1 teaser text</span></p>
										</div>
										<div class="newsitem">
												<p>News Article 1<span class="newsdate">Thursday, October 01, 2009</span><span class="newsteaser">News article 1 teaser text</span></p>
										</div>
										<div class="newsitem">
												<p>News Article 2<span class="newsdate">Friday, September 18, 2009</span><span class="newsteaser">It is possible to link to a web file to be downloaded from within the text edition</span></p>
										</div>
								</div>
								<div id="loginblock">
										<p class="section">Log in</p>
										<form id="tricollogin">
												<input type="text" size="30" maxlength="40" value="Email">
												<Input type="text" size="30" maxlength="40" value="Password">
												<span class="formrow">
												<input type="checkbox">
												Remember me next time</span> <span class="formrow"><a href="#">Forgotten password?</a>
												<input type="submit">
												</span>
										</form>
								</div>
								<!-- Column 3 end --> 
								
						</div>
				</div>
		</div>
</div>
<div id="footer" class="threecol">
		<div class="colmid">
				<div class="colleft">
						<div class="col1"> 
								<!-- Column 1 start -->
								<div class="copyrightbox">
										<p>&copy; Infinity Capital Management. All rights reserved.<br />
												Registered office: ICM House, 49 Atlanta Street, London SW6 6TU tel: +44 20 7381 7910 | fax: +44 20 7381 7911<br />
												Registered in England. Company Registration Number 0123456<br />
												Infinity Capital Management Ltd is ficticious and not authorised or regulated by the Financial Services Authority.</p>
								</div>
								<!-- Column 1 end --> 
						</div>
						<div class="col2"> 
								<!-- Column 2 start -->
								<p></p>
								<!-- Column 2 end --> 
						</div>
						<div class="col3"> 
								<!-- Column 3 start --> 
								<img src="Images/Custom/logo.jpg" width="256" height="93" alt="Investor Relations Technology"> 
								<!-- Column 3 end --> 
						</div>
				</div>
		</div>
</div>
</body>
</html>

It doesn’t push anything down as you can see.

The menu needs a bit of work though and is more complicated than it needs to be. You rarely need any extra classes in a dropdown menu as the elements can all be targeted by their location within the structure (unless of course you have different styling fore eeach item).

Perhaps I need to re-write this from scratch to get better control of things!

~ Sarah

If you don’t need equal column then go for something much simpler and easier to manage. There’s too many wrappers to deal with and it just makes everything harder than it needs to be.

apsoda · January 25, 2012, 9:15pm

I completely take your points about the excessive source AND the classnames. This is a template for a client who wants several colour options and each one of those colour options (as supplied by their designer) has borders places on some and different places on others ( I probably haven’t explained that very well ). This layout was the best way I could think of to enable making colours and borders easy to apply. I will go back in and see if there’s a simpler way to lay it all out though. The classnames have been generated by the client’s own .asp system.

Thank you SO much, it’s working now and I’ll get the first night’s sleep I’ve had in three days!

PaulOB · January 25, 2012, 9:33pm

Ah ok, if you need a lot of different styles then sometimes it is easier to add a class rather than to say ul ul li ul a {etc…}.

Topic		Replies	Views
CSS issue with menu items apearing behind the top level items HTML & CSS	3	597	October 8, 2014
CSS issue with menu items apearing behind the top level items HTML & CSS	4	849	October 8, 2014
Css dropdown menu hiding behind content (again) HTML & CSS	6	1364	October 16, 2016
Menu Issue Going Behind HTML & CSS	2	741	October 8, 2014
Z-Index doesn't seem to be working (CSS) HTML & CSS	4	565	August 23, 2020

Yet another z-index issue

Related topics