Hi all! I’m new to ModX (Etomite refugee) and I’m loving what I see so far. I’m especially enamoured of Dropmenu and it’s changing the way I work, especially regarding CSS use. I’ve long used CSS, but only in a superficial way. With ModX and Dropmenu, I’m starting to take it seriously, but there is much I have yet to learn. Cross-browser compatibility in particular.
Right now I’m having some problems with the CSS on the site I’m building for a client in MSIE. The address is:
http://www.orionvisuals.com/wip/furlan/
Everything seems to be as I want it in Firefox, but MSIE is a different story:
1: All of ther text in the site (which is laid out with CSS) appears about 30 pixels higher up the page than in firefox.
2: I’m using :hover for my flyout submenus, and the Whatever:hover .htc trick (
http://www.xs4all.nl/~peterned/csshover.html) to get it to work in msie, however that has revealed some other problems:
a: The flyouts appear behind the body text. It seems that the z-index value of the submenu div is being ignored.
b: Moving the mouse from the top level link to the submenu divs often breaks the hover causing the submenus to disappear
c: The flyouts seem to be positioned 30px or so higher again than the menu items.
Here is the template I’m using:
(please excuse the sloppy CSS - as I said I’m learning
)
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Furlan Club :: Home</title>
</head>
<style>
body {
behavior:url("csshover.htc");
background-color:#ad2c21;
padding:0;
margin:0;
}
p,td, li {
font-family: arial;
font-size:12px;
}
h1 {
position:absolute;
top:10px;
right:10px;
color:#FFFFFF;
font-size:26px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
margin-right:10px;
}
h2 {
font-family:arial;
font-size:18px;
text-align:center;
}
h3 {
font-family:arial;
font-size:14px;
text-align:center;
padding-top:10px;
}
.menu {
width:150px;
position:relative;
top:-40px;
float:left;
margin-top:0px;
padding-top:0px;
}
#menu ul {
margin-left:0px;
padding-left:0px;
text-align:right;
}
li ul {display: none;}
li:hover ul {display: block;}
#menu li {
font-family:arial;
font-size:14px;
font-weight:bold;
line-height:200%;
list-style:none;
color:#002E91;
margin-left:0px;
padding-left:0px;
padding-right:15px;
text-decoration:none;
}
#menu li a {
color:#ffffff;
text-decoration:none;
}
#menu li a:hover {
color:#ffffff;
text-decoration:underline;
}
#menu li ul {
width:180px;
position:absolute;
left:150px;
margin-top:-28px;
padding-left:15px;
font-size:10px;
background-color:#002D8F;
background-image:url(images/menubg.gif);
z-index:9;
}
#menu li li {
color:#E4892E;
text-align:left;
}
.container {
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
background-image:url(images/background.gif);
background-repeat:repeat-y;
height:auto;
}
.header {
width:750px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
padding:0px;
position:relative;
}
.content {
width:auto;
position:relative;
top:-70px;
margin-left:150px;
padding-left:15px;
padding-right:20px;
}
.footer {
width:750px;
margin-left:auto;
margin-right:auto;
}
</style>
<body>
<div class="container">
<div class="header">
<h1>[*longtitle*]</h1>
<img src="images/header.gif" alt="Furlan Club" width="750" height="147" style="margin:0px; padding:0px; display:block;" />
</div>
<div style="width:750px;">
<div id="menu" class="menu">
[[DropMenu]]
</div>
<div class="content">
[*content*]
</div>
</div>
<div class="footer">
<img src="images/footer.gif" alt="Footer" width="750" height="58" style="display:block;" />
</div>
</div>
</body>
</html>
Once I have the template finalised, I intend to move the style code out into a .css file, but it helps to have it inline while I’m building.
Any help would be greatly appreciated!
Thanks,
Neil
MODX Staff
