6 Replies Latest reply on Jun 1, 2010 9:54 AM by Nancy OShea

    Content floating on banner in IE 7.0. How do i fix this?

    jrcolton44-ceUbsz

      Hello, I'm fairly new to web design.

       

      My home page is appearing great in all browsers except IE 7.0.  How do i fix this?

       

      www.oatherapychicago.com

       

      As you can see, in IE 7.0 the content floats on top of the banner.  Ideas on how to fix it without affecting the formatting in other browsers?

        • 1. Re: Content floating on banner in IE 7.0. How do i fix this?
          Nancy OShea Adobe Community Professional & MVP

          The home page looks the same to me in IE6, 7, 8 and Firefox 3.6.

          What do you see that's different?

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists
          http://alt-web.com/
          http://twitter.com/altweb
          http://alt-web.blogspot.com

          • 2. Re: Content floating on banner in IE 7.0. How do i fix this?
            jrcolton44-ceUbsz Level 1

            screen-shot-index.jpg

             

            See how the gray background of the content area is floating up into the white background?  I would prefer that it didn't do that and I'm curious why it's only displaying that way with IE7.  Anyone know the quickest fix?

            • 3. Re: Content floating on banner in IE 7.0. How do i fix this?
              Nancy OShea Adobe Community Professional & MVP

              OK, I see what you mean, now

              Add an IE7 Conditional Comment between your <head> and </head> tags.  Tweak the margin-top as req'rd.

               

              <!--[if IE7]>
              <style type="text/css">

              #Container #ShadowMC {margin-top: 45px}

              </style>
              <![endif]-->

               

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists
              http://alt-web.com/
              http://twitter.com/altweb
              http://alt-web.blogspot.com

              • 4. Re: Content floating on banner in IE 7.0. How do i fix this?
                jrcolton44-ceUbsz Level 1

                Hey Nancy,

                 

                Thanks for your help thus far.  I tried copy/pasting the code you gave between the head tags.  Nothing changed.  I noticed the code that I copy/pasted is gray.  Does that have something to do with it?  If so, how do I fix it?  (I actually tried experimenting a little bit, but I was unsuccessful). 

                 

                Thanks,

                 

                Jake

                • 5. Re: Content floating on banner in IE 7.0. How do i fix this?
                  Nancy OShea Adobe Community Professional & MVP

                  Try this:

                   

                  <!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">
                  <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                  <title>Mental, emotional, and spiritual health therapy. Chicago psychotherapists.</title>
                  <link rel="shortcut icon" href="images/favicon.ico"  />
                  <meta name="keywords" content="Spiritual health, emotional health, Open Avenue psychotherapy" />
                  <meta name="description" content="Chicago Therapists Specializing in Addiction Therapy, Couples Counseling, Drug and Alcohol Treatment, Depression, Anxiety, and other Mental & Spiritual Health Issues." />
                  <style type="text/css">
                  body {
                       background-color: #666;
                       margin: 0px;
                       padding: 0px;
                  }
                  #Container {
                       background-image: url(Design%20Tools/White-Rounded.png);
                       height: 600px;
                       width: 950px;
                       text-align: center;
                       margin-top: 0px;
                       margin-right: auto;
                       margin-bottom: 0px;
                       margin-left: auto;
                       background-repeat: no-repeat;
                       padding-top: 30px;
                       padding-right: 0px;
                       padding-bottom: 30px;
                       padding-left: 0px;
                  }
                  #Container #Content p a {
                       text-decoration: none;
                  }
                  #Container #TopNav {
                       padding-top: 10px;
                  }
                  #Container #TopNav ul {
                       list-style-type: none;
                       margin: 0px;
                       padding: 0px;
                  }
                  #Container #TopNav ul li {
                       display: inline;
                       border-right-width: 1px;
                       border-right-style: solid;
                       border-right-color: #333;
                  }
                  #Container #TopNav ul li a {
                       color: #333;
                       text-decoration: none;
                       padding-right: 10px;
                       text-align: center;
                       padding-left: 10px;
                       font-family: Verdana, Geneva, sans-serif;
                       font-size: 14px;
                  }
                  #Container #TopNav ul li a:hover {
                       color: #CCC;
                  }
                  #Container #TopNav ul li.last {
                       border-top-style: none;
                       border-right-style: none;
                       border-bottom-style: none;
                       border-left-style: none;
                  }
                  #Container #Navigation {
                       text-align: center;
                       margin: 0px;
                       padding: 0px;
                  }
                  #Container #Navigation ul {
                       list-style-type: none;
                       margin: 0px;
                       padding: 0px;
                  }
                  #Container #Navigation ul li {
                       display: inline;
                       border-right-width: 1px;
                       border-top-style: none;
                       border-right-style: solid;
                       border-bottom-style: none;
                       border-left-style: none;
                       border-top-color: #333;
                       border-right-color: #333;
                       border-bottom-color: #333;
                       border-left-color: #333;
                  }
                  #Container #Navigation ul li a {
                       text-decoration: none;
                       padding-right: 10px;
                       color: #333;
                       padding-left: 10px;
                       width: 100px;
                       border: 0px none #FFF;
                       font-family: Verdana, Geneva, sans-serif;
                       font-size: 12px;
                  }
                  #Container #Navigation ul li a:hover {
                       color: #CCC;
                  }
                  #Container #Navigation ul li.last {
                       border-top-style: none;
                       border-right-style: none;
                       border-bottom-style: none;
                       border-left-style: none;
                  }
                  #Container #Navigation h1 {
                       color: #333;
                       font-size: 14px;
                  }
                  #Container #Navigation p {
                       font-size: 12px;
                       color: #333;
                  }
                  #Container #ShadowMC {
                       padding: 0px;
                       width: 840px;
                       margin-top: 30px;
                       margin-right: auto;
                       margin-bottom: 0px;
                       margin-left: auto;
                       background-image: url(Design%20Tools/drop-shadow-840.jpg);
                  }
                  #Container #MainContent {
                       padding: 0px;
                       width: 800px;
                       margin-top: 0px;
                       margin-right: auto;
                       margin-bottom: 0px;
                       margin-left: auto;
                       background-image: none;
                       color: #FFF;
                  }
                  #Container #ShadowMC #MainContent h1 {
                       font-size: 22px;
                       color: #DBE9F5;
                  }
                  #Container #ShadowMC #MainContent h2 {
                       font-size: 20px;
                       color: #DBE9F5;
                  }
                  #Container #ShadowMC #MainContent h3 {
                       font-size: 22px;
                       color: #DBE9F5;
                  }
                  .fntshrnk {
                       font-family: Verdana, Geneva, sans-serif;
                       font-size: 18px;
                       color: #000;
                  }
                  .fntsmall {
                       font-family: Verdana, Geneva, sans-serif;
                       font-size: 10px;
                       color: #FFF;
                  }
                  .fntlrg {
                       font-size: 16px;
                       color: #FFF;
                  }
                  .noborder {
                       border-top-style: none;
                       border-right-style: none;
                       border-bottom-style: none;
                       border-left-style: none;
                  }
                  #Container #Content {
                       text-align: center;
                       padding: 0px;
                       height: 515px;
                       width: 800px;
                       margin-top: 0px;
                       margin-right: auto;
                       margin-bottom: 0px;
                       margin-left: auto;
                  }
                  </style>
                  
                  <!--[if IE7]>
                  <style type="text/css">
                  #Container #ShadowMC {margin-top: 45px}
                  </style>
                  <![endif]-->
                  
                  </head>
                  <body>
                  <div id="Container">
                  <div id="Content">
                  
                  <p><img src="images/Open-Avenue.jpg" width="704" height="529" alt="Open Avenue Therapy Chicago" /></p>
                  </div>
                  <div id="TopNav">
                  <ul>
                  <li><a href="index.html">Home</a></li>
                  <li><a href="Main/therapy-services-mental-health-addiction.html">OA Services</a></li>
                  <li><a href="Main/therapy-chicago-about.html">About</a></li>
                  
                  <li><a href="Main/therapy-chicago-therapist.html">OA Therapists</a></li>
                  <li class="last"><a href="Main/therapy-chicago-contact.html">Contact</a></li>
                  </ul>
                  </div>
                  <div id="Navigation">
                  <ul>
                  <li><a href="Main/MainSub/therapy-chicago-articles.html">Articles</a></li>
                  
                  <li><a href="Main/MainSub/therapy-chicago-videos.html">Videos</a></li>
                  <li><a href="Main/MainSub/therapy-chicago-blog.html">OA Blog</a></li>
                  <li><a href="Main/MainSub/therapy-chicago-workshops-trainings.html">Workshops </a></li>
                  <li><a href="Main/MainSub/therapy-chicago-partners.html">Partners</a></li>
                  <li><a href="Main/MainSub/therapy-chicago-art-therapy.html">Art Therapy</a></li>
                  <li class="last"><a href="Main/MainSub/therapy-chicago-rehab.html">Rehab</a>  </li>
                  
                  </ul>
                  </div>
                  <div id="ShadowMC">
                  <div id="MainContent">
                  <h2><br />
                  Specializing in Mental, Emotional, and Spiritual Health...</h2>
                  <p>Open Avenue is a group of Chicago psychotherapists that specialize in relationship counseling, addiction therapy, and other mental, emotional, and spiritual health services.      </p>
                  <p>On our site we have links to mental and spiritual health articles, inpatient drug and alcohol treatment locations, relationship and emotional health workshops, professional trainings, and other resources geared towards enhancing the mental, emotional, and spiritual health of couples, families, and individuals.</p>
                  
                  <h1>Therapy and Mental Health</h1>
                  <p>How often do you get to openly express your thoughts in a safe environment without the fear of judgment from others?  Therapy provides the context in which a person can comfortably “think out loud,” test out words and ideas, and “bounce ideas off” of professionals trained to listen and provide guidance. <br />
                  <br />
                  Intrusive and blocked thoughts and cognitions can creep into the unconscious mind and negatively impact mental health.  Our minds are complex holding tanks for rich information and our thoughts need ample attention and release to gain and maintain mental fitness.  <br />
                  </p>
                  
                  <h3>Therapy and Emotional Health</h3>
                  <p>
                  Society punishes people for expressing emotion publically.  Think of the coworker crying while on the job.  The child yelling angrily in a store.  Or even the unrestrained expression of joy within the proximity of other people.  <br />
                  There are usually no formal consequences for emotional expression, but the social consequences have lasting impacts on an individual’s health and can lead a person to develop wild mood swings, anger explosions, or a flat affect in which a person feels numb <span class="fntsmall">(Note: emotional health is defined subjectively and while many seek to maximize happiness, emotional health encourages the occasional crying spell, emotional health allows for safe releases of anger and frustration, which is to acknowledge emotional health is complex. Emotional health starts with behavior and thought, emotional health is highly integrated with spiritual health, emotional health is key in relationship connection, emotional health is often misunderstood, emotional health takes longer to shift than maladaptive cognitions, emotional health is about freedom to express authentic emotional energy while maintaining emotional control).</span><br />
                  
                  </p>
                  <h3>Therapy and Spiritual Health<br />
                  </h3>
                  <p>
                  Many people come to us for therapy because of the “void” that they are feeling.  The bad news – No one thing will fill this void for every person.  However, the good news is that everyone is intrinsically wired to live a life full of meaning and purpose.  <br />
                  In this fast paced and competitive world it’s easy to veer off track of your true destiny and/or lose sight of the big picture.  Therapy takes a delicate, yet deep look at your spiritual self to find the buried gems that are waiting to be discovered, fortified, and integrated <span class="fntsmall">(Note: some affiliate spiritual health exclusively with religion, and we welcome those that seek to nurture their spiritual health through a structured religious community. However, as defined here, spiritual health is not bound by religion, spiritual health is not limited to one particular value system, spiritual health is not obtained through blind compliance to dogma. Spiritual health is authentic soul searching, spiritual health is peace and energy, spiritual health is found in solitude and in meaningful relationships).</span><br />
                  </p>
                  <p><br />
                  <span class="fntlrg">Therapy conducted by trained counselors and mental health professionals is worth the time, money, and energy invested and will result in mental health that is in balance and harmony, emotional health that is controlled and enjoyed, and spiritual health that infuses purpose and direction into a person’s relationships and important life decisions.</span></p>
                  <p> </p>
                  <p> </p>
                  <p> </p>
                  </div>
                  </div>
                  </div>
                  </body>
                  </html>
                  
                  

                   

                  It would be good if you put your CSS code into a single external file to which your HTML docs are linked. Much simpler to manage one stylesheet.

                  http://alt-web.com/DEMOS/DW-Link-Stylesheet.shtml

                   

                  Nancy O.
                  Alt-Web Design & Publishing
                  Web | Graphics | Print | Media  Specialists
                  http://alt-web.com/
                  http://twitter.com/altweb
                  http://alt-web.blogspot.com

                  • 6. Re: Content floating on banner in IE 7.0. How do i fix this?
                    Nancy OShea Adobe Community Professional & MVP

                    Deleted.

                     

                    Message was edited by: Nancy O.   Ooops.  Posted to wrong discussion.  Sorry 'bout that.