IE and CSS menus giving me problems

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.
Post Reply
dmgd
Forum Members
Forum Members
Posts: 115
Joined: Tue Jun 06, 2006 1:10 pm

IE and CSS menus giving me problems

Post by dmgd »

First thanks for the great CMS system!  I have a new install version 0.13 and all works well for the most part.  I tried to modify CSSMenu Horiz 1 col and everything looks great in FF but IE has a problem.  I have set it to fixed width to accommodate banner and background.  When I mouse over dropdown menu IE increases the window size and moves the background over.  I know this is not a cmsMadeSimple issue but does anyone have any ideas.  Site http://www2.markglassonline.com

Thanks
Mark

cmsMadeSimole  Version 0.13
Linux server-04.ourinternet.us 2.4.21-4.0.1.ELsmp #1 SMP Thu Oct 23 01:27:36 EDT 2003 i686
Apache/1.3.34 (Unix) PHP/4.4.2 mod_throttle/3.1.2 FrontPage/5.0.2.2623 mod_psoft_traffic/0.1 mod_ssl/2.8.25 OpenSSL/0.9.7a
MySQL 4.1.15
For detailed information click:
http://www2.markglassonline.com/tester/phpinfo.php

Template code

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">
<head>
<title>MGO Demo Site - {title}</title>

{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
    <!--[if lt IE 7]>
    <__script__ defer type="text/javascript" src="js/pngfix.js"></__script>
    <![endif]-->
</head>
</__body>
<div id="pagewrapper">
<div id="container">
    <!-- start accessibility skip links -->
    <ul class="accessibility">
      <li><a href="#menu_vert" accesskey="s" title="Skip to navigation">Skip to navigation</a></li>
      <li>{cms_selflink anchorlink='main' dir='anchor' text='Skip to content'}</li>
    </ul>
    <!-- end accessibility skip links -->
   <!-- Start Header, with logo image that links to the default start page -->
   <div id="header" class="clearfix">
    <div id="logoclick">
    <a href="http://#"><img src="uploads/images/bnc/logo-long-white.png" width="565" height="40" border="0" alt="Back to Friends of Baytown Nature Center" title="   Back to Friends of Baytown Nature Center   " /></a>
    </div>
   </div>
   <!-- End Header -->
<div id="subheader2" class="clearfix"> </div>

      <!-- Start Horizontal Navigation -->
      <div id="menu_horiz">
         <h2 class="accessibility">Navigation</h2>
         <div id="wrapper">
        {cms_module module='menumanager' template='cssmenu-accessible.tpl'}    
         </div>
      </div>
      <!-- End Horizontal Navigation -->


   <!-- Start Content (Navigation and Content columns) -->
   <div id="content" class="clearfix">
        <h2>{title}</h2>
         {content} <br />

        <!-- Start relational links -->
	 <div class="hr"></div>
	 <div class="right49">
	 	<p>{cms_selflink anchorlink='main' dir='anchor' text='^ Top'}</p>
	 </div>
         <div class="left49">
            <p>{cms_selflink dir="previous"} <br />
            {cms_selflink dir="next"}</p>
         </div>
	 <!-- End relational links -->

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


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


   <!-- Start Footer -->
   <div id="footer" class="clearfix">
      {global_content name='footer'}
   </div>
   <!-- End Footer -->


</div><!-- end container -->
</div><!-- end pagewrapper -->


<__body>
</__html>
CSS code

Code: Select all

/* Layout sections */
#subheader2{
	float: none;
	top: 0;
	left: 0;
	width: 100%;
  height:11px;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
/* clearing */
	.stretch,
	.clear {
		clear:both; 
		height:1px; 
		margin:0; 
		padding:0; 
		font-size: 15px;
		line-height: 1px;
	}
	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}
	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}
	
	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}

/* end clearing */


/* replace */
	.replace {
		display:block;
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	/* tidy these up */
	.replace * {
		text-indent: -10000px;
		display:block;
		background-repeat: no-repeat;
		background-position: left top;
		background-color:transparent;
	}
	.replace a {
		text-indent:0;
	}
	.replace a span {
		text-indent:-10000px;
	}
/* end replace */


/* accessibility */
     	span.accesskey {
     	text-decoration:none;
     }
     .accessibility {
     	position: absolute;
     	top: -999em;
     	left: -999em;
     }
	dfn {
  		position: absolute;
		left: -1000px;
		top: -1000px;
		width: 0;
		height: 0;
		overflow: hidden;
		display: inline;
	}
/* end accessibility *//* A CSS Framework by Mike Stenhouse of Content with Style */

		/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

 
/* NAV BAR AT THE TOP AND ONE COLUMN OF CONTENT */
    div#content {
        width: 96%;
        margin: 0;
        padding: 1em 2%;
        text-align: left;
    }
    div#main {
		text-align: justify;
    }

/* END CONTENT *//* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* SITE SPECIFIC LAYOUT */
    body {
        margin: 0;
        padding: 0em;
        text-align: center;
        min-width: 770px;
        padding-bottom: 1em;
    }
    div#pagewrapper {
        margin: 0 auto;
        /* max-width: 80em; */
        /* min-width: 60em; */
        width: 770px;
        padding: 0;
        text-align: left;
        overflow: hidden;
    }
    #container {
	position: relative;
	margin: 0;
        overflow: hidden;
    }
    
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            text-align: left;
            overflow: hidden;
        }
        #logoclick { 
	   	position: relative;
		float: right;
		top: 0px;
		left: 5px;
		overflow: hidden;
		width: 565px;
		height: 45px;
		 }

    /* END HEADER */
    
    
    /* CONTENT */
        div#content {

        }
        
        /* MAIN */
            div#main {

            }
        /* END MAIN */
        
        /* SUB */
            div#sub {
                
            }
        /* END SUB */
        
    /* END CONTENT */
    
    
    /* FOOTER */
        div#footer {

        }

        div#footer p {
            font-size: 0.8em;
            margin: 0;
            padding: 15px;
            text-align: center;
        }
    /* END FOOTER */
/* END LAYOUT */



div.breadcrumbs {
   padding: 1em 0;
   text-align: left;
   font-size: 90%;
   margin: 0 1em;
}

div.flags {
  float: right;
  width: 18px;
  padding: 1em 0;
  text-align: right;
  margin: 0 1em 0 0;
}

div.left49 {
  float: left;
  width: 49%;
  }

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
  }
/*** END BNC STYLE ***/
/*** COOLOR BLUE CSS AND DUCK BANNER ***/
/* Layout sections */
	body {
		background: #ccc;
		color: #333;
		}
		
	div#pagewrapper {
		background: #fff;
	    }
		
	div#header {
		color: #fff;
		}
		
	div#footer {
		color: #000;
		background-color: #fff;
		}
	div.hr {
		border-bottom-color: 0000c3;
		}		
/* Links */		
	a,
	a:link 
	a:active, a:visited {
		color: #0000c3;
	}

/* Headings */	
	h1, h2, h3, h4, h5, h6 {
		color: #000;
	}

        div#footer a, 	
        div#footer a:link 
	div#footer a:active, div#footer a:visited {
               color: #00003c;
        }

/* SITE SPECIFIC LAYOUT */
    body {
       background:#ffffff url(uploads/images/bnc/bground.gif) no-repeat top;
    }
    /* HEADER */
        div#header {
            height: 200px;
            background:#fff url(uploads/images/bnc/banner-duck.jpg) no-repeat top;           
        }
    #subheader2{
        background:#FFFFFF url(uploads/images/bnc/sml_separator.gif) repeat-x;
	}
    /* END HEADER */
div.breadcrumbs {
   border-bottom: 1px solid #00003c;
}

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */
#menuwrapper { 
        /*background-color: #659ace;*/
        /*border-bottom: 1px solid #00003c;*/
        }
/* Styling the basic apperance of the menu elements */
#primary-nav a { 
        color: #00003c;
	}
#primary-nav li a { 
	border-right: 1px solid #00003c;
	border-left: 1px solid #00003c;
	border-bottom: 1px solid #00003c;
	}
#primary-nav li li a { 
	border: 1px solid #00003c;
	}	
#primary-nav li, #primary-nav li.menuparent { 
	background-color: #659ace; 
	}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
	background-color: #a9c8e7; 
	}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */


#primary-nav ul li .menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth { 
	background-image: url(uploads/images/bnc/blue_arrow.gif); 
	background-position: center right; 
	background-repeat: no-repeat; 
	}


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

#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh { 
	background-color: #E7AB0B; 
	}
/*** END ALL COLOR CSS ***//* FORM ELEMENTS */
	form {
		margin:0;
		padding:0;
	}
	form div,
	form p {
		font-size: 1em;
		margin: 0 0 1em 0;
		padding: 0;
	}
	label {
		font-weight: bold;
	}
	fieldset {
		border: 1px solid #eee;
		padding: 5px 10px;
		margin: 0 0 1.5em 0;
	}
	fieldset legend {
		color: #666;
		font-size: 1.1em;
		font-weight: bold;
		margin: 0 0 0 0px;
		padding: 0;
		background-color: white;
	}
	* html fieldset legend {
		margin: 0 0 10px -10px;
	}
	fieldset ul {
		list-style: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	fieldset ul li {
		list-style: none;
		margin: 0 0 0.5em 0;
		padding: 0;
	}
     
	
	input, select, textarea {
		font-size:1em; 
		font-family: arial, helvetica, verdana, sans-serif;
        
        margin: 0;
		padding: 2px;
	}
	
	input, select {
		vertical-align:middle;
	}
	textarea {
		width: 200px;
		height: 8em;
	}
	
	input.check {
		border: none;
		width: auto;
		height: auto;
		margin: 0;
	}
	input.radio {
		border: none;
		width: auto;
		height: auto;
		margin: 0;
	}
	input.file {
		height: auto;
		width: 250px;
	}
	input.readonly {
		background-color: transparent;
		border: none;
	}
	input.button {
		width: 10em;
		border:1px solid black;
		background-color: #ddd;
	}
	input.image {
		border: none;
		width: auto;
		height: auto; 
	}
	
    form div.submit {
		margin: 1em 0;
	}
    form div.submit input {
		height: 2em;
        width: 15em;
	}
/* END FORM ELEMENTS */
		/* A CSS Framework by Mike Stenhouse of Content with Style, adapted to CMSMS by Daniel Westergren */

/* TYPOGRAPHY */
	body {
		text-align: left;
		font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
		font-size: 75.01%;
          line-height: 1em;
	}
	div {
		font-size: 1em;
	}
	img {
		border: 0;
	}
	
/* LINKS */
	a,
	a:link 
	a:active, a:visited {
	text-decoration: underline;
	}
	a:hover {
	text-decoration: none;
	}
/* END LINKS */
	
/* HEADINGS */
	h1 {
		font-size: 2em;
		line-height: 1em;
		margin: 0;
		padding: 0;
	}
	h2 {
		font-size: 1.5em;
          line-height: 1.5em;
		margin: 0 0 0.5em 0;
		padding: 0;
	}
	h3 {
		font-size: 1.3em;
		line-height: 1.3em;
		margin: 0 0 0.5em 0;
		padding:0;
	}
	h4 {
		font-size: 1.2em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h5 {
		font-size: 1.1em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
	h6 {
		font-size: 1em;
		line-height: 1.3em;
		margin: 0 0 0.25em 0;
		padding: 0;
	}
/* END HEADINGS */

/* TEXT */
	p {
		font-size: 1em;
		margin: 0 0 1.5em 0;
		padding: 0;
		line-height:1.4em;
	}
	blockquote {
		border-left: 10px solid #ddd;
		margin-left: 10px;
	}
	pre {
		font-family: monospace;
		font-size: 1.0em;
	}
	strong, b {
		font-weight: bold;
	}
	em, i {
		font-style:italic;
	}
    code {
        font-family: "Courier New", Courier, monospace;
        font-size: 1em;
        white-space: pre;
    }
/* END TEXT */
	
/* LISTS */
	#main ul {
        line-height:1.4em;
	   margin: 0 0 1.5em 0;
	   padding: 0;
	}
	#main ul li {
		margin: 0 0 0.25em 30px;
		padding: 0;
	}
	ol {
		font-size: 1.0em;
		line-height: 1.4em;
		margin: 0 0 1.5em 0;
		padding: 0;
	}
	ol li {
		font-size: 1.0em;
		margin: 0 0 0.25em 30px;
		padding: 0;
	}
	dl {
		margin: 0 0 1.5em 0;
		padding: 0;
		line-height: 1.4em;
	}
	dl dt {
		font-weight: bold;
		margin: 0.25em 0 0.25em 0;
		padding: 0;
	}
	dl dd {
		margin: 0 0 0 30px;
		padding: 0;
	}
/* END LISTS */
	
	
/* TABLE */
	table {
        font-size: 1em;
	   margin: 0 0 1.5em 0;
        padding: 0;
	}
	table caption {
		font-weight: bold;
		margin: 0 0 0 0;
		padding: 0 0 1.5em 0;
	}
	th {
		font-weight: bold;
		text-align: left;
	}
	td {
		font-size: 1em;
	}
/* END TABLE */	
	
	hr {
		display: none;
	}

	div.hr {
		height: 1px;
		margin: 1em 10px;
		border-bottom-width: 1px;
		border-bottom-style: solid;
	}
/*** END TYPOGRAPHY ***/
/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */
/* The wrapper clears the floating elements of the menu */

div#menu_horiz {
        width: auto;
        text-align: center;
    }
#wrapper {
	
	}
#menuwrapper { 
        overflow: hidden; 
        width: 770px;
        text-align: left;
        }

/* Set the width of the menu elements at second level. Leaving first level flexible. */

#primary-nav li li { 
        width: 125px; 
       }


/* Unless you know what you do, do not touch this */ 

#primary-nav, #primary-nav ul { 
	list-style: none; 
        margin: 0 auto;
	padding: 0px; 
	width: 700px;
	}
#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 li li { 
	margin-left: 0px;
	margin-top: -1px;
	float: none; 
	position: relative; 
	}

/* Styling the basic apperance of the menu elements */

#primary-nav a { 
	display: block; 
	margin: 0px; 
	padding: 5px 7px; 
	text-decoration: none; 
     font-size: .8em;
	}

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

#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; 
	}
#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%; 
	}
Mark
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: IE and CSS menus giving me problems

Post by Dr.CSS »

try splitting these... the ul is also the ones that fly out so 700px is going to make IE shove it to the right maybe?

#primary-nav, #primary-nav ul {
list-style: none;
      margin: 0 auto;
padding: 0px;
width: 700px;
}

#primary-nav {
list-style: none;
      margin: 0 auto;
padding: 0px;
width: 700px;
}
#primary-nav ul {
list-style: none;
      margin: 0 auto;
padding: 0px;
}
dmgd
Forum Members
Forum Members
Posts: 115
Joined: Tue Jun 06, 2006 1:10 pm

Re: IE and CSS menus giving me problems

Post by dmgd »

Great thanks Mark
Mark
Post Reply

Return to “CMSMS Core”