Differences between firefox and IE on layout...

[kolbyk]

Hello. First off I am a newbie so I greatly apologize if I am looking over something here. My site http://www.drurysga.com/cmsmadesimple/ has a top image of 700px wide. In firefox the content and everything looks great. The page and image all blend together. However, in IE the content below the image stretches out further then 770px. Any ideas on what might be causing this? My current layout stylesheet is included.





/* 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;
    }
    div#pagewrapper {
        margin: 0 auto;
        max-width: 770px;
        min-width: 770px;
        padding: 0;
        text-align: center;
    }
    #container {
position: relative;
margin: 0;
    }
   
    /* HEADER */
        div#header {
            margin: 0;
            padding: 0;
            height: 421px;
            width: 770px;
            background: #acacac;         
            text-align: center;
        }
        div#header h1 a {
            background:  url(http://drurysga.com/cmsmadesimple/uploa ... _banne.jpg) no-repeat 0 0px;
            display: block;
            height: 421px;
            text-indent: -700em;
            width: 770px;
            margin: 0;
            padding: 0;
            text-decoration:none;
        }
    /* 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;
  border-bottom: 1px dotted #000;
}

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

[kolbyk]

Any ideas?

[Dr.CSS]

Yep...

First set just the width in the pagewrapper take out the min/max..

    div#pagewrapper {
        margin: 0 auto;
        width: 770px;
        padding: 0;
        text-align: center;
    }

Then in your template there is a reference to the IE javascript it says...  just delete it, it's for sites that have a flexible size...

{literal}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}

[kolbyk]

Okay, so that fixed my layout problem! My next questions however is why is my top image (the building with sga logo) flashing when moused over in IE? I see it links to the homepage, but why the flash?

[kolbyk]

If I remove the link could this fix the problem?

[Dr.CSS]

Try this... IE is looking for an image on hover?

        div#header h1  {
            background:  url(http://drurysga.com/cmsmadesimple/uploa ... _banne.jpg) no-repeat 0 0px;
            display: block;
            height: 421px;
            text-indent: -700em;
            width: 770px;
            margin: 0;
            padding: 0;
            text-decoration:none;
        }
        div#header h1 a {
           
            display: block;
            height: 421px;
            text-indent: -700em;
            width: 770px;
            margin: 0;
            padding: 0;
            text-decoration:none;
        }