5 replies [Last post]
chrisJR
Offline
newbie
Last seen: 6 years 31 weeks ago
Joined: 2008-05-09
Posts: 3
Points: 0

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;}

What is Hospice

#menuwrapper, #menubar ul a {height: 1%;}
a:active {width: auto;}

  • Healthcare

  • Donations
  • Contact Us




  • About Us


    What is Hospice Photo?


    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.







    DanA
    DanA's picture
    Offline
    Elder
    Last seen: 4 years 32 weeks ago
    Timezone: GMT+2
    Joined: 2004-08-14
    Posts: 1087
    Points: 2

    You should remove the

    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
    Offline
    newbie
    Last seen: 6 years 31 weeks ago
    Joined: 2008-05-09
    Posts: 3
    Points: 0

    Thanks for the reply, still not working

    Hi

    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-

    #menuwrapper, #menubar ul a {height: 1%;}

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

    DanA
    DanA's picture
    Offline
    Elder
    Last seen: 4 years 32 weeks ago
    Timezone: GMT+2
    Joined: 2004-08-14
    Posts: 1087
    Points: 2

    I still can see conditional

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

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

    chrisJR
    Offline
    newbie
    Last seen: 6 years 31 weeks ago
    Joined: 2008-05-09
    Posts: 3
    Points: 0

    Solved the background problem, but now position problem

    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
    DanA's picture
    Offline
    Elder
    Last seen: 4 years 32 weeks ago
    Timezone: GMT+2
    Joined: 2004-08-14
    Posts: 1087
    Points: 2

    Try text-align:left; in

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