[FIXED] IE7 Breaks Another Site

[thestormdragon]

Hi All

Have just found out the IE7 has broken my website (www.samfordvalleytheatre.org)

I've just upgraded to the latest version of CMS Made Simple (as of today) and that made no difference.

It uses the "CSSMenu Horiz 1 col" template (see end of post for copy) with a stylesheet (also see end)

Basically, there's a picture of our logo at the top of the page below which is supposed to be the navigation bar - it was with IE6 but IE7 has the bar halfway through the picture which means you can't click the menus. (I've attached some screenshots)

Can anyone please help a non-designer/coder fix this?

Many thanks in advance

David



********************************************************************************************

===================
CSSMenu Horiz 1 Col Template
===================






Welcome to the Samford Valley Theatre Group

{metadata}
{stylesheet}


{global_content name='JavaScript for IE page width'}













   
   

   
   


     
     
         Navigation
         
         {cms_module module='menumanager' template='cssmenu-accessible.tpl'}   
         
     
     

 

   
   

     
     

         {title}
         {content}


     
     
 


   
   


   
   
      {global_content name='footer'}
   
   










********************************************************************************************

===========
Active Stylesheet
===========
/* CSS Document */
.frame{
margin: 0;
}
.panel{
width: 760px;
margin: 0px;
padding: 0px;
clear:both;
}
.panelB{
width: 760px;
height: 300px;
margin: 0px;
padding: 0px;
clear:both;
background: #48535E;
}
.floatLeft{
float: left;
}
.floatRight{
float: right;
}
.content{
width:700px;
float: left;
margin: 0 10 10 10px;
padding:0px;
}
.announcement{
border: 1px solid #CCCCCC;
float: right;
width: 400px;
padding: 5px;
}
.calendar1{
border: 1px solid #CCCCCC;
float: left;
width: 500px;
padding: 5px;
}.calendar2{
border: 1px solid #CCCCCC;
float: right;
width: 500px;
padding: 5px;
}
.footer{
padding: 0 0 2 5px;
color: #4F7AA5;
}
#nav{
width: 760px;
    background: #48535E;
padding:2 0 0 0px;
margin: 0px;
height: 25px;
}
#nav ul {
padding: 0 0 0 0;
margin: 0px;
    height: 25px;
font: 11px Arial, Helvetica, sans-serif;
}
#nav ul li {
list-style: none;
display: inline;
padding: 0px;
margin: 2 -2 0 -2;
border: 0px;
}
#nav ul li a {

border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
padding: 0 6 0 6;
margin: 0px;
height: 30px;
border-bottom: 0px;
background: #48535E;
text-decoration: none;
font-weight: bold;
color: #FFFFFF;
}
#nav ul li ahover {
background: #4F7AA5;
}
#nav ul li a#current {
background: #4F7AA5;
}

/*

******** MAIN SELECTOR TAGS


*/

body{
padding:0px;
margin:0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
}
p,td{
margin: 0px 0px 8px 0px;
padding: 0px;
}
h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #FFFFFF;
padding: 20 0 0 0px;
margin: 0px;
font-weight: normal;
text-transform: none;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFFFFF;
padding: 0px;
margin: 5 0 10 0;
text-transform: none;
}
h3,h4,h5{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
padding: 0px;
margin: 5 0 5 0;
text-transform: none;
}
h6{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
padding: 0px;
margin: 0 0 5 0;
text-transform: none;
}
ul{
padding: 0px;
margin: 5 0 0 25;
}
ol{
padding: 0px;
margin: 5 0 0 30;
}
hr{
width: 97%;
float: left;
}
strong{
color: #000000;
}
a {
font-family: Arial,Verdana, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
color: #99CCFF;
}
a:link {
color: #99CCFF;
text-decoration: none;
}
a:visited {
color: #99CCFF;
text-decoration: none;
}
a:active {
color: #99CCFF;
text-decoration: none;
}
a:hover {
color: #99CCFF;
text-decoration: underline;
}
a img{
border: 0px;
}
input{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
width: 100px;
border: 0px;
height: 16px;
padding: 0px;
margin: 0px;
border: 1px solid #CCCCCC;
vertical-align: top;
}
input.lge{
width: 140px;
}
input.sml{
width: 70px;
}
textarea{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
width: 180px;
border: 0px;
height: 60px;
padding: 0px;
margin: 0px;
border: 1px solid #CCCCCC;
}
input.checkBox{
margin-right: 3px;
float: left;
width: 14px;
height: 14px;
}
input.button {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
color: #333333;
width: 60px;
height:16px;
background-color: #FFFFFF;
border: 1px solid #FF6600;
margin: 0px;
padding: 0px;
}
select{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
border: 0px;
height: 16px;
padding: 0px;
margin: 0px;
background: #F7A300;
border: 1px solid #CCCCCC;
}

[gelöscht durch Administrator]

[javathunderbird]

Hi,
  Just browsed your site.
  If CSS really bugs you, try using table instead.
  The good thing about CMS Made Simple is you can use CSS layout or Table-based Layout.
  A reasonable use of table will have a cross-browser look of your website.
  You might want to go into the menu template of the menu module and tweak it a little.

With my  best,
Jim

[Nullig]

Just change your header and footer as follows:

Code: Select all

div#header {
    margin: 0;
    padding: 0;
    height: 107px;
    background: #385C72;           
    text-align: left;
    background: #385C72;           
    text-align: left;
}

div#footer p {
    font-size: 0.8em;
    margin: 0;
    padding: 2px;
    text-align: center;
}

Nullig

[thestormdragon]

Dear All

Thanks for the quick response - I went with Nulligs' solution (less work) and everything is just great now.

Many thanks

David