Background image shows in IE6 and IE8 Beta not IE7

chrisJR

newbie

Posts: 3
Joined: 2008-05-09

Posted: Fri, 2008-05-09 06:18

Hi,

I do not have access to a PC to test so I am using this site. http://browsershots.org/
I looked at a previous post and the suggestions did not work.

Problem: Background image of the menubar not showing in IE7 but works in IE6 and IE8 Win. Also works in FF, Safari for Mac. Of course the client has IE7.
URL: www.nirvanahospice.com/about.html

Appreciate any help.

/* Nav Menu CSS for the site */
 
#menuwrapper {
	position:relative;
	top:15em;
	left:2.5em;
	padding:0;
	margin:0;
	width: 381px;
	height: 23px;
	background: #666666 url(images/nav_mbar.jpg) repeat-x;
 }
 
.clearit {
	clear: both;
	height: 0;
	line-height: 0.0;
	font-size: 0;
}

#menubar, #menubar ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/*
Root-Level Links
*/
#menubar a {
	display: block;
	text-decoration: none;
	padding: 5px 10px;
	border-right: 1px solid #333333;
	font-size: 1.1em;
	color: #FFFFFF;
}

#menubar a.trigger {
	padding: 5px 16px 5px 10px;
	background-image: url(images/nav_marrow.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

#menubar li {
	float: left;
	width: 10em;
}

#menubar li ul, #menubar ul li  {
	width: 15em;
}

#menubar ul li a  {
	color: #565656;
	border-right: 0;
	padding: 3px 12px 3px 16px;
}

#menubar li ul {
	position: absolute;
	display: none;
	background-color: #99CCFF;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	background: url(images/nav_mgrad.jpg);
	background-repeat: repeat-x;
}

#menubar li:hover a, #menubar a:focus,
#menubar a:active, #menubar li.p7hvr a {
	color: #000000;
	background-color: #99CCFF;
}

#menubar li:hover ul, #menubar li.p7hvr ul {
	display: block;
}

#menubar li:hover ul a, #menubar li.p7hvr ul a {
	color: #000000;
	background-color: transparent;
}

#menubar ul a:hover {
	background-color: #606060!important;
	color: #FFFFFF!important;
}

#menubar li {width: auto;}

<!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"><!-- InstanceBegin template="/Templates/generic.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>What is Hospice</title>
<!-- InstanceEndEditable -->
<link href="nirvana.css" rel="stylesheet" type="text/css" />
<script src="dropm.js" type="text/javascript"></script>
<!--[if lte IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;}
a:active {width: auto;}
</style>
<![endif]-->

<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body>
<div id="wrapper">
<div id="masthead">
   
<div id="menuwrapper">
 
  <ul id="menubar">
 	<li><a href="http://www.nirvanahospice.com/index.html">Home</a></li>
    
	<li><a class="trigger">About&nbsp;Us</a>
		<ul>
		<li><a href="http://www.nirvanahospice.com/about.html">About&nbsp;Us</a></li>
		<li><a href="http://www.nirvanahospice.com/whatishospice.html">What&nbsp;is&nbsp;Hospice</a></li>
		<li><a href="http://www.nirvanahospice.com/staff.html">Our&nbsp;Staff</a></li>
		</ul>
	</li>

	<li><a class="trigger">Healthcare</a>
		<ul>
		<li><a href="http://www.nirvanahospice.com/referral.html">Referral&nbsp;Guidelines</a></li>
		<li><a href="http://www.nirvanahospice.com/employment.html">Employment</a></li>
		</ul>
	</li>

<li><a href="http://www.nirvanahospice.com/donations.html">Donations</a></li>
<li><a href="http://www.nirvanahospice.com/contact.html">Contact&nbsp;Us</a></li>
</ul>

    </div>
    <br class="clearit" />
  </div>

  <div id="content"> <!-- InstanceBeginEditable name="EditRegion3" -->
    <p class="heading">About Us</p>
    <p class="image"><img src="images/buddah.gif" alt="What is Hospice Photo?" width="180" height="232" /></p>
    <p>Nirvana is the state that Buddhists refer to as “enlightenment”. It is a mode of existence where body, mind and soul are in complete peace and solitude. The name Nirvana was chosen for our hospice for just this reason. It is this state that we wish for all of our clients! Our logo depicts the Celtic tree of life. Its interlocking roots symbolize the anchor of family, spiritual leaders, and close friends. Nirvana Home Hospice aims to provide the branches needed to “interlock” the necessary relationships between doctors, physiotherapists, nurses, and even other individuals who share similar experieinces. This becomes of paramount importance during this difficult time as it gives patient and family precious time to reflect on and appreciate life instead of being preoccupied with pain and suffering.
    </p>
    <!-- InstanceEndEditable -->
  </div>
   
  <div id="footer">
    <p>| <a href="http://www.nirvanahospice.com/index.html">Home</a> | <a href="http://www.nirvanahospice.com/about.html">About</a> | <a href="http://www.nirvanahospice.com/employment.html">Healthcare</a> | <a href="http://www.nirvanahospice.com/donations.html">Donations</a> | <a href="http://www.nirvanahospice.com/contact.html">Contact Us</a> | © 2008 Nirvana Home Hospice. All Rights Reserved.</p>
  </div>
  
</div>
</body>
<!-- InstanceEnd --></html>

DanA

Elder

Posts: 1069
Joined: 2004-08-14

You should remove the

Posted: Fri, 2008-05-09 07:30

You should remove the conditional comments from the css file.
in your html, replace if lte IE 7 by if lt IE 7
then fix thing with a:active if necessary for ie 7

chrisJR

newbie

Posts: 3
Joined: 2008-05-09

Thanks for the reply, still not working

Posted: Fri, 2008-05-09 12:25

Thank you for the prompt reply. I have been messing with the CSS mainly for about 3 days and looked at many sites with IE7 solutions. Even when I remove the code for the menubar and keep the menuwrapper with the repeating background it still gives the same problem.

I also tried putting the URL link to the background in exclamination marks. I am about to hit the Advil as this is driving my brain to pain. This is also my first true CSS website, so I guess no pain no gain.

I took your suggestion and made these changes.
HTML File-

<!--[if lt IE 7]>
<style>
#menuwrapper, #menubar ul a {height: 1%;}
</style>
<![endif]-->

In the CSS I did not find any conditional comments to remove. Was there something you saw?
Appreciate your efforts.

DanA

Elder

Posts: 1069
Joined: 2004-08-14

I still can see conditional

Posted: Fri, 2008-05-09 19:31

I still can see conditional comments in the end of default.css

I still can see height:1%; in #menuwrapper

chrisJR

newbie

Posts: 3
Joined: 2008-05-09

Solved the background problem, but now position problem

Posted: Sat, 2008-05-10 01:03

Hi,

I removed all the conditional comments (i hope) from all the CSS files and HTML files and it solved the problem with the background image appearing behind the navigation menu.

Now the menu has shifted right almost centered on all pages when displayed in IE7 and IE7. Its fine in IE8 and FF for windows. Do not understand the cause for the shift. Is there a problem with IE6 and IE7 and relative positioning?

http://nirvanahospice.com/staff.html

Thanks for the help

DanA

Elder

Posts: 1069
Joined: 2004-08-14

Try text-align:left; in

Posted: Sat, 2008-05-10 09:31

Try
text-align:left; in #masthead
The problem comes from centering using quirks mode and hacks.