9 Replies Latest reply on Jul 7, 2010 1:24 PM by Nancy OShea

    Huge White Space issue in MSIE

    LitlJack Level 1

      I'm a newbie to using CSS for layout. Long-time table designer and user of CSS for text formatting only. So that may explain why I just can't get this layout of mine to remove the extra white space shown below the menu bar and before the main content in MSIE 7 or 6 or 5 or 4. Site looks fine in Safari and Firefox and decent in MSIE 8. I feel it must have something to do with the settings for the image on the left (passion.gif), but I've tried every combination of float and clearspace and can't get rid of all the extra white space in those browsers. Please help!

       

      File is located at http://www.sureloc.com/faq/CAG_MASTER3column.html and there are 2 style sheets (1 for formatting and 1 for menu bar)

       

      STYLE SHEET 1:

      @charset "ISO-
      8859-1";
      /* CSS Document */
      
      body  {
           padding: 0;
           text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
           color: #000000;
           font-family: "Times New Roman", Times, serif;
           font-size: 85%;
           background-color: #7DB65E;
           background-image: url(../images/layout/bkggradient.jpg);
           background-repeat: repeat-x;
           margin: 0;
      }
      h3 {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 12pt;
           margin-top: 0px;
           margin-bottom: 6px;
      }
      h2 {
           font-family: Arial, Helvetica, sans-serif;
           color: #B03D1E;
           margin-top: 18px;
           margin-bottom: 6px;
           font-size: 16pt;
      }
      h1 {
           margin-top: 0px;
           padding-top: 0px;
           font-family: Arial, Helvetica, sans-serif;
           color: #B03D1E;
           font-size: 24pt;
           font-weight: bold;
           line-height: 20pt;
           text-transform: uppercase;
           margin-bottom: 9px;
      }
      .story2 h1 {
           font-size: 18pt;
      }
      .story h2 {
           margin-left: 210px;
      }
      .storyMorephotos {
           margin-left: -210px;
           float: left;
           overflow: auto;
      }
      .PAGE #container {
           width: 960px;
           text-align: left; /* this overrides the text-align: center on the body element. */
           margin-top: 0;
           margin-right: auto;
           margin-bottom: 0;
           margin-left: auto;
           padding: 0px;
           background-color: #FFFFFF;
           background-image: url(../images/layout/greenwhite.gif);
           background-repeat: repeat-y;
      } 
      .PAGE #header {
           padding: 0;
           height: 275px;
      } 
      .PAGE #header h1 {
           margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
      }
      .PAGE #headerleft{
           float: left;
           width: 40px;
           word-spacing: 1px;
           clear: none;
      }
      .PAGE #headerright{
           float: right;
           width: 920px;
           background-image: url(../images/layout/headerimg.jpg);
           background-repeat: no-repeat;
           background-position: left top;
           height: 277px;
      }
      .PAGE #sidebar1 {
           float: left; /* since this element is floated, a width must be given */
           width: 40px; /* the background color will be displayed for the length of the content in the column, but no further */
           padding: 0px;
           height: auto;
           word-spacing: 1px;
      }
      .PAGE #sidebar2 {
           float: right; /* since this element is floated, a width must be given */
           width: 228px;
      }
      .PAGE #footer {
           background-color: #85615F;
           clear: both;
           padding-top: 0;
           padding-right: 10px;
           padding-bottom: 0;
           padding-left: 20px;
      } 
      #footer table tr th p {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 90%;
           color: #EEE;
           font-weight: normal;
      }
      .PAGE #mainContent {
           margin-top: 0px;
           margin-right: 305px;
           margin-bottom: 0px;
           margin-left: 70px;
           vertical-align: top;
      }
      .story h1 {
           margin-left: 210px;
      }
      .PAGE #footer p {
           padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
           line-height: normal;
           margin-top: 0;
           margin-right: 0;
           margin-bottom: 3px;
           margin-left: 0;
      }
      .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
           float: right;
      }
      .fltlft { /* this class can be used to float an element left in your page */
           float: left;
      }
      .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
           clear:both;
          height:0;
          font-size: 1px;
          line-height: 0px;
      }
      #copyright {
           font-family: Arial, Helvetica, sans-serif;
           color: #EEE;
           font-weight: normal;
           padding-top: 0px;
           padding-right: 0px;
           padding-bottom: 5px;
           padding-left: 0px;
           margin-top: 10px;
           margin-right: 0px;
           margin-bottom: 0px;
           margin-left: 0px;
           font-size: 95%;
      }
      #gototop {
           font-family: Arial, Helvetica, sans-serif;
           font-size: 80%;
           font-weight: normal;
           text-align: right;
           margin-bottom: 6px;
      }
      #addressbox {
           background-color: #FBD575;
           margin-top: 8px;
           margin-bottom: 16px;
           padding: 3px;
           vertical-align: top;
      }
      #webmaster {
           color: #ffffcc;
           padding-top: 20px;
           font-family: Arial, Helvetica, sans-serif;
      }
      #wx_module_9770 a {
           font-family: Arial, Helvetica, sans-serif;
           font-weight: bold;
           color: #f2ec64;
      }
      #address {
           font-family: Arial, Helvetica, sans-serif;
           color: #003304;
           margin-top: 0px;
           margin-bottom: 0px;
           font-weight: normal;
           padding-top: 0px;
           padding-bottom: 0px;
           margin-right: 90px;
           font-size: 10pt;
      }
      #address p {
           margin-top: 0px;
           margin-bottom: 0px;
      }
      #phone {
           font-family: Arial, Helvetica, sans-serif;
           color: #000;
           margin-top: 2px;
           margin-bottom: 0px;
           font-weight: bold;
           font-size: 12pt;
           margin-right: 90px;
      }
      .sidebar2text {
           color: #85615F;
           padding-bottom: 0px;
           margin-bottom: 0px;
           padding-top: 0px;
           margin-top: 0px;
           padding-right: 48px;
      }
      .sidebar2text p {
           margin-top: 0px;
           margin-bottom: 6px;
      }
      #sidebar2 p #photo_rightside {
           margin-top: 16px;
           margin-bottom: 0px;
      }
      .sidebar2directionscolumn {
           float: right; /* since this element is floated, a width must be given */
           width: 90px;
           text-align: center;
           margin-top: -3px;
           padding: 0px;
           vertical-align: top;
      }
      .zerospace p {
           margin-top: 0px;
           margin-bottom: 0px;
      }
      .story {
           overflow: auto;
           padding: 0px;
           vertical-align: top;
           margin-top: 33px;
           margin-right: 0px;
           margin-bottom: 0px;
           margin-left: 0px;
      }
      .story p {
           margin-left: 210px;
      }
      .story1 {     overflow: auto;
           padding: 0px;
           vertical-align: top;
           margin-top: 33px;
           margin-right: 0px;
           margin-bottom: 0px;
           margin-left: 0px;
      }
      .bold {
      }
      #footer table tr th p a {
           color: #EEE;
      }
      .boldbkg {
           font-weight: bold;
           background-color: #7eb75c;
           color: #000;
           padding-top: 1px;
           padding-right: 3px;
           padding-bottom: 0px;
           padding-left: 3px;
      }
       
      [if IE 5]>
      <style type="text/css"> 
      /* place css box model fixes for IE 5* in this conditional comment */
      .PAGE #sidebar1 { width: 180px; }
      </style>
      <![endif][if IE]>
      <style type="text/css"> 
      /* place css fixes for all versions of IE in this conditional comment */
      .PAGE #sidebar2, .PAGE #sidebar1 { padding-top: 30px; }
      .PAGE #mainContent, #address { zoom: 1; }
      /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
      </style>
      <![endif]
      
      
      
      

      STYLE SHEET 2 - SPRY MENU BAR:

       

      @charset "UTF-8";
      
      /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
      
      /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
      
      /*******************************************************************************
      
       LAYOUT INFORMATION: describes box model, positioning, z-order
      
       *******************************************************************************/
      
      /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
      ul.MenuBarHorizontal
      {
           list-style-type: none;
           font-size: 90%;
           cursor: default;
           font-family: Arial, Helvetica, sans-serif;
           position: relative;
           top: 239px;
           width: 920px;
           margin: 0;
           padding: 0;
      }
      /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
      ul.MenuBarActive
      {
           z-index: 1000;
      }
      /* Menu item containers, position children relative to this container and are a fixed width */
      ul.MenuBarHorizontal li
      {
           list-style-type: none;
           font-size: 100%;
           position: relative;
           text-align: left;
           cursor: pointer;
           width: 106px;
           float: left;
           margin-top: 0;
           margin-right: 0;
           margin-bottom: 0;
           margin-left: 8px;
           padding-top: 0px;
           padding-right: 0px;
           padding-bottom: 0px;
           padding-left: 0px;
           display: inline; /* fix for IE6 */
      }
      /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
      ul.MenuBarHorizontal ul
      {
           padding: 0;
           list-style-type: none;
           font-size: 100%;
           z-index: 1020;
           cursor: default;
           width: 146px;
           position: absolute;
           left: -1000em;
           margin-top: 0px;
           margin-right: 0px;
           margin-bottom: 0px;
           margin-left: -8px;
      }
      /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
      ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
      {
           left: auto;
      }
      /* Menu item containers are same fixed width as parent */
      ul.MenuBarHorizontal ul li
      {
           width: 146px;
      }
      /* Submenus should appear slightly overlapping to the (set last number to 95%) and up (set first number to -5%) */
      ul.MenuBarHorizontal ul ul
      {
           position: absolute;
           margin: 0 0 0 97%;
      }
      /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
      ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
      {
           left: auto;
           top: 0;
      }
      ul.MenuBarHorizontal a#one {
           display: block;
           cursor: pointer;
           color: #b33c1b;
           text-decoration: none;
           border-bottom-color: #86615f;
           border-top-width: 0px;
           border-right-width: 0px;
           border-bottom-width: 2px;
           border-left-width: 0px;
           border-top-style: none;
           border-right-style: none;
           border-bottom-style: solid;
           border-left-style: none;
           background-image: url(menubuttons/b_home.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#two.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_golfcourse.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#three.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_facilities.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#four.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_events.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#five.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_instruction.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#six.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_photogallery.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#seven.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_golfcarts.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      ul.MenuBarHorizontal a#eight.MenuBarItemSubmenu {
           background-image: url(menubuttons/b_aboutus.gif);
           background-repeat: no-repeat;
           padding: 0px;
           height: 36px;
      }
      
      /*******************************************************************************
      
       DESIGN INFORMATION: describes color scheme, borders, fonts
      
       *******************************************************************************/
      
      /* Submenu containers have borders on all sides */
      /*ul.MenuBarHorizontal ul
      {
           border: 1px solid #CCC;
      }*/
      /* Menu items are a lime block with padding and no text decoration */
      ul.MenuBarHorizontal a
      {
           display: block;
           cursor: pointer;
           background-color: #cdd00a;
           padding-top: 0.5em;
           padding-right: 0.75em;
           padding-bottom: 0.5em;
           padding-left: 0.75em;
           color: #b33c1b;
           text-decoration: none;
           border-bottom-color: #86615f;
           border-top-width: 0px;
           border-right-width: 0px;
           border-bottom-width: 2px;
           border-left-width: 0px;
           border-top-style: none;
           border-right-style: none;
           border-bottom-style: solid;
           border-left-style: none;
      }
      /* Menu items that have mouse over or focus have a peach background and red text */
      ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
      {
           background-color: #ffd572;
           color: #b33c1b;
      }
      ul.MenuBarHorizontal a#one:hover, ul.MenuBarHorizontal a#one:focus {
           color: #b33c1b;
           background-image: url(menubuttons/b_home_o.gif);
      }
      /* Menu items that are open with submenus are set to MenuBarItemHover with a peach background and red text */
      ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
      {
           background-color: #ffd572;
           color: #b33c1b;
      }
      ul.MenuBarHorizontal a#two.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_golfcourse_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a#three.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_facilities_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a#four.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_events_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a#five.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_instruction_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a#six.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_photogallery_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a#seven.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_golfcarts_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      ul.MenuBarHorizontal a#eight.MenuBarItemSubmenuHover {
           background-image: url(menubuttons/b_aboutus_o.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      
      
      /*******************************************************************************
      
       SUBMENU INDICATION: styles if there is a submenu under a given menu item
      
       *******************************************************************************/
      
      /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
      ul.MenuBarHorizontal a.MenuBarItemSubmenu
      {
           background-image: url(SpryMenuBarDown.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      /* Top Level menu items that have an image as background */
      }
      /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
      ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
      {
           background-image: url(SpryMenuBarRight.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
      ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
      {
           background-image: url(SpryMenuBarDownHover.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
      ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
      {
           background-image: url(SpryMenuBarRightHover.gif);
           background-repeat: no-repeat;
           background-position: 95% 50%;
      }
      
      /*******************************************************************************
      
       BROWSER HACKS: the hacks below should not be changed unless you are an expert
      
       *******************************************************************************/
      
      /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
      ul.MenuBarHorizontal iframe
      {
           position: absolute;
           z-index: 1010;
           filter:alpha(opacity:0.1);
      }
      /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
      @media screen, projection
      {
           ul.MenuBarHorizontal li.MenuBarItemIE
           {
                display: inline;
                f\loat: left;
                background: #FFF;
           }

        • 1. Re: Huge White Space issue in MSIE
          MurraySummers Level 8

          Before trying to troubleshoot any layout problems, make sure your code validates.  Check here -

           

          http://validator.w3.org

           

          Yours has several errors that should be fixed, for example, you have used the same ID twice - that's not allowed.

           

          Murray

          • 2. Re: Huge White Space issue in MSIE
            LitlJack Level 1

            Thanks for the validation site. Will certainly use it!

            However, this post doesn't specifically address my problem with the white space. Can you tell me what I need to change to make Explorer display the site correctly?

            • 3. Re: Huge White Space issue in MSIE
              MurraySummers Level 8

              As I said - as long as there are validation errors on a page, particularly the kind you have, it is a wasted effort to try to debug a layout issue.  Please fix the validation problems first.  Invalid code can cause unpredictable rendering issues.

               

              Murray

              • 4. Re: Huge White Space issue in MSIE
                LitlJack Level 1

                I've removed any issues that the validator said were "errors"--most of those had to do with the Current Weather Ap produced by The Weather Channel, so I simply removed it for the time being. But my initial problem of large amount of white space in my center content column below the Spry Menu, as seen in MS Internet Explorer 4,5,6, and 7, remains. Additionally, I seem to have picked up a float problem in my second headline story, which now doesn't begin below the first story, but rather wraps around the 2nd photo of the first story. Please help!

                 

                I've moved the page in question to a new directory, so here's the link: http://www.sureloc.com/CAG/CAG_MASTER3column.html

                 

                The 2 external style sheets (1 for formatting and 1 for menu bar) are as follows:

                 

                STYLE SHEET 1:

                @charset "ISO-8859-1";

                /* CSS Document */

                 

                body  {

                padding: 0;

                text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

                color: #000000;

                font-family: "Times New Roman", Times, serif;

                font-size: 88%;

                background-color: #7DB65E;

                background-image: url(../images/layout/bkggradient.jpg);

                background-repeat: repeat-x;

                margin: 0;

                }

                h3 {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12pt;

                margin-top: 0px;

                margin-bottom: 6px;

                }

                h2 {

                font-family: Arial, Helvetica, sans-serif;

                color: #B03D1E;

                margin-top: 18px;

                margin-bottom: 6px;

                font-size: 16pt;

                }

                h1 {

                margin-top: 0px;

                padding-top: 0px;

                font-family: Arial, Helvetica, sans-serif;

                color: #B03D1E;

                font-size: 24pt;

                font-weight: bold;

                line-height: 20pt;

                text-transform: uppercase;

                margin-bottom: 9px;

                }

                .story2 h1 {

                font-size: 18pt;

                }

                .story h2 {

                margin-left: 210px;

                }

                .storyMorephotos {

                margin-left: -210px;

                float: left;

                overflow: auto;

                }

                .PAGE #container {

                width: 960px;

                text-align: left; /* this overrides the text-align: center on the body element. */

                margin-top: 0;

                margin-right: auto;

                margin-bottom: 0;

                margin-left: auto;

                padding: 0px;

                background-color: #FFFFFF;

                background-image: url(../images/layout/greenwhite.gif);

                background-repeat: repeat-y;

                }

                .PAGE #header {

                padding: 0;

                height: 275px;

                }

                .PAGE #header h1 {

                margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */

                }

                .PAGE #headerleft{

                float: left;

                width: 40px;

                word-spacing: 1px;

                clear: none;

                }

                .PAGE #headerright{

                float: right;

                width: 920px;

                background-image: url(../images/layout/headerimg.jpg);

                background-repeat: no-repeat;

                background-position: left top;

                height: 277px;

                }

                .PAGE #sidebar1 {

                float: left; /* since this element is floated, a width must be given */

                width: 40px; /* the background color will be displayed for the length of the content in the column, but no further */

                padding: 0px;

                height: auto;

                word-spacing: 1px;

                }

                .PAGE #sidebar2 {

                float: right; /* since this element is floated, a width must be given */

                width: 228px;

                }

                .PAGE #footer {

                background-color: #85615F;

                clear: both;

                padding-top: 0;

                padding-right: 10px;

                padding-bottom: 0;

                padding-left: 20px;

                }

                #footer table tr th p {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 90%;

                color: #EEE;

                font-weight: normal;

                }

                .PAGE #mainContent {

                margin-top: 0px;

                margin-right: 305px;

                margin-bottom: 0px;

                margin-left: 70px;

                vertical-align: top;

                }

                .story h1 {

                margin-left: 210px;

                }

                .PAGE #footer p {

                padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */

                line-height: normal;

                margin-top: 0;

                margin-right: 0;

                margin-bottom: 3px;

                margin-left: 0;

                }

                .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

                float: right;

                }

                .fltlft { /* this class can be used to float an element left in your page */

                float: left;

                }

                .clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */

                clear:both;

                    height:0;

                    font-size: 1px;

                    line-height: 0px;

                }

                #copyright {

                font-family: Arial, Helvetica, sans-serif;

                color: #EEE;

                font-weight: normal;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 5px;

                padding-left: 0px;

                margin-top: 10px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 0px;

                font-size: 95%;

                }

                #gototop {

                font-family: Arial, Helvetica, sans-serif;

                font-size: 80%;

                font-weight: normal;

                text-align: right;

                margin-bottom: 6px;

                }

                #addressbox {

                background-color: #FBD575;

                margin-top: 8px;

                margin-bottom: 16px;

                padding: 3px;

                vertical-align: top;

                }

                #webmaster {

                color: #ffffcc;

                padding-top: 20px;

                font-family: Arial, Helvetica, sans-serif;

                }

                #wx_module_9770 a {

                font-family: Arial, Helvetica, sans-serif;

                font-weight: bold;

                color: #f2ec64;

                }

                #address {

                font-family: Arial, Helvetica, sans-serif;

                color: #003304;

                margin-top: 0px;

                margin-bottom: 0px;

                font-weight: normal;

                padding-top: 0px;

                padding-bottom: 0px;

                margin-right: 90px;

                font-size: 10pt;

                }

                #address p {

                margin-top: 0px;

                margin-bottom: 0px;

                }

                #phone {

                font-family: Arial, Helvetica, sans-serif;

                color: #000;

                margin-top: 2px;

                margin-bottom: 0px;

                font-weight: bold;

                font-size: 12pt;

                margin-right: 90px;

                }

                .sidebar2text {

                color: #85615F;

                padding-bottom: 0px;

                margin-bottom: 0px;

                padding-top: 0px;

                margin-top: 0px;

                padding-right: 48px;

                }

                .sidebar2text p {

                margin-top: 0px;

                margin-bottom: 6px;

                }

                #sidebar2 p #photo_rightside {

                margin-top: 16px;

                margin-bottom: 0px;

                }

                .sidebar2directionscolumn {

                float: right; /* since this element is floated, a width must be given */

                width: 90px;

                text-align: center;

                margin-top: -3px;

                padding: 0px;

                vertical-align: top;

                }

                .zerospace p {

                margin-top: 0px;

                margin-bottom: 0px;

                }

                .story {

                overflow: auto;

                padding: 0px;

                vertical-align: top;

                margin-top: 33px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 0px;

                }

                .story p {

                margin-left: 210px;

                }

                .story1 { overflow: auto;

                padding: 0px;

                vertical-align: top;

                margin-top: 33px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: 0px;

                }

                .bold {

                }

                #footer table tr th p a {

                color: #EEE;

                }

                .boldbkg {

                font-weight: bold;

                background-color: #7eb75c;

                color: #000;

                padding-top: 1px;

                padding-right: 3px;

                padding-bottom: 0px;

                padding-left: 3px;

                }

                 

                [if IE 5]>

                <style type="text/css">

                /* place css box model fixes for IE 5* in this conditional comment */

                .PAGE #sidebar1 { width: 180px; }

                </style>

                <![endif]

                [if IE]>

                <style type="text/css">

                /* place css fixes for all versions of IE in this conditional comment */

                .PAGE #sidebar2, .PAGE #sidebar1 { padding-top: 30px; }

                .PAGE #mainContent, #address { zoom: 1; }

                /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */

                </style>

                <![endif]

                 

                ---------------------------------------------------------------------

                STYLE SHEET 2:

                @charset "UTF-8";

                 

                /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

                 

                /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

                 

                /*******************************************************************************

                 

                LAYOUT INFORMATION: describes box model, positioning, z-order

                 

                *******************************************************************************/

                 

                /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

                ul.MenuBarHorizontal

                {

                list-style-type: none;

                font-size: 90%;

                cursor: default;

                font-family: Arial, Helvetica, sans-serif;

                position: relative;

                top: 239px;

                width: 920px;

                margin: 0;

                padding: 0;

                }

                /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */

                ul.MenuBarActive

                {

                z-index: 1000;

                }

                /* Menu item containers, position children relative to this container and are a fixed width */

                ul.MenuBarHorizontal li

                {

                list-style-type: none;

                font-size: 100%;

                position: relative;

                text-align: left;

                cursor: pointer;

                width: 106px;

                float: left;

                margin-top: 0;

                margin-right: 0;

                margin-bottom: 0;

                margin-left: 8px;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 0px;

                padding-left: 0px;

                display: inline; /* fix for IE6 */

                }

                /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */

                ul.MenuBarHorizontal ul

                {

                padding: 0;

                list-style-type: none;

                font-size: 100%;

                z-index: 1020;

                cursor: default;

                width: 146px;

                position: absolute;

                left: -1000em;

                margin-top: 0px;

                margin-right: 0px;

                margin-bottom: 0px;

                margin-left: -8px;

                }

                /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */

                ul.MenuBarHorizontal ul.MenuBarSubmenuVisible

                {

                left: auto;

                }

                /* Menu item containers are same fixed width as parent */

                ul.MenuBarHorizontal ul li

                {

                width: 146px;

                }

                /* Submenus should appear slightly overlapping to the (set last number to 95%) and up (set first number to -5%) */

                ul.MenuBarHorizontal ul ul

                {

                position: absolute;

                margin: 0 0 0 97%;

                }

                /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */

                ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible

                {

                left: auto;

                top: 0;

                }

                ul.MenuBarHorizontal a#one {

                display: block;

                cursor: pointer;

                color: #b33c1b;

                text-decoration: none;

                border-bottom-color: #86615f;

                border-top-width: 0px;

                border-right-width: 0px;

                border-bottom-width: 2px;

                border-left-width: 0px;

                border-top-style: none;

                border-right-style: none;

                border-bottom-style: solid;

                border-left-style: none;

                background-image: url(menubuttons/b_home.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#two.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_golfcourse.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#three.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_facilities.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#four.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_events.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#five.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_instruction.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#six.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_photogallery.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#seven.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_golfcarts.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                ul.MenuBarHorizontal a#eight.MenuBarItemSubmenu {

                background-image: url(menubuttons/b_aboutus.gif);

                background-repeat: no-repeat;

                padding: 0px;

                height: 36px;

                }

                 

                /*******************************************************************************

                 

                DESIGN INFORMATION: describes color scheme, borders, fonts

                 

                *******************************************************************************/

                 

                /* Submenu containers have borders on all sides */

                /*ul.MenuBarHorizontal ul

                {

                border: 1px solid #CCC;

                }*/

                /* Menu items are a lime block with padding and no text decoration */

                ul.MenuBarHorizontal a

                {

                display: block;

                cursor: pointer;

                background-color: #cdd00a;

                padding-top: 0.5em;

                padding-right: 0.75em;

                padding-bottom: 0.5em;

                padding-left: 0.75em;

                color: #b33c1b;

                text-decoration: none;

                border-bottom-color: #86615f;

                border-top-width: 0px;

                border-right-width: 0px;

                border-bottom-width: 2px;

                border-left-width: 0px;

                border-top-style: none;

                border-right-style: none;

                border-bottom-style: solid;

                border-left-style: none;

                }

                /* Menu items that have mouse over or focus have a peach background and red text */

                ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus

                {

                background-color: #ffd572;

                color: #b33c1b;

                }

                ul.MenuBarHorizontal a#one:hover, ul.MenuBarHorizontal a#one:focus {

                color: #b33c1b;

                background-image: url(menubuttons/b_home_o.gif);

                }

                /* Menu items that are open with submenus are set to MenuBarItemHover with a peach background and red text */

                ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible

                {

                background-color: #ffd572;

                color: #b33c1b;

                }

                ul.MenuBarHorizontal a#two.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_golfcourse_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                ul.MenuBarHorizontal a#three.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_facilities_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                ul.MenuBarHorizontal a#four.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_events_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                ul.MenuBarHorizontal a#five.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_instruction_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                ul.MenuBarHorizontal a#six.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_photogallery_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                ul.MenuBarHorizontal a#seven.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_golfcarts_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                ul.MenuBarHorizontal a#eight.MenuBarItemSubmenuHover {

                background-image: url(menubuttons/b_aboutus_o.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                 

                 

                /*******************************************************************************

                 

                SUBMENU INDICATION: styles if there is a submenu under a given menu item

                 

                *******************************************************************************/

                 

                /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

                ul.MenuBarHorizontal a.MenuBarItemSubmenu

                {

                background-image: url(SpryMenuBarDown.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                /* Top Level menu items that have an image as background */

                }

                /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */

                ul.MenuBarHorizontal ul a.MenuBarItemSubmenu

                {

                background-image: url(SpryMenuBarRight.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

                ul.MenuBarHorizontal a.MenuBarItemSubmenuHover

                {

                background-image: url(SpryMenuBarDownHover.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */

                ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover

                {

                background-image: url(SpryMenuBarRightHover.gif);

                background-repeat: no-repeat;

                background-position: 95% 50%;

                }

                 

                /*******************************************************************************

                 

                BROWSER HACKS: the hacks below should not be changed unless you are an expert

                 

                *******************************************************************************/

                 

                /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */

                ul.MenuBarHorizontal iframe

                {

                position: absolute;

                z-index: 1010;

                filter:alpha(opacity:0.1);

                }

                /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */

                @media screen, projection

                {

                ul.MenuBarHorizontal li.MenuBarItemIE

                {

                display: inline;

                f\loat: left;

                background: #FFF;

                }

                • 5. Re: Huge White Space issue in MSIE
                  Nancy OShea Adobe Community Professional & MVP

                  FYI:  IE4 and 5 are obsolete browsers now.  Page looks the same to me in Firefox and IE8.

                   

                  Look at the IE Conditional Comments below:  You have padding-top: on the sidebars.

                   

                  [if IE 5]>
                  <style type="text/css">
                  /* place css box model fixes for IE 5* in this conditional comment */
                  .PAGE #sidebar1 { width: 180px; }
                  </style>
                  <![endif]
                  [if IE]>
                  <style type="text/css">
                  /* place css fixes for all versions of IE in this conditional comment */
                  .PAGE #sidebar2, .PAGE #sidebar1 { padding-top: 30px; }
                  .PAGE #mainContent, #address { zoom: 1; }
                  /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
                  </style>
                  <![endif]

                   

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

                  • 6. Re: Huge White Space issue in MSIE
                    LitlJack Level 1

                    I do want that small 30px padding, otherwise IE puts my headline right under the purple line of the menubar. What I don't want is half a printed page of space between menu and Story #1. Explorer 6 and 7 are aligning my text below the image that is floating at the top left of the screen, instead of next to it.

                     

                    And, like I said, I have the second issue now of a misaligned Story #2.

                    • 7. Re: Huge White Space issue in MSIE
                      Nancy OShea Adobe Community Professional & MVP
                      Explorer 6 and 7 are aligning my text below the image that is floating at the top left of the screen, instead of next to it.

                       

                      IE 6 and 7 have several known bugs you should be aware of.

                      http://www.positioniseverything.net/explorer.html

                       

                       

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

                      • 8. Re: Huge White Space issue in MSIE
                        LitlJack Level 1

                        Does anybody know EXACTLY which bug(s) I need to deal with to get rid of 1. the extra white space and 2. the second story misaligment? Since I don't know where the problem lies, I'm having trouble addressing any "bug" fixes.

                        • 9. Re: Huge White Space issue in MSIE
                          Nancy OShea Adobe Community Professional & MVP

                          #1 You appear to have a Float Drop problem in IE6 which may be caused by your container division being too narrow to accomodate  everything inside it.  As a test, make your container division 1000px wide and see if that cures your float drop problem.  See also the Expanding Box, and Double Margin on Floats bugs.

                           

                          #2 I don't know what you mean.   Allowing for a bit of browser variation, your page looks much the same for me in FF and IE7 (see screenshot from IE7).

                           

                          CozyAcres-IE7.jpg

                           


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