CSS Menu behavior differs between Firefox/Opera and IE6/7

For questions and problems with the CMS core. This board is NOT for any 3rd party modules, addons, PHP scripts or anything NOT distributed with the CMS made simple package itself.
Locked
Zefrem23

CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Zefrem23 »

Hi, I searched the forums and didn't find anything dealing specifically with this issue, so hopefully someone might be able to help me. I have implemented version 1.0.4 for a client and everything is working very well, with the exception of the CSS menu, which works as expected (drops down the sub-links) in Firefox and Opera, but pops out to the right in IE6 and IE7. I can see no reason why these browsers should behave differently, but perhaps I'm looking against my eyelids :)

The menu code itself is as follows:

Code: Select all

{* CSS classes used in this template:
#menuwrapper - The id for the <div> that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the <ul>
.menuparent - The class for each <li> that has children.
.menuactive - The class for each <li> that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}
<div id="menuwrapper">
<ul id="primary-nav">
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

	{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}

	{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
	</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
	<li class="menuactive menuparent"><a class="menuactive menuparent" 
{elseif $node->current == true}
	<li class="menuactive"><a class="menuactive" 
{elseif $node->haschildren == true}
	<li class="menuparent"><a class="menuparent" 
{elseif $node->type == 'sectionheader'}
        <li class="sectionheader"><span> {$node->menutext} </span>
{elseif $node->type == 'separator'}
        <li style="list-style-type: none;"> <hr class="separator" />
{else}
	<li><a 
{/if}
{if $node->type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
> {$node->menutext}</a>
{/if}

{/foreach}

	{repeat string="</li></ul>" times=$node->depth-1}		</li>
	</ul>
</div>
{/if}

I've attached screenshots of the way the menu looks in IE and the way it looks in Firefox. I'd really appreciate any help anyone might be able to offer.

Thanks in advance!

[gelöscht durch Administrator]
Vin

Re: CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Vin »

I'm afraid nobody will be able to help you unless you post the css code :).
The places where the browsers distinguish most (in the terms of the web presentation) are javascript and CSS.
Zefrem23

Re: CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Zefrem23 »

Whoops, that's me being retarded again...  ;D

Code: Select all

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }

#menuwrapper {
   /* Fix for Opera 8 */
   /*   overflow: hidden;  */
   width: 60%;
   align:right;
   background-color:none;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav ul li { 
   width: 100px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style-type: none;   
   margin: 0px;
   padding: 0px;
}
#primary-nav ul {
   position: absolute;
   top: auto;
   display: none;
}
#primary-nav ul ul {
   margin-top: 1px;
   margin-left: -1px;
   left: 100%;
   top: 0px;
}
   
#primary-nav li {
   margin-left: -1px;
   float: left;
}
#primary-nav ul li {   
   margin-left: -15px;
   margin-top: 0px;
   float: left;
   text-align:left;
   position: relative;
   background-color: #442244
}

/* Styling the basic appearance of the menu elements */
#primary-nav a {
   display: inline;
   font-family:Arial, Helvetica;
   font-size:12px;
   font-weight: bold;
   margin: 0px;
   padding: 3px 4px; /* changed from 5, 10 [height, width] - closes up ranks? */
   text-decoration: none;
   color: #FFFFFF;  
}
#primary-nav li a {
   border-left: 1px solid #660066; /* is this is the | between menu items? YES! */
   border-right: 0px solid #9933ff; /* this is the | at the RIGHT END of screen only! */
}
#primary-nav li li a {
   border: 0px solid #9933ff;  /* is this is the | between menu items? no. */
}   
#primary-nav li, #primary-nav li.menuparent {
   background: #transparent;
}

/* The Menu 'Hover' Colour - Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
   background: 333; /* did this work? no. */
}


/* Styling the basic appearance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,

/* Styling the appearance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
   background-color:#660066; /* changed TO WHITE - fixed hover color? */
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
   display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
   display: block;
}


/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}
Vin

Re: CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Vin »

Have you done anything to the CSS recently? I noticed that in the case of the #primary-nav ul li

Code: Select all

#primary-nav ul li {   
   margin-left: -15px;
   margin-top: 0px;
   float: left;
   text-align:left;
   position: relative;
   background-color: #442244
}
there is a semi-colon missing (at the end). Perhaps this is the issue, as it styles the second level links...
Zefrem23

Re: CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Zefrem23 »

As I understand it the semi-colon at the end of that particular style is optional as the closing braces follows directly afterwards. Then again anything is possible, let me check.... no, sorry, didn't work. I'm stumped as to how a dropdown can drop DOWN in Firefox and to the right in IE.... This is very frustrating.

Thanks for trying btw!
Vin

Re: CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Vin »

Try adding

Code: Select all

clear: both;
in

Code: Select all

#primary-nav ul {
   position: absolute;
   top: auto;
   display: none;
}
Zefrem23

Re: CSS Menu behavior differs between Firefox/Opera and IE6/7

Post by Zefrem23 »

Nope sorry, that didn't work either. If someone can have a look at the live site at http://www.xprocure.co.za (dropdown menu at top right) and maybe make some suggestions I'd really appreciate it.

Thanks!
Locked

Return to “CMSMS Core”