Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Beginner needs some extra space help quickly.

    I just finished designing and posting one page of a website for testing purposes. I have tested it on firefox and safari and it looks great, but in Internet explorer 7-8, I am getting extra white space after my photo in my sidebar and after the navigation table I set up in the header. How do I fix this issue. I developed the site in dreamweaver. Thanks in advance for any help!

    the page is http://www.thegreensgolfclub.com/index2.html

    The code is below:

    Code:
    <!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>Welcome to The Greens</title>
    <style type="text/css"> 
    <!-- 
    body  {
    	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    	padding: 0;
    	text-align: center;
    	background-image: url(images/webbkg.gif);
    	background-repeat: repeat;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 100%;
    }
    .twoColFixRtHdr #container {
    	width: 780px;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    	background-color: #FBECD7;
    	margin-top: 25px;
    	margin-right: auto;
    	margin-left: auto;
    	background-image: url(images/pagebkg.gif);
    	background-repeat: repeat-y;
    } 
    .twoColFixRtHdr #header {
    } 
    .twoColFixRtHdr #header h1 {
    	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
    }
    .twoColFixRtHdr #sidebar1 {
    	float: right; /* since this element is floated, a width must be given */
    	width: 342px;
    }
    .twoColFixRtHdr #mainContent {
    	margin-right: 342px;
    	position: relative;
    } 
    .twoColFixRtHdr #footer {
    } 
    .twoColFixRtHdr #footer p {
    	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    	padding: 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    }
    .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;
    	margin-left: 8px;
    }
    .fltlft { /* this class can be used to float an element left in your page */
    	float: left;
    	margin-right: 8px;
    }
    .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;
    }
    p {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	line-height: 21px;
    	padding-right: 25px;
    	padding-left: 25px;
    	font-weight: lighter;
    	text-align: left;
    	margin-top: 0px;
    	color: #2A5C25;
    }
    --> 
    </style>
    <!--[if IE 5]>
    <style type="text/css"> 
    /* place css box model fixes for IE 5* in this conditional comment */
    .twoColFixRtHdr #sidebar1 { width: 220px; }
    </style>
    <![endif]--><!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_nbGroup(event, grpName) { //v6.0
      var i,img,nbArr,args=MM_nbGroup.arguments;
      if (event == "init" && args.length > 2) {
        if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
          img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
          if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
          nbArr[nbArr.length] = img;
          for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
            if (!img.MM_up) img.MM_up = img.src;
            img.src = img.MM_dn = args[i+1];
            nbArr[nbArr.length] = img;
        } }
      } else if (event == "over") {
        document.MM_nbOver = nbArr = new Array();
        for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
          nbArr[nbArr.length] = img;
        }
      } else if (event == "out" ) {
        for (i=0; i < document.MM_nbOver.length; i++) {
          img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
      } else if (event == "down") {
        nbArr = document[grpName];
        if (nbArr)
          for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
        document[grpName] = nbArr = new Array();
        for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
          if (!img.MM_up) img.MM_up = img.src;
          img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
          nbArr[nbArr.length] = img;
      } }
    }
    //-->
    </script>
    </head>
    
    <body class="twoColFixRtHdr" onload="MM_preloadImages('images/ButtonArt/button-active_01.jpg','images/ButtonArt/button-active_02.jpg','images/ButtonArt/button-active_03.jpg','images/ButtonArt/button-active_04.jpg','images/ButtonArt/button-active_05.jpg')">
    
    <div id="container">
      <div id="header"><img src="images/header.jpg" alt="the-greens-header" width="780" height="79" />
        <table border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','images/ButtonArt/button-active_01.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_01.jpg" alt="" name="Home" border="0" id="Home" onload="" /></a></td>
            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Explore','',1)" onmouseover="MM_nbGroup('over','Explore','images/ButtonArt/button-active_02.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_02.jpg" alt="" name="Explore" border="0" id="Explore" onload="" /></a></td>
            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Membership','',1)" onmouseover="MM_nbGroup('over','Membership','images/ButtonArt/button-active_03.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_03.jpg" alt="" name="Membership" border="0" id="Membership" onload="" /></a></td>
            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Outings','',1)" onmouseover="MM_nbGroup('over','Outings','images/ButtonArt/button-active_04.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_04.jpg" alt="" name="Outings" border="0" id="Outings" onload="" /></a></td>
            <td><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','Contact','',1)" onmouseover="MM_nbGroup('over','Contact','images/ButtonArt/button-active_05.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="images/ButtonArt/button-static_05.jpg" alt="" name="Contact" border="0" id="Contact" onload="" /></a></td>
          </tr>
        </table>
      </div>
      <div id="sidebar1"><img src="images/about-us-art.jpg" alt="About-The-Golf-Club-Art" width="342" height="410" align="top" /></div>
    <div id="mainContent"><img src="images/about-us-headline.gif" alt="about-us-head" width="438" height="125" />
          <p>Are economic pressures, overcrowded courses and unworkable tee times making the game less enjoyable? Looking for a better golf country club experience? You’re not alone. Countless club members are thinking twice about renewing their costly memberships. For many, the value and the venue no longer add up. Then they come to The Greens at Half Hollow…and fall in love with the game again.<br />
          <br />
          Here at The Greens, it all comes together. Like an amazing course that’s exceptionally maintained and available whenever you are.  There’s a massive clubhouse, gorgeously designed, with amenities and activities your family will love. Enjoy our sensational indoor and outdoor pools, tennis courts, patio dining and more. Surrounding it all are the lovely grounds. It’s a beautiful place to play.<br />
          <br />
        And yet, the most amazing aspect of The Greens at Half Hollow…the unbelievable value!</p>
        <!-- end #mainContent --></div>
      <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
      <div id="footer">
        <p><img src="images/footer.gif" alt="golf-club-footer" width="780" height="25" /></p>
      <!-- end #footer --></div>
    <!-- end #container --></div>
     </body>
    </html>
    Last edited by cgpcreative; 04-30-2009 at 08:45 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Please use the [code][/code] tags when posting code. It makes it easier to read. Its that little # button.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am sorry. Will try and remember next time.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Just edit your post.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed. Thanks for the tip.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You do have this in your HTML
    Code:
    <!--[if IE]>
    <style type="text/css"> 
    /* place css fixes for all versions of IE in this conditional comment */
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    .twoColFixRtHdr #mainContent { zoom: 1; }
    /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
    </style>
    <![endif]-->
    which is pushing down your sidebar 30px remove this line
    Code:
    .twoColFixRtHdr #sidebar1 { padding-top: 30px; }
    and see if that helps. That is the only space I can see btw.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #7
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked like a charm, I cannot thank you enough. My uncle will be happy. There is, however, a 3-4 pixel white space between the header art and the table that contains the navigation and I have no idea how to get rid of it. I checked on IE7 and 8 and the space is there.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I don't see that specified gap in IE7 or 8. have you sorted it?
    Anyway, there might be a chance for a mysterious gap under an img tag, see https://developer.mozilla.org/en/ima...ysterious_gaps
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Funny, 3 people I called can see the gap in IE 7/8. Weird. Anyway, I worked around it by applying a repeating background image to the header div. It's not correct, but it seems to fill the space nicely, with no real discernible difference. I just wish I knew what I was doing wrong. The site is now up and looks nice in every browser I have checked (safari, firefox, opera, ie8).

  • #10
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Update-older ie...still need help

    Everything is looking great on ie 7/8 but on an older version of ie (not sure, but say 5-6), the left side headline art is now pushed down, when it should be flush to the top. Any ideas?

    The site is up at http://www.thegreensgolfclub.com

    Thanks in advance. This is very frustrating.

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Hi there

    It doesn't look good in IE6 I'm afraid - see below - the mainContent div has dropped.

    I suspect this is the IE6 3px bug, triggered by the width on "about-us-headline.gif". A possible solution is to float your mainContent div left by making your css:

    Code:
    .twoColFixRtHdr #mainContent {
    margin:0 0 0 0;
    float:left;
    width:438px;
    }
    This really shouldn't be necessary, but that's the problem with IE6.
    Attached Thumbnails Attached Thumbnails Beginner needs some extra space help quickly.-ie6.jpg  

  • #12
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    that fixed it nicely--at least on the older IE which I have on a pc at my house. Thank you.

  • #13
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    No probs.

    The other issue re the gap at the top under your image - I can see this fleetingly in IE6/7 when the page loads. I've seen this happen with XHTML strict but not transitional as your pages - but you should be able to fix this by adding the following to your css:

    Code:
    img {display:block}
    - as per link in abduraoft's post above.

    Also, btw, you have an invalid character before "exceptionally maintained" in your text. The w3c validator is useful to pick up this sort of thing.

    And finally, your page title should say "Welcome" not "Welcom". Not being picky, just thought you'd want to know.

  • #14
    New Coder
    Join Date
    Apr 2009
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks so much. I may try converting the image into a block element on a test page, I really don't think its much of an issue anymore as I cannot really see it, unless I really try. As for the other two things, I am on it.

    Can't thank you enough. I am learning so much.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •