html - Zoom error DOES NOT in occur in Internet Explorer, but DOES occur in every other browser I’ve tested -

while checking on else on college’s website, noticed zooming in , out of our website’s pages makes small gap appear between header , main content on zoom levels. test ie compatibility since that’s majority of our visitors use, , when zoom in , out in ie 9, gap never appears. in current versions of firefox, chrome, safari, , opera, same “moving ” error occurs. it’s not bad bug, doesn’t affect readability of site severely, it’s i’d eliminate if possible.

what i’ve tried already:

• making appears moving, “content”, fixed width
• giving “content” fixed position giving inside “content”, “canvas”, fixed position
• changing z-indexes on “content” , “canvas” each
• not setting position header
• removing of class “clear” between s “ct100_header” , “content” (it makes error more extreme)

the site: www.swic.edu

"sw_home.css"

/*============================================================*/ /*==================== left column ==========*/  /*==================================================*/ /*========== ads ==========*/  .ad-content {     text-align: center;     margin: 20px 0;     padding: 0; }  .ad-content p {     text-align:right;        padding-right:15px;     margin-top: -4px; }  .ad-content img {     padding: 5px;     background: #fff;     border: 1px solid #417ec1; /* light blue */     width: 180px; }  .ad-content img:hover, .ad_content img:active {     border: 1px solid #c2b535; /* light yellow */ }  /*//////////////////// ads //////////*/  /*////////// ads //////////*/ /*//////////////////////////////////////////////////*/  /*///////////////////// left column //////////*/ /*////////////////////////////////////////////////////////////*/  /*============================================================*/ /*==================== main column ==========*/  /*==================================================*/ /*========== top row ==========*/  /*////////// top row //////////*/ /*//////////////////////////////////////////////////*/  /*==================================================*/ /*========== announcements ==========*/  .announcements-wrapper {     margin-top: -4px;     position: relative;     z-index: 1; }  .announcements-wrapper .announcement {  }  .announcements-wrapper .announcement-last {     margin-bottom: 16px; }  .announcements-wrapper h2 {     font-size: 18px;     border-width: 0px 0px 1px 0px;     border-color: #888;     border-style: solid;     color: #771425;  }  .announcements-wrapper p {  }  .announcements-wrapper .multicol ul {     margin-bottom: 0px!important; }  .announcement-wrapper img {  }   /*========================================*/ /*===== count down timer =====*/  .countdown-box { /* --comment out-- display; --uncomment-- hide*/      /*display:none; visibility:hidden;*/      width: 100%;     border: 1px solid #888;     margin-bottom: 20px;     text-align: center;     -webkit-border-radius: 4px;     -moz-border-radius: 4px;     border-radius: 4px;     behavior: url(/packages/pie/pie_uncompressed.htc); }  .countdown-box {     color: #417ec1; /* light blue */     text-decoration: none;     font-weight: 700;     font-size: 12px; }  .countdown-box .en-event-date {     font-size: 16px !important;     font-weight: 700; }  .countdown-box a:visited {     color: #417ec1; /* light blue */     text-decoration: none; }  .countdown-box a:hover {     color: #b5a933; /* triad yellow; */ }  .countdown-box a:active {     color: #b5a933; /* triad yellow; */ }    /* might need implementing in future */  /*////////// announcements //////////*/ /*//////////////////////////////////////////////////*/  /*==================================================*/ /*========== bottom row ==========*/  /*========================================*/ /*===== widgets =====*/  .widget {     padding: 3px;     border: 1px solid #888;       -moz-border-radius-topleft: 4px;     -webkit-border-top-left-radius: 4px;     -khtml-border-top-left-radius: 4px;     border-top-left-radius: 4px;     border-radius: 4px;     position: relative;     behavior: url(/packages/pie/pie_uncompressed.htc);  }  /*===== pollbox =====*/  .widget.poll p {     border: 1px solid #888;       -moz-border-radius-topleft: 4px;     -webkit-border-top-left-radius: 4px;     -khtml-border-top-left-radius: 4px;     border-top-left-radius: 4px;     border-radius: 4px;     position: relative;     behavior: url(/packages/pie/pie_uncompressed.htc);      background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;     line-height: 30px;     font-size: 12px;        color: #193c69; /* dark blue */      text-align: center; }  .widget.poll ol {     margin-bottom: 20px;     left: 0; }     .widget.poll ol li {         font-size: 11px;         line-height: 15px;     } .widget.poll input[type=submit] {     /*margin: 0 0 20px 50px;*/ }   /*===== ektrons reportchart.css overrides  =====*/  /* /punch ektron in face */ .widget.poll table.tblreport * {     margin: 0;     padding: 0;     border: 0;     vertical-align: baseline;     color: #222;       font-family: verdana, sans-serif;     line-height:20px;     font-size: 12px;         font-weight: normal; }  .widget.poll table.tblreport {     border-width: 0; }  .widget.poll table.tblreport .headreport {     padding: 0px 3px;     border: 1px solid #888;       background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;     font-size: 12px;     height: 30px;     color: #193c69; /* dark blue */      vertical-align: middle;     text-align: center; }  .widget.poll table.tblreport td {    padding: 0 10px;  }  .widget.poll table.tblreport .resultbar {     background: #005daa; /* swic blue; */  }  .widget.poll span.refreshlink {     margin: 10px 0;        display: block; }  .widget.poll a.refreshlink {    color:  #417ec1!important; /* light blue */    line-height:20px;    font-size: 12px;     float: right;    margin: -30px 0 0 0; }  .widget.poll a.refreshlink:hover {     color: #b5a933!important; /* triad yellow; */  }  /*///// widgets /////*/ /*////////////////////////////////////////*/  /*////////// bottom row //////////*/ /*//////////////////////////////////////////////////*/  /*///////////////////// main column //////////*/ /*////////////////////////////////////////////////////////////*/   /*============================================================*/ /*==================== footer changes ==========*/  .footer p {     font-size: 10px; }  /*///////////////////// footer changes //////////*/ /*////////////////////////////////////////////////////////////*/ 

"sw_layout.css"

/*////////////////////////////////////////////////////////////*/  /*============================================================*/ /*==================== header layout ==========*/  .header {     height: 140px;     position: relative;     z-index: 3; }  /* because if use css3 gradient on header, causes z-index issues menu because relatively positioned object */ .header-bg-wrapper-1 {     width: 100%;     height: 100%;     background: #193c69;     background: -moz-linear-gradient(top, #193c69 0%, #005daa 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#193c69), color-stop(100%,#005daa));     background: -webkit-linear-gradient(top, #193c69 0%,#005daa 100%);     background: -o-linear-gradient(top, #193c69 0%,#005daa 100%);     background: -ms-linear-gradient(top, #193c69 0%,#005daa 100%);     background: linear-gradient(to bottom, #193c69 0%,#005daa 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#193c69', endcolorstr='#005daa',gradienttype=0 ); }  .header p {     color: #fff;     margin: 0;     padding: 0; }  /*==================== header row layout ==========*/ .header .row-1 {     width: 100%;     height: 100px; }  .header .row-2 {     width: 100%;     height: 40px; }  /*==================== header row 1 content ==========*/ .header .swic-logo {     background-color: #fff;     margin: 10px auto;     padding: 2px 0px 5px 5px;     text-align: center;     width: 170px; }      .header .swic-logo img {         position: relative;     }  .header h1 {     font-size: 30px;     line-height: 75px;     font-family: arial;     color: #fff;     margin: 10px 0px 0px -20px;     padding: 0px; }  .header .header-links-wrapper {     float: right; }      .header .header-links-wrapper {         font-size: 14px;         color: #fff;     }          .header .header-links-wrapper a:hover, .header .header-links-wrapper a:active {             color: #ddb042;         }  .header .header-icons-wrapper {     float: right;     margin-top: 35px; }  /*==================== header row 2 content ==========*/  /* main menu */  .main-menu {     width: 100%;     height: 40px;     font-family: arial; }  .main-menu-bg-middle {     background: #111;     width: 100%;     position: absolute;     top: 100px;     left: 0;     height: 40px;     filter: alpha(opacity=85);     -moz-opacity: 0.85;     -khtml-opacity: 0.85;     opacity: 0.85; }  /* search box */ .header .search-wrapper {     position: relative;     height: 38px;     text-align: center; }      .header .search-wrapper .search-box {         width: 150px;         height: 26px !important;         font-size: 15px;         line-height: 26px;         position: absolute;         right: 40px;         top: 1px;         padding: 0 5px;         margin: 5px 0 0 0;         background: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif) #ffffff no-repeat left 50%;         border: 1px solid #bccdf0;         border-collapse: collapse;     }          .header .search-wrapper .search-box:focus {             background: #fff;         }      .header .search-wrapper .search-button {         position: absolute;         top: 0;         right: 0;         margin: 0;         padding: 0;         width: 40px;         height: 40px;         border: none;         background: transparent;         background-image: url('/images/layout/paw-button-angled-up.png');         background-repeat: no-repeat;     }          .header .search-wrapper .search-button:hover, .header .search-wrapper .search-button:focus {             background-image: url('/images/layout/paw-button-angled-down.png');             outline: none;         }          .header .search-wrapper .search-button:active {             background-image: url('/images/layout/paw-button-angled-down.png');             outline: none;         }  /*==================== superfish menu styles ==========*/  .sf-menu {     margin: 0; padding: 0; } .sf-menu {     padding: 10px 16px;     text-decoration:none; } .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector ie6 applies text colour*/     color:          #fff; }  .sf-menu li li {     padding: 7px 10px; }  .sf-menu li {     font-size: 17px;     line-height: 20px;     font-weight: bold;     margin: 0!important; padding: 0!important; }  .sf-menu li ul{     margin-top: -3px;     background:     #444; /* fixes ie7 background not behind li border problem */     width: 12em; }  .sf-menu li li {     background:     #444;     font-size: 15px;     font-weight: normal;     border-bottom: 1px dotted #555; } .sf-menu li li li {     background:     #555; } .sf-menu li:hover, .sf-menu li.sfhover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {     background:     #888;     color: #b71f38; /* triad red; */     text-decoration: none;     outline:        0; }  /*//////////////////// header layout ==========*/ /*////////////////////////////////////////////////////////////*/  /*============================================================*/ /*==================== content layout ==========*/  /*==================== wrappers ==========*/  .content {     position: relative;     z-index: 2;     width: 100%;     height: 100%; }  .canvas {     width: 960px;     position: relative;     margin: 0 auto;     padding: 16px 0; }  /*==================== content title ==========*/  .content-header-wrapper {     position: relative;     display: block;     width: 100%;     margin-bottom: 16px; }  .breadcrumbs-wrapper {     float: left;     width: 84%;     height: 20px;     font-size: 10px;     margin-bottom: 4px;     overflow: hidden; /* want truncate long breadcrumbs */ }  .email-print-wrapper {     width: 16%;     float: right;     text-align: right;     margin-bottom: 4px; }  .page-title-wrapper {     clear: both;     border-bottom: 3px double #777; }  .page-title-wrapper h1 {     margin: 1px; /* fixes corner redraw glitches pop sparatically in broswers scoll, ect */     padding: 4px 4px 4px 4px; }  /*==================== side menu ==========*/  .side-menu-box {     border: none;     background: none;     padding: 0 5px; }  .side-menu-box h2 {     background: none;     padding: 0 5px;     color: #771425; /* medium red */     line-height:29px;     border-bottom: 1px solid #888;     margin-bottom: 10px;     font-size: 14px; }  .side-menu-box ul {     list-style-type: none;     margin: 0 0 10px 10px!important;     left: 0!important;  } .side-menu-box ul li {     text-decoration: none; } .side-menu-box ul li a:hover {     text-decoration: underline; }  .ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message {     display: none; }  .ekflexmenu_accessible_menu_start {     display: none; }  .side-bar-bg-wrapper{     position: absolute;     top: 0px;     left: 10px;     height: 100%;     width: 220px;     background: #eee;      z-index: -1000; }  .side-bar-bg-left {     position: absolute;     top: 0px;     left: 0px;     width: 110px;     height: 100%;     z-index: -999;     background: #eee;     background: -moz-linear-gradient(left,  rgba(221,221,221,1) 0%, rgba(238,238,238,1) 100%);     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(238,238,238,1)));     background: -webkit-linear-gradient(left,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);     background: -o-linear-gradient(left,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);     background: -ms-linear-gradient(left,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);     background: linear-gradient(left,  rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#dddddd', endcolorstr='#eeeeee',gradienttype=1 ); }  .side-bar-bg-right {     position: absolute;     top: 0px;     left: 120px;     width: 110px;     height: 100%;     z-index: -999;     background: #eee;     background: -moz-linear-gradient(left,  rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%);     background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1)));     background: -webkit-linear-gradient(left,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);     background: -o-linear-gradient(left,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);     background: -ms-linear-gradient(left,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);     background: linear-gradient(left,  rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#eeeeee', endcolorstr='#dddddd',gradienttype=1 ); }  .ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message {     display: none; }  .ekflexmenu_accessible_menu_start {     display: none; }  /*//////////////////// content layout ==========*/ /*////////////////////////////////////////////////////////////*/  /*============================================================*/ /*==================== footer layout ==========*/  .footer {     position: relative;     width: 100%;     background: #005daa;     /*     background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));     background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);     background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);     background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);     background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#005daa', endcolorstr='#193c69',gradienttype=0 );     */ }  .footer-bar-wrapper {     color: #fff;     font-size: 11px;     font-family: arial, sans-serif;     margin: 0;     padding: 0;     width: 100%;     background: #005daa;     background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));     background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);     background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);     background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);     background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#005daa', endcolorstr='#193c69',gradienttype=0 ); }  .footer .footer-bar-wrapper p {     color: #fff;     font-size: 11px;     margin: 10px 0;     padding: 0; }  .footer .footer-links {     color: #fff; }      .footer .footer-links a:hover {         color: #eab73a;     }  .footer .copyright {     text-align: right; }  .footer-campuses-wrapper {     padding-top: 10px;     /*color: #fff;*/     font-size: 11px;      background: rgb(255,255,255);     background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)));     background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);     background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);     background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);     background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#ffffff', endcolorstr='#dddddd',gradienttype=0 ); }      .footer-campuses-wrapper a:link,     .footer-campuses-wrapper a:visited {         color: #417ec1;     }      .footer-campuses-wrapper a:hover,     .footer-campuses-wrapper a:active {         color: #b5a933;     }      .footer-campuses-wrapper .container_12 {         /*         border-right: 2px solid #ddd;         border-left: 2px solid #ddd;         */     }      .footer-campuses-wrapper .campus-inner-wrapper {         position: relative;         height: 100%;         width: 100%;     }      .footer-campuses-wrapper .campuses-divider{         /*         position: absolute;         top: 0px;         right: -10px;         height: 100%;         width: 0px;         border-right: 1px solid #ddd;         border-left: 1px solid #ddd;         */     }      .footer-campuses-wrapper h2,     .footer-campuses-wrapper address {         display: inline;     }      .footer-campuses-wrapper h2 {         font-size: 10px;         font-family: verdana, sans-serif;     }      .footer-campuses-wrapper h2 {         font-size: 10px;     }      .footer-campuses-wrapper address {         font-style: normal;         font-size: 10px;     }      .footer-campuses-wrapper .hlc-logo {         float: right;         height: 80px;         margin-bottom: 10px;     }      .footer-campuses-wrapper .google-map-link {         float: left;         margin-right: 20px;     }      .footer-campuses-wrapper .google-map-link img {         height: 60px;         width: 60px;     }  .footer-bottom-border {     height: 10px;     background: rgb(25,60,105); /* old browsers */     background: -moz-linear-gradient(top, rgba(25,60,105,1) 0%, rgba(0,93,170,1) 100%); /* ff3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,60,105,1)), color-stop(100%,rgba(0,93,170,1))); /* chrome,safari4+ */     background: -webkit-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* chrome10+,safari5.1+ */     background: -o-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* opera 11.10+ */     background: -ms-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* ie10+ */     background: linear-gradient(to bottom, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* w3c */     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#193c69', endcolorstr='#005daa',gradienttype=0 ); /* ie6-9 */ }  /* site toggle button (mobile/desktop) */ .sitetogglebutton{     margin-bottom: 0px;     padding-left: 5px; }  /*//////////////////// footer layout ==========*/ /*////////////////////////////////////////////////////////////*/ 

looks white gap menu items wrapping. text white can't see them doing it.

add style sw_layout.css

.main-menu {     width: 100%;     height: 40px;     font-family: arial;     overflow: hidden; } 

while pointed/repointed in reasonable direction, wrapping of menu items in way considered design limitation, content managers need work within limitations of site's design, or design should change suite needs.

if want, give width: 101%; try.