Hi There,
I have a problem with installing/styling a menu to my site. I have installed a CSSplay menu, with al the original css styles. The problem is that InternetExplorer 7 overlaps the second level over the first one. Normally you just change the padding to get in perfect in shape, but InternetExplorer 6 making room between the menu levels.
The strange thing is that they look diffrent in IE6, IE7, and Firefox, I cant find the the way to get it all right in all of them.
The good working menu in Firefox
The same menu in Explorer 7, but with the problems with the levels.
Still the same menu but now in Explorer 6, but now it looks totally diffrent
Is there someone who can help me out???
Thanks...
Link: www.ocnuenen.nl
CSS menu code
.menu {
position:relative;
z-index:1000;
font-size:90%;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:216px;
}
/* hack for IE5.5 */
* html .menu ul {margin-left:-16px; ma\rgin-left:0;}
/* position relative so that you can position the sub levels */
.menu li {
position:relative;
}
/* get rid of the table */
table {position:absolute; top:0; left:0; z-index:100; font-size:1em;}
/* style the links */
.menu a, .menu a:visited {
display:block;
text-decoration:none;
height:30px;
line-height:28px;
width:220px;
color:#000;
background:#d4d8bd;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 0;
}
/* hack for IE5.5 */
* html .menu a, * html .menu a:visited {width:150px; w\idth:149px;}
/* style the link hover */
.menu a:hover{
color:#fff;
background:#949e7c;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:0;
left:150px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}
Menu website style:
#menu {
background: #000000;
border-bottom: 5px solid #FFFFFF;
height:30px;
margin-left:5px;
}
#menu ul{
list-style:none;
padding:0;
margin:0;
}
#menu li{
float:left;
width:33.3%;
text-align:center;
}
#menu li.last a{
border-right:none;
}
#menu a{
display:block;
text-decoration: none;
color: #0f0b03;
padding:8px 15px;
border-right:1px solid #fff;;
}
#menu a:hover {
background: #000000;
color: #fff;
}
#menu li.here a{
background:#000000;
color:#fff;
}
/********** Main Content **********/
#pad {
padding: 12px;
color: #000;
background:#c7b793;
margin-left:5px;
}
#pad h3 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #FFFFFF;
}
#pad a{
color: #0f0b03;
}
/********** Left Column **********/
#left {
width: 213px;
color: #FFFFFF;
padding: 0px;
}
#left h1 {
padding: 4px;
margin: 4px;
font-size: 120%;
font-weight: bold;
color: #fff;
}
#left #menuBlock ul{
list-style:none;
padding:0;
margin:0;
}
#left #menuBlock a{
display:block;
text-decoration: none;
color: #0f0b03;
padding:8px 15px;
background: #cf9f25;
margin-bottom:2px;
}
#left #menuBlock li ul li a{
padding-left:40px;
}
#left #menuBlock li ul{
display:none;
}
#left #menuBlock li.here ul{
display:block;
}
#left #menuBlock li.here a, #left #menuBlock a:hover{
background: #f1bc35;
color: #fff;
}
#left #menuBlock li.here ul li a{
color: #0f0b03;
background: #cf9f25;
}
#left #menuBlock li.here ul li a:hover{
background: #f1bc35;
color: #fff;
}
Wayfinder snippet
include_once("assets/snippets/wayfinder/wayfinder.inc.php");
if (class_exists('Wayfinder')) {
$wf = new Wayfinder();
} else {
return 'error: Wayfinder class not found';
}
//parameter overrides
$wf->id = isset($startId)? $startId: $modx->documentIdentifier;
$wf->level = isset($level)? $level: 0;
$wf->ph = isset($ph)? $ph: FALSE;
$wf->debug = isset($debug)? TRUE: FALSE;
$wf->ignoreHidden = isset($ignoreHidden)? $ignoreHidden: FALSE;
$wf->hideSubMenus = isset($hideSubMenus)? $hideSubMenus: FALSE;
$wf->useWeblinkUrl = isset($useWeblinkUrl)? $useWeblinkUrl: TRUE;
isset($removeNewLines)? $wf->ie = '': $wf->ie = "\n";
//Include javascript & css chunks
$wf->cssTpl = isset($cssTpl)? $cssTpl : FALSE;
$wf->jsTpl = isset($jsTpl)? $jsTpl : FALSE;
//get user class definitions
$wf->css['first'] = isset($firstClass)? $firstClass: '';
$wf->css['last'] = isset($lastClass)? $lastClass: 'last';
$wf->css['here'] = isset($hereClass)? $hereClass: 'active';
$wf->css['parent'] = isset($parentClass)? $parentClass: '';
$wf->css['row'] = isset($rowClass)? $rowClass: '';
$wf->css['outer'] = isset($outerClass)? $outerClass: '';
$wf->css['inner'] = isset($innerClass)? $innerClass: '';
$wf->css['level'] = isset($levelClass)? $levelClass: '';
$wf->css['self'] = isset($selfClass)? $selfClass: '';
$wf->css['weblink'] = isset($webLinkClass)? $webLinkClass: '';
//prefix for adding id to each row
$wf->rowIdPrefix = isset($rowIdPrefix)? $rowIdPrefix: FALSE;
//get fields to output
$wf->textOfLinks = (isset($textOfLinks)) ? $textOfLinks : 'menutitle';
$wf->titleOfLinks = (isset($titleOfLinks)) ? $titleOfLinks : 'pagetitle';
//get user templates
$wf->templates['outerTpl'] = isset($outerTpl) ? $outerTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['rowTpl'] = isset($rowTpl) ? $rowTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['parentRowTpl'] = isset($parentRowTpl) ? $parentRowTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['parentRowHereTpl'] = isset($parentRowHereTpl) ? $parentRowHereTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['hereTpl'] = isset($hereTpl) ? $hereTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['innerTpl'] = isset($innerTpl) ? $innerTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['innerRowTpl'] = isset($innerRowTpl) ? $innerRowTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['innerHereTpl'] = isset($innerHereTpl) ? $innerHereTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['activeParentRowTpl'] = isset($activeParentRowTpl) ? $activeParentRowTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
$wf->templates['categoryFoldersTpl'] = isset($categoryFoldersTpl) ? $categoryFoldersTpl : 'assets/snippets/wfParentRow/flyout_revisited.css';
//setup here checking array
$wf->parentTree = $modx->getParentIds($modx->documentIdentifier);
$wf->parentTree[] = $modx->documentIdentifier;
//Get version info
$wf->modxVersion = $modx->getVersionData();
if ($wf->debug) {
$wf->debugOutput .= '<p>Starting Menu from Docid: ' . $wf->id . '<br/>';
$wf->debugOutput .= 'Docids for \'Here\' class checking: ' . implode(', ',$wf->parentTree) . '</p>';
$wf->debugOutput .= '<h3>Chunk Checks</h3>';
}
$wf->checkChunks();
if ($wf->cssTpl || $wf->jsTpl) {
$wf->regJsCss();
}
if ($wf->debug) {
$wf->debugOutput .= '<h3>Document Processing</h3>';
}
$output = $wf->buildMenu($wf->id);
if ($wf->debug) {
$output = $output . $wf->debugOutput;
}
if ($ph) {
$modx->setPlaceholder($ph,$output);
} else {
return $output;
}
☆ A M B ☆