[SOLVED]Display problems in IE7 for NcleanBlue modified

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
bursu76
New Member
New Member
Posts: 3
Joined: Thu Feb 03, 2011 2:41 pm

[SOLVED]Display problems in IE7 for NcleanBlue modified

Post by bursu76 »

Hello everybody,

some info on my CMSMS instalation:
CMS Version 1.9.2
Current PHP Version (phpversion): 5.3.3
Server Database (server_db_type): MySQL (mysql): 5.0.77
Apache/2.2.3 (CentOS)
Server Operating System (server_os): Linux 2.6.18-194.el5 On x86_64
I verified the CSS and HTML, the page is valid css and html (no errors).

Everything works on IE8, Mozilla Firefox, but on IE7 i have a problem the content is overlaping my head menu. Sorry i cann't give a link because is only running local for testind/developing purposes. This problem i try to fix for the last 2 days, i can change the order with z-index so the menu will be in front but still not a very good solution, so i will apreciate your help. Thank you
Here is the template (Ncleanblue modified), only the header and content part.

Code: Select all

{process_pagedata}<!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>
{if isset($canonical)}<link rel="canonical" href="{$canonical}" />{elseif isset($content_obj)}<link rel="canonical" href="{$content_obj->GetURL()}" />{/if}

<title>{title} | {sitename}</title>
{metadata}
{cms_stylesheet}
{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
<!--[if IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->
{* IE6 png fix *}
{literal}
<!--[if IE 6]>
<__script__ type="text/javascript"  src="uploads/NCleanBlue/js/ie6fix.js"></__script>
<__script__ type="text/javascript">
 // argument is a CSS selector
 DD_belatedPNG.fix('.sbar-top,.sbar-bottom,.main-top,.main-bottom,#version');
</__script>
<style type="text/css">
/* enable background image caching in IE6 */
html {filter:expression(document.execCommand("BackgroundImageCache", false, true));} 
</style>
<![endif]-->
{/literal}
  </head>
  </__body>
    <div id="ncleanblue">
      <div id="pagewrapper" class="core-wrap-960 core-center">
        <div id="header" class="util-clearfix">
          <div id="logo" class="core-float-left">
<embed src="/uploads/flash/header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width=750 height=105></embed>
          </div>
          <span class="util-clearb">&nbsp;</span>
         <h2 class="accessibility util-clearb">Navigation</h2>
          <div class="page-menu util-clearfix">
       {menu loadprops=0 template='menua' number_of_levels="1"}
          </div>
      <hr class="accessibility util-clearb" />
        </div>
        <div id="content" class="util-clearfix"> 
          <div id="main"  class="core-float-right">
            <div class="main-top">
          </div> 
             <div class="main-main util-clearfix">
            {content}
        </div>    
<br />
        <div class="main-bottom">
<center><img src="/uploads/NCleanBlue/separator.png"></center>
        </div>
           <hr class="accessibility" />
           </div>
{* End main bottom *}
  <__body>
</__html>
Here is my CSS:

Code: Select all

  
body {
/* default text for entire site */
	font: normal 0.8em Tahoma, Verdana, Arial, Helvetica, sans-serif;
/* default text color for entire site */
	color: #fff;
/* you can set your own image and background color here */
        background: #5A0F5A; /* url([[root_url]]/uploads/NCleanBlue/bgcontent.png) repeat-x scroll left top;*/
}
/* Mask helper  for browsers ZOOM, Rezise and Decrease */
#ncleanblue {
/* set to width of viewport */
	width: auto;
/* you can set your own image and background color here */
	background: #5A0F5A;/* url([[root_url]]/uploads/NCleanBlue/bgcontent.png) repeat-x;*/
}
/* wiki style external links */
/* external links will have "(external link)" text added, lets hide it */
a.external span {
	position: absolute;
	left: -5000px;
	width: 4000px;
}
a.external {
/* make some room for the image, css shorthand rules, read: first top padding 0 then right padding 12px then bottom then right */
	padding: 0 12px 0 0;
}
/* colors for external links */
a.external:link {
	color: #990099;
/* background image for the link to show wiki style arrow */
	background: url([[root_url]]/images/cms/external.gif) no-repeat 100% -100px;
}
a.external:visited {
	color: #fff;
/* a different color can be used for visited external links */
/* Set the last 0 to -100px to use that part of the external.gif image for different color for active links external.gif is actually 300px tall, we can use different positions of the image to simulate rollover image changes.*/
	background: url([[root_url]]/images/cms/external.gif) no-repeat 100% -100px;
}
a.external:hover {
	color: #5A0F5A;
/* Set the last 0 to -200px to use that part of the external.gif image for different color on hover */
	background: url([[root_url]]/images/cms/external.gif) no-repeat 100% 0;
	background-color: inherit;
}
/* end wiki style external links */
/* hr and anything with the class of accessibility is hidden with CSS from visual browsers */
.accessibility, hr {
/* absolute lets us put it outside the viewport with the indents, the rest is to clear all defaults */
	position: absolute;
	top: -9999em;
	left: -9999em;
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
	border: none;
}
/* ------------ Standard  HTML elements and their default settings ------------ */
b, strong{font-weight: bold;}i, em{	font-style: italic;}
p {
	padding: 0;
	margin-top: 0.5em;
    margin-bottom: 1em;
   text-align:left;
}
h1, h2, h3, h4, h5 {
	line-height: 1.6em;
	font-weight: normal;
	width: auto;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
/*default link styles*/
a {
	color: #990099;
	text-decoration: none;
	text-align: left;
}
a:hover {
	color: #e712b7;
}
a:active {
	color: #e712b7;
}
a:visited {
	color: #e712b7;
}
input, textarea, select {
	font-size: 0.95em;
}
/* ------------ Wrapper ------------ */
div#pagewrapper {
	font-size: 95%;
	position: relative;
	z-index: 1;
}
/* ------------ Header ------------ */
#header {
	height: 105px;
	width: 960px;
}
#logo a {
/* adjust according your image size */
	height: 115px;
	width: 215px;
/* forces full link size */
	display: block;
/* this hides the text */
	text-indent: -9999em;
	margin-top: 0;
	margin-left: 0;
/* you can set your own image here, note size adjustments */
}
/* ------------ Content ------------ */
#content {
	width: auto;
/* all text in #content will default align left, changed in other calls */
	text-align: left;
       background: url([[root_url]]/uploads/NCleanBlue/bgcontent.png) repeat-x;\
}
#bar {
	width: auto;
	height: 40px;
	padding-right: 1em;
	padding-left: 1em;
}

.print {
	margin-right: 75px;
	margin-top: 10px;
}
#version {
	width: 50px;
	height: 31px;
	position: absolute;
	z-index: 5;
	top: 130px;
	right: -16px;
	font-size: 1.6em;
	font-weight: bold;
	padding: 28px 15px;
	/*color: #FFF;*/
	text-align: center;
	vertical-align: middle;
	/*background:  url([[root_url]]/uploads/NCleanBlue/version.png) no-repeat left top;*/
}
/* IE6 fixes */
* html div#version {
	top: 150px;
}
/* End IE6 fixes */
/* Site Title */
h1.title {
	font-size: 1.8em;
	color: #666666;
	margin-bottom: 0.5em;
}
/* Breadcrumbs */
div.breadcrumbs {
	padding: 0.5em 0;
	font-size: 80%;
	margin: 0 1em;
}
div.breadcrumbs span.lastitem {
	font-weight: bold;
}
/* ------------ Side Bar (Left) ------------ */
#left {
	width: 400px;
        margin-left: 50px;
        margin-top: 10px;
       /* background: url([[root_url]]/uploads/NCleanBlue/about.png) repeat-x;*/
}
/* Image that Represents the new CMS design */
#left .screen {
	margin: 100px 50px;
}
/* End  */
.sbar-main {
	width: auto;
	border-right: 0px solid #5E0F5E;
	border-left: 0px solid #5E0F5E;
	/*background: #F0F0F0;*/
}
span.sbar-bottom {
	width: auto;
	display: block;
	height: 10px;
/*	background: url([[root_url]]/uploads/NCleanBlue/bg__content.png) no-repeat left bottom;*/
}
/* ------------ Main (Right) ------------ */
#main {
	width: 960px;
}
.main-top {
	height: 0px;
	width: auto;
	/*background: url([[root_url]]/uploads/NCleanBlue/bg__content.png) no-repeat right top;*/
}
.main-main {
             width: auto;
        margin-top: 5px;
        margin-left:15px;
	border-right: 0px solid #5E0F5E;
	border-left: 0px solid #5E0F5E;
	/*background: #5E0F5E; background: url([[root_url]]/uploads/NCleanBlue/bgcontent.png) repeat-x;*/
	padding: 0px;
	padding-top: 0px;
}
.main-bottom {
	width: auto;
	height: 15px;
	/*background: url([[root_url]]/uploads/NCleanBlue/footer2.png) no-repeat;*/
}
.right49, .left49 {
	font-size: 0.85em;
	margin: 7px 5px 5px 10px;
	font-weight: bold;
}
.left49 span {
	display: block;
	padding-top: 1px;
}
.left49 a {
	font-weight: normal;
}
.right49 {
        display:inline;
	height: 28px;
	width: 50px;
	padding-right: 10px;
/*	background: url([[root_url]]/uploads/NCleanBlue/bull.png) no-repeat right top;*/
}
.right49 a, .right49 a:visited {
	padding: 7px 4px;
	display: block;
	color: #000;
	height: 15px;
/*	background: url([[root_url]]/uploads/NCleanBlue/bull.png) no-repeat  left top;*/
}
#main h2,
#main h3,
#main h4,
#main h5,
#main h6 {
	font-size: 1.4em;
	color: #e712b7;
}
div#main ul,
div#main ol,
div#main dl,
#footer ul,
#footer ol {
	line-height: 1em;
	margin: 0 0 1.5em 0;
}
div#main ul,
#footer ul {
	list-style: circle;
}
div#main ul li,
div#main ol li,
#footer ul li,
#footer ol li {
	padding: 2px 2px 2px 5px;
	margin-left: 20px;
}
/* definition lists topics on bold */
div#main dl dt {
	font-weight: bold;
	margin: 0 0 0 1em;
}
div#main dl dd {
/*	margin: 0 0 1em 1em;*/
}
div#main dl {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #c0c0c0;
}
#services{
        width:320px; 
        float:left; 
        margin-left:35px;
        margin-top:0px;
        background: url([[root_url]]/uploads/NCleanBlue/about.png) repeat-x;
}
#services h2{
        margin-top:5px;
        margin-left:5px;
 	font: bold 1.2em Arial, Helvetica, sans-serif;
	color: #fff;
}
#services img{margin-bottom:12px}
#services p {margin-bottom:15px}
#services p span.headline{display:block; 
         margin-bottom:0px; 
         margin-left:5px;
         margin-right:5px;
}
.headline{
         text-align: justify;
         margin-bottom:10px; 
         margin-left:5px;
         margin-right:5px;
}
#services ul.bullets{margin-left:10px}
#services p.subtitle{
        margin-bottom:10px;
        margin-left:10px;
        margin-right:10px;
}

#vertical{
        width:5px; 
        float:left; 
        margin-left:10px;
        margin-top:0px;
        height:auto;
}
#solutions{
        width:265px; 
        float:left; 
        margin-left:5px;
        margin-top:0px;
        background: url([[root_url]]/uploads/NCleanBlue/about.png) repeat-x;
}
#solutions h2{
        margin-top:5px;
        margin-left:10px;
 	font: bold 1.2em Arial, Helvetica, sans-serif;
	color: #fff;
}
#solutions img{margin-bottom:12px}
#solutions p {margin-bottom:15px}
#solutions p span.headline{
         display:block; 
         margin-bottom:0px; 
         margin-left:10px;
         margin-right:10px;
}
#solutions ul.bullets{margin-left:10px}
#solutions p.subtitle{
        margin-bottom:0px;
        margin-left:10px;
        margin-right:10px;
}
#foto{
        width:265px; 
        float:left; 
        margin-left:10px;
        margin-top:0px;
        background: url([[root_url]]/uploads/NCleanBlue/about.png) repeat-x;
}
#foto h2{
        margin-top:5px;
        margin-left:10px;
 	font: bold 1.2em Arial, Helvetica, sans-serif;
	color: #fff;
}
#foto img{margin-bottom:12px}
#foto p {margin-bottom:15px}
#foto p span.headline{display:block; 
         margin-bottom:0px; 
         margin-left:10px;
         margin-right:10px;
}
#foto ul.bullets{margin-left:10px}
#foto p.subtitle{
        margin-bottom:10px;
        margin-left:10px;
        margin-right:10px;
}
/* ------------ END LAYOUT ---------------*/
/* ------------  Menu  ROOT  ------------ */
.page-menu {
	width: auto;
	height: 35px;
	margin: 3px 0 0 12px;
}
.menuwrapper {}

ul#primary-nav li hr.menu_separator{
        position: relative;
        visibility: hidden;
        display:block;
        width:5px;
       	height: 32px;
       	margin: 0px 5px 0px;
}
.page-menu ul#primary-nav {
	height: 1%;
	float: left;
	list-style: none;
	padding: 0px;
	margin: 0px;
}
.page-menu ul#primary-nav li {
	float: left;
}
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a span {
        position:relative;
        /*z-index: 100;*/
	display: block;
	padding: 0px 23px;
	background-repeat: no-repeat;
	background-image: url([[root_url]]/uploads/NCleanBlue/tabs.gif);
}
.page-menu ul#primary-nav li a {
	padding-left: 0;
	color: #fff;
	font-weight: bold;
	line-height: 2.15em;
	text-decoration: none;
	margin-left: 3px;
	/*font-size: 2.8em;*/
}
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:active {
	color: #000;
	background-repeat: no-repeat;
	background-image: url([[root_url]]/uploads/NCleanBlue/tabs.gif);
}
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover span {
	color: #000;
}
.page-menu ul#primary-nav li a span {
	padding-top: 6px;
	padding-right: 15px;
        padding-left: 30px;
	padding-bottom: 5px;
}
.page-menu ul#primary-nav li a.menuparenth,
.page-menu ul#primary-nav li a.menuactive,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
	background-position: 100% -120px;
}
.page-menu ul#primary-nav li a {
	background-position: 100% -80px;
}
.page-menu ul#primary-nav li a.menuactive span,
.page-menu ul#primary-nav li a:hover span,
.page-menu ul#primary-nav li a:focus span,
.page-menu ul#primary-nav li a:active span {
	background-position: 0 -40px;
}
.page-menu ul#primary-nav li a span {
	background-position: 0 0;
}
.page-menu ul#primary-nav .sectionheader,
.page-menu ul#primary-nav li a:link.menuactive,
.page-menu ul#primary-nav li a:visited.menuactive {
/* @ Opera, use pseudo classes otherwise it confuses cursor... */
	cursor: text;
}
.page-menu ul#primary-nav li span,
.page-menu ul#primary-nav li a,
.page-menu ul#primary-nav li a:hover,
.page-menu ul#primary-nav li a:focus,
.page-menu ul#primary-nav li a:active {
/* @ Opera, we need to be explicit again here now... */
	cursor: pointer;
}
/* Additional IE specific bug fixes... */
* html .page-menu ul#primary-nav {
	display: inline-block;
}
*:first-child+html .page-menu ul#primary-nav {
	display: inline-block;
}
/* --------------------  menu dropdow  -------------------------
/* Unless you know what you do, do not touch this */
/* Reset all ROOT menu styles. */
ul#primary-nav ul.unli li li a span,
ul#primary-nav ul.unli li a span,
ul#primary-nav .menuparent .unli .menuparent .unli li a span {
	font-weight: normal;
	background-image: none;
	display: block;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
#primary-nav {
	margin: 0px;
	padding: 0px;
}
#primary-nav ul {
	list-style: none;
	margin: -6px 0px 0px;
	padding: 0px;
/* Set the width of the menu elements at second level. Leaving first level flexible. */
	width: 209px;
}
#primary-nav ul {
	position: absolute;
	z-index: 1001;
	top: auto;
	display: none;
	padding-top: 9px;
	background: url([[root_url]]/uploads/NCleanBlue/ultop.png) no-repeat left top;
}
* html #primary-nav ul.unli {
	padding-top: 12px;
	background: url([[root_url]]/uploads/NCleanBlue/ultop.gif) no-repeat left top;
}
#primary-nav ul.unli ul {
	margin-left: -7px;
	left: 100%;
	top: 3px;
}
* html #primary-nav ul.unli ul {
	margin-left: -0px;
}
#primary-nav li {
	margin: 0px;
	float: left;
}
#primary-nav li li {
	margin-left: 7px;
	margin-top: -1px;
	float: none;
	position: relative;
}
/* Styling the basic appearance of the menu elements */
ul#primary-nav ul hr.menu_separator{
        position: relative;
        visibility: visible;
        display:block;
        width:130px;
       	height: 1px;
       	margin: 2px 30px 2px;
	padding: 0em;
	border-bottom: 1px solid #ccc;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
}
#primary-nav .separator,
#primary-nav .separatorh {
	height: 9px;
	width: 209px;
	margin: 0px 0px -8px;
	background: url([[root_url]]/uploads/NCleanBlue/ulbtm.png) no-repeat left bottom;
}
* html #primary-nav .separator {
       z-index:-1;
	background: url([[root_url]]/uploads/NCleanBlue/ulbtm.gif) no-repeat left bottom;
}
*:first-child+html #primary-nav .separator {
       z-index:-1;
}
#primary-nav ul.unli li a {
	padding: 0px 10px;
	width: 165px;
	margin: 5px;
	background-image: none;
}
* html #primary-nav ul.unli li a {
	padding: 0px 10px 0px 5px;
	width: 165px;
	margin: 5px 0px;
}
#primary-nav li li a:hover {
	background-color: #DBE7F2;
}
/* Styling the basic appearance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive li a {
	text-decoration: none;
	background: none;
}
#primary-nav ul.unli li.menuparenth,
#primary-nav ul.unli a:hover,
#primary-nav ul.unli a.menuactive {
	background-color: #DBE7F2;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul.unli li .menuparent,
#primary-nav ul.unli li .menuparent:hover,
#primary-nav ul.unli li .menuparent,
#primary-nav .menuactive.menuparent .unli .menuactive.menuparent .menuactive.menuparent {
	background-image: url([[root_url]]/uploads/NCleanBlue/arrow.gif);
	background-position: center right;
	background-repeat: no-repeat;
}
/* 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:hover ul ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul,
#primary-nav li.menuparenth ul ul ul {
	display: none;
}
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li.menuparenth ul {
	display: block;
}
/* IE Hacks */
#primary-nav li li {
	float: left;
	clear: both;
}
#primary-nav li li a {
	height: 1%;
}
/*************** End Menu *****************/
Images from IE7:Sorry i cannot atach images
ok, i had to do a different stylesheet just for IE7, now it work's
so here it is:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
form me it did the trick, this was my last solution. I really tried everything else.
Tank you
<![endif]-->

Last edited by bursu76 on Mon Feb 07, 2011 12:39 pm, edited 2 times in total.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Display problems in IE7 for NcleanBlue modified theme

Post by Dr.CSS »

Too bad it isn't live or accessible as it really helps to see it for a real good answer...
bursu76
New Member
New Member
Posts: 3
Joined: Thu Feb 03, 2011 2:41 pm

Re: Display problems in IE7 for NcleanBlue modified theme

Post by bursu76 »

Thank u for prompt answer, i made it "alive", the url is http://www.autoimpuls.ro/test/.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Display problems in IE7 for NcleanBlue modified theme

Post by Dr.CSS »

Most likely it has to do with not clearing the content below the menu, you do have a div class clearb at the bottom of the menu that you could most likely give clear:both to that may help...
bursu76
New Member
New Member
Posts: 3
Joined: Thu Feb 03, 2011 2:41 pm

clear <div>

Post by bursu76 »

Ok, i look in the stylesheet and i have:
/* IE Hacks */
#primary-nav li li {
float: left;
clear: both;
}
Thank you again for helping me.
Post Reply

Return to “Layout and Design (CSS & HTML)”