[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