CSSMenu Vertical problem

asim · Post by **asim** » Tue Feb 06, 2007 5:53 pm

Hi,

I’m running 1.0.4 of CMSMS, I’m using MySQL 4.0 and PHP 5 on a standard hosted Unix server.

After successfully installing CMSMS (may I say, how excellent and easy the whole install process was, in comparison to other CMS’s) I’m having great difficulty with something that should not really be happening, I’ve probably done something wrong a long the way however its taking me a complete eternity to solve, hence the post

OK, I’m using the CSSMenu Vertical on a CSSMenu left + 1 column Template, however I’m getting very strange double-borders between each navigation item and when you scroll over them, it leaves behind a 1 PX gap, this ONLY occurs in IE7, Firefox seems to be fine.

The temporary page I’m working on is here: http://www.asimjanjua.com/admin/ (I do hope you see the problem and its not connected to my local setup, in which case I’ll have to send through screenshots)

Any help would be very much appreciated.

Thank You.

RonnyK · Post by **RonnyK** » Tue Feb 06, 2007 7:38 pm

Change the following in your stylesheet.

Code: Select all

<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

and additionally:

Code: Select all

<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

The first code is to handle the fact that IE7 handles CSS differently, the second is to make sure that IE < 7 still works correctly.

Ronny

asim · Post by **asim** » Wed Feb 07, 2007 10:13 am

Hi Ronny,

Thank you for your help. However I'm now having a problem in IE6, please note that I'm running a stadalone version of IE6, so I'm not sure if your seeing this too, but the page width has increased and I no longer get the sub-menu on the hover over, you can take a look here http://www.asimjanjua.com/admin/. The hover over stopped working when I implemented the following:

Code: Select all

<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

Thank You.

RonnyK · Post by **RonnyK** » Wed Feb 07, 2007 11:27 am

asim,

the code concerning the CSSmenu.js shouldn't be completely implemented. The line concerning the cssmenu.js should have been avaiable upfront. You should only had to embed it in the logic. Did you copy in all three lines or just wrap lines 1 and 3 around the existing line?

Ronny

asim · Post by **asim** » Wed Feb 07, 2007 11:39 am

Hi Ronny,

I copied all three lines from your code snippnet, it should be viewable in the source. What do you recommend I do?

Cheers.

RonnyK · Post by **RonnyK** » Wed Feb 07, 2007 6:23 pm

asim,

I miss a part of the first code when I check the source,

Code: Select all

[color=red]<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->[/color]
<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

The style type was already available in the standard css for the left menu + 1 col standard. I think the only change had to do with the if-statement. Can you post the part of your template as code in this post, that reads easier than the html-source.

Ronny

asim · Post by **asim** » Wed Feb 07, 2007 9:17 pm

Hi Ronny,

Slightly confused now

but I'm sure it will all be all clarified. So I should not change anything in the Stylesheet of the menu? Or?The code for the Template is below:

Code: Select all

<!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" xml:lang="en" lang="en">
<!-- Change lang="en" to the language of your site -->

<head>

<title>{sitename} - {title}</title>
<!-- The sitename is changed in Site Admin/Global settings. {title} is the name of each page -->

{metadata}
<!-- Don't remove this! Metadata is entered in Site Admin/Global settings. -->

{stylesheet}
<!-- This is how all the stylesheets attached to this template are linked to -->

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!-- Relational links for interconnections between pages, good for accessibility and Search Engine Optmization -->


{literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max -measured against window width
function P7_MinMaxW(a,b){
	var nw="auto",w=document.documentElement.clientWidth;
	if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->
{/literal}
<!-- The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Left sidebar + 1 column" -->


<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->

</head>

</__body>

<div id="pagewrapper">

    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
      <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
    </ul>
    <!-- end accessibility skip links -->


    <hr class="accessibility" />
    <!-- Horizontal ruler that is hidden for visual browsers by CSS -->


   <!-- Start Header, with logo image that links to the default start page. Logo image is changed in the stylesheet  "For template: Left menu + 1 column" -->
   <div id="header">
           <h1>{cms_selflink dir="start" text="$sitename"}</h1>
   <hr class="accessibility" />
   </div>
   <!-- End Header -->


   <!-- Start Search-->
   <div id="search">
          {search}
   </div>
   <!-- End Search -->


   <!-- Start Breadcrumbs -->
   <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
   <hr class="accessibility" />
   </div>
   <!-- End Breadcrumbs -->


   <!-- Start Content (Navigation and Content columns) -->
   <div id="content">

      <!-- Start Navigation -->
      <div id="sidebar">
         <h2 class="accessibility">Navigation</h2>
         {menu template='cssmenu.tpl'}
      <hr class="accessibility" />
      </div>
      <!-- End Navigation -->


      <!-- Start Content Area -->
      <div id="main">
         <div style="float: right;">{print showbutton=true script=true}</div>
         <h2>{title}</h2>
         {content} <br />

         <!-- Start relational links -->
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{anchor anchor='main' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous" label="Previous page: "} <br />
            {cms_selflink dir="next"}</p>
         </div>
         <!-- The label parameter doesn't need to be there if you're using English, but is here to show how it's used if you don't want the English text "Previous page" -->
	 <!-- End relational links -->

      <hr class="accessibility" />
      </div>
	  <!-- End Content Area -->


   </div>
   <!-- End Content -->


   <!-- Start Footer. Edit the footer in the Global Content Block called "footer" -->
   <div id="footer">
      {global_content name='footer'}
   </div>   
   <!-- End Footer  -->


</div><!-- end pagewrapper -->
<__body>
</__html>

RonnyK · Post by **RonnyK** » Thu Feb 08, 2007 9:12 am

asim,

I'm not running against 1.0.4 but the code I showed in the first post, is indeed entered in de template and not in the menu. I see that in your template you don't act differently depending on different IE versions.

What if you replace

Code: Select all

<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

with:

Code: Select all

<!--[if lte IE 6]>
<style type="text/css">
#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

and replace:

Code: Select all

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
<!-- The above JavaScript is required for CSSMenu to work in IE -->

with:

Code: Select all

<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

In the replaced version, the check on the version of IE is included. If this doesn't solve your issue it might have to do with the 1.0.4. version your running.

Good luck,

Ronny

asim · Post by **asim** » Thu Feb 08, 2007 10:04 am

Hi Ronny,

That did not work unfortunately in IE6. It does work with serious alignment problems in IE6 when I use this:

Code: Select all

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

INSTEAD OF

Code: Select all

<!--[if lte IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

NOTE: that "lte" and "6" is taken out and were only left with "if IE".

Does that help you?

Thanks

asim · Post by **asim** » Thu Feb 08, 2007 10:17 am

Hi Ronny,

I just checked the script on a running version of IE 6 instead of my standalone version and it worked! So the problem is with my standalone version of IE 6 that was causing the problem, i.e NOT executing the IF statement.

However the sub menu when it pops out in IE6 is seriously mis-aligned, with the borders not aligning correctly, can you help with that?

The problem is with IE6 ONLY and you can view the page here http://www.asimjanjua.com/admin

Thanks a mill!

Asim

RonnyK · Post by **RonnyK** » Thu Feb 08, 2007 10:23 am

asim,

what do you mean exactly, because I'm lookin at the menu and sub-menu's running IE6 and don't see anything specific wrong with the alignment.

Ronny

CMS Made Simple Forums

CSSMenu Vertical problem

CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem

Re: CSSMenu Vertical problem