[thelist] CSS/float conflict in IE. A tricky one!

Scott Blanchard octigonuser at hotmail.com
Mon Mar 15 08:19:40 CST 2004


This page is on an internal dev server, so I'll have to post the code here 
(its relatively smaill).

The problem is with the menu on the left side ( i call it "expando"). When 
this page is executed with only the expando.css file, the menu displays 
perfectly in all browsers. However, when I add the montserrat.css file to 
the mix, I get unintended layout in IE. My best guess is that there is some 
sort of float/absolute positioning conflict, but I can't quite figure it 
out.

Any help much appreciated. Table-less layouts are quite a challenge!


<!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>Home Page</title>
		<!-- Created with Octane8 -->
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<link rel="stylesheet" href="templates/montserrat/scripts/montserrat.css" 
type="text/css" />
		<link rel="stylesheet" href="templates/montserrat/scripts/expando.css" 
type="text/css" />
		<script type="text/javascript" 
src="scripts/x8webtop_scripts/octane8.js"></script>
	</head>

	<body>

		<div id="date">Monday, March 15</div>
		<div class="header"><img src="templates/montserrat/images/logotagline.jpg" 
alt="logo" /></div>
		<div class="siteMenu"><img src="templates/montserrat/images/menu.gif" 
alt="" /><ul class="x8_drawMenu"><li class="x8_first x8_active"><a 
href="default.aspx?id=2" title="Home Page" class="x8_active">Home 
Page</a></li><li class="x8_last"><a href="default.aspx?id=4" title="About 
Us">About Us</a></li></ul></div>

		<div id="mainContainer">

			<div class="leftSidebar"><div class="x8_expando"><div 
class="x8_expandoLevel1"><span class="x8_expandoActive"><a 
href="default.aspx?id=2" title="Home Page">Home Page</a></span></div><div 
class="x8_expandoLevel1"><span><a href="default.aspx?id=4" title="About 
Us">About Us</a></span></div><div class="x8_expandoLevel1"><span><a 
href="default.aspx?id=5" title="Contact Us">Contact Us</a></span></div><div 
class="x8_expandoLevel1"><span><a href="default.aspx?id=6" 
title="Products">Products</a></span></div></div><img 
src="templates/montserrat/images/undermenu.gif" alt="" /></div>

			<div class="content">

				Home Page

				<div class="contentSiteMenu"><ul class="x8_drawMenu"><li class="x8_first 
x8_active"><a href="default.aspx?id=2" title="Home Page" 
class="x8_active">Home Page</a></li><li class="x8_last"><a 
href="default.aspx?id=4" title="About Us">About Us</a></li></ul></div>

				<div class="footer">© 2000 - 2004 Octigon, LLC. All rights 
reserved.</div>

			</div>

		</div>

	</body>
	</html>






/* Montserrat.css */

body {margin:0;font-size: 11px; font-family: Tahoma, Verdana, Geneva, 
sans-serif;}

#date {position:absolute; top:30px; right:20px; color:#fff;}

.header {position:relative; height:52px; background: #778BB9 
url(../images/stair.gif) no-repeat 275px;}

#mainContainer {position:relative; width:100%;background-color:#fff;}

#mainContainer .content {position:absolute; left:160px; 
max-width:650px;padding:20px;background: #fff url(../images/menu_curve1.gif) 
no-repeat}

#mainContainer .leftSidebar {margin-top:-5px; 
position:relative;float:left;padding:0 5px 100px 0;width:155px; 
min-height:300px; background: #336699 url(../images/menu_curve2.gif) 
no-repeat bottom right;}

.breadcrumbMenu {padding-bottom:20px;}

.contentSiteMenu {margin:20px 0 20px 0; padding:5px 0 0 20px; height:30px; 
background: url(../images/menuBack.gif) no-repeat;}

.contentSiteMenu a {padding-right:10px;color:#fff; text-decoration:none; 
font-weight:bold;}

.contentSiteMenu a:hover {color:lightsteelblue; text-decoration:underline;}

.contentSiteMenu ul, .contentSiteMenu li, .siteMenu ul, .siteMenu li 
{display:inline; list-style: none; margin: 0;padding: 0;border: none;}

.siteMenu {height:25px; background: #336699 url(../images/menu_curve2.gif) 
no-repeat right;}

.siteMenu a { vertical-align:3px; padding-left:10px;color:#fff; 
text-decoration:none; font-weight:bold;}

.siteMenu a:hover {color:lightsteelblue; text-decoration:underline;}

.footer {color:slateblue;}

/* end of montserrat.css */




/* expando.css */

.x8_expando {
border-bottom:1px solid #dcdcdc;
background:#fff;
font-family:tahoma,verdana;
font-size:11px;
}

.x8_expando a {
display:block;
text-decoration:none;
padding:4px;
color:#000;
border-top:1px solid #fff;
border-bottom:1px solid #00008b;
}

.x8_expando a:hover {
text-decoration:underline;
color:#336699;
background-color:#dfdfdf;
}

.x8_expando .x8_expandoLevel1 a {
color:#fff;
padding-left:15px;
border-top: 1px solid #dcdcdc;
border-bottom:1px solid #00008b;
background-color:#778BB9;
}

.x8_expando .x8_expandoLevel1 a:hover {
text-decoration:none;
color:#fff;
background-color:#336699;
}

.x8_expando .x8_expandoLevel2 a {
padding-left:25px;
border-top:1px dotted #cccccc;
border-bottom:none;
}

.x8_expando .x8_expandoLevel3 a {
padding-left:35px;
border-top:1px dotted #cccccc;
border-bottom:none;
}

.x8_expando .x8_expandoLevel4 a {
padding-left:45px;
border-top:1px dotted #cccccc;
border-bottom:none;
}

.x8_expando .x8_expandoLevel5 a {
padding-left:55px;
border-top:1px dotted #cccccc;
border-bottom:none;
}

.x8_expando .x8_expandoActive a {
color:#000;
font-weight:bold;
}

.x8_expandoLevel1 .x8_expandoActive a {
color:#fff;
}

.x8_expando .x8_expandoActive a:hover {
text-decoration:none;
}

_________________________________________________________________
Fast. Reliable. Get MSN 9 Dial-up - 3 months for the price of 1! 
(Limited-time Offer) http://click.atdmt.com/AVE/go/onm00200361ave/direct/01/



More information about the thelist mailing list