CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

CSSMenu Vertical problem

https://forum.cmsmadesimple.org/viewtopic.php?t=9846

Page 1 of 1

CSSMenu Vertical problem

Posted: Tue Feb 06, 2007 5:53 pm
by asim
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.

Re: CSSMenu Vertical problem

Posted: Tue Feb 06, 2007 7:38 pm
by RonnyK
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

Re: CSSMenu Vertical problem

Posted: Wed Feb 07, 2007 10:13 am
by asim
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.

Re: CSSMenu Vertical problem

Posted: Wed Feb 07, 2007 11:27 am
by RonnyK
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

Re: CSSMenu Vertical problem

Posted: Wed Feb 07, 2007 11:39 am
by asim
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.

Re: CSSMenu Vertical problem

Posted: Wed Feb 07, 2007 6:23 pm
by RonnyK
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

Re: CSSMenu Vertical problem

Posted: Wed Feb 07, 2007 9:17 pm
by asim
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>

Re: CSSMenu Vertical problem

Posted: Thu Feb 08, 2007 9:12 am
by RonnyK
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

Re: CSSMenu Vertical problem

Posted: Thu Feb 08, 2007 10:04 am
by asim
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

Re: CSSMenu Vertical problem

Posted: Thu Feb 08, 2007 10:17 am
by asim
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

Re: CSSMenu Vertical problem

Posted: Thu Feb 08, 2007 10:23 am
by RonnyK
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
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited