White space, or automtically padding div elements problems in IE.

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • PunchBackJack
    New Member
    • Dec 2007
    • 10
    #1

    White space, or automtically padding div elements problems in IE.

    Im having trouble getting this site to show correctly in IE (big surprise). I have a div element (side bar) inside another div element that simply takes the size of the largest element inside as the height. Firefox correctly sizes the div to the sidebard with no space. However, IE seems to automatically place padding on the div, leaving unwanted whitespace below the element. I have attached pictures as to what I mean, and have dashed to border of the divs to outline the problem.





    Here's the CSS I'm using for the sidebar (leftColumn), and the enclosing div (contentBlock)

    div.leftColumn {
    float:left;
    width:150px;
    height:600px;
    margin-right:10px;
    background-color:darkgreen ;
    border: 1px dashed black;
    color:white;
    }

    div.contentBloc k {
    float:left;
    width:100%;
    background-color:white;
    border: 1px dashed black;
    font-size:1em;
    background-image: url(images/watermark2.bmp) ;
    background-position: bottom right;
    background-repeat: no-repeat;
    }

    Any ideas on how to get rid of this space on IE?
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Try this:

      [CODE=css] body {
      margin:0;
      padding:0;
      }
      [/CODE]

      Hope it helps, Thanks, Death

        Comment

        • PunchBackJack
          New Member
          • Dec 2007
          • 10
          #3
          Originally posted by Death Slaught
          Try this:

          [CODE=css] body {
          margin:0;
          padding:0;
          }
          [/CODE]

          Hope it helps, Thanks, Death
          Doesn't seem to change anything. I'm going to try a few different things with the encapsulating div. Thanks though.

            Comment

            • Death Slaught
              Top Contributor
              • Aug 2007
              • 1137
              #4
              Post all of your code, the HTML, CSS all of it.

              Thanks, Death

                Comment

                • PunchBackJack
                  New Member
                  • Dec 2007
                  • 10
                  #5
                  Originally posted by Death Slaught
                  Post all of your code, the HTML, CSS all of it.

                  Thanks, Death
                  This is what I'm looking at right now.

                  [CODE="HTML"]

                  <html>

                  <LINK REL=StyleSheet HREF="style.css " TYPE="text/css" MEDIA=screen>

                  <!--Wraps all divs to adjust to center of screen-->

                  <div class="divWrapp er">

                  <div class="pageBord er">

                  <head>
                  <link rel=stylesheet href="style.css " type="text/css" media=screen>
                  </head>

                  <body class="bodyForm at">

                  <div class="titlebox ">

                  <img src="images/logo.bmp" alt="Wines-to-Go" align="left" />
                  <a id="company">Wi nes-to-Go</a>

                  </div>

                  <div class="navbarbo x">

                  <div class="navbarte xt">

                  <a id="home" href="">Home</a>
                  <a id="media" href="">Media</a>
                  <a id="products" href="">Product s</a>
                  <a id="info" href="">Informa tion</a>
                  <a id="contact" href="">Contact </a>

                  </div>

                  </div>

                  <div class="contentB lock">
                  <div class="leftColu mn">
                  </div>

                  <h2 style="margin-top:10px;">Home made Wine... Made Easy</h2>
                  <hr style="width:30 0px;" />

                  <div class="contentT ext">
                  <p> &nbsp;&nbsp;&nb sp;&nbsp;Welcom e to the Wines-to-Go website,
                  your source for information all on all things winemaking.&nbs p;&nbsp;
                  You will find all kind of information regarding the winemaking
                  prcoess as well as what makes us different.&nbsp ;&nbsp;This site also
                  outlines our services, products, and requirements for making wine at
                  our location at 321 Victoria St. The following is useless jargon for testing purposes.</p>

                  <div class="contentB ox">

                  <h4>Specialty Kits at Low Prices</h4>
                  <img src="images/red.gif" alt="Specialty Kits" style="backgrou nd-color:white; border:1px solid black;" />

                  </div>

                  </div>

                  </div>

                  <div class="copyrigh t">
                  <div class="copyrigh ttext">
                  <hr style="width:40 0px;"/>
                  <p>Copyright &copy; 2007 Wines-to-Go. All rights reserved.</p>

                  </div>

                  </div>

                  </body>

                  </div>

                  </div>

                  </html>

                  [/CODE]

                  and the CSS

                  [CODE="CSS"]

                  /* style.css - Styling Page for Wines-To-Go */

                  h1, h2, h3, h4, h5, h6, p {
                  font-family: "Georgia";
                  }

                  hr {
                  height:0;
                  border-bottom:0;
                  border-right:0;
                  border-top: 1px solid orange;
                  }

                  /* This is to ensure centering on IE Properly */
                  div.divWrapper {

                  text-align:center;
                  }

                  div.pageBorder {
                  margin-left: auto;
                  margin-right: auto;
                  width:800px;
                  }

                  body.bodyFormat {
                  background-color: beige;
                  }

                  div.titlebox {
                  width:800px;
                  text-align:left;
                  float:left;
                  }

                  #company {
                  margin-left:10px;
                  font-family:"Brush Script MT","Georgia" ;
                  font-size:90px;
                  color:black;
                  font-style:italic;
                  }

                  div.navbarbox {
                  padding-bottom:2px;
                  padding-top:2px;
                  width:100%;
                  float:left;
                  background-color:maroon;
                  }

                  div.navbartext {
                  margin-left:2px;
                  margin-right:2px;
                  color:white;
                  font-family:tahoma;
                  font-size: .8em;
                  text-align:left;
                  }

                  div.navbartext a {
                  float: left;
                  text-align:left;
                  padding-left:20px;
                  padding-right:20px;
                  border-left: 1px solid orange;
                  border-top: 1px solid orange;
                  border-bottom: 1px solid orange;
                  text-decoration:none ;
                  color: white;
                  }

                  /*draws the the border line on the right of contact to finish the borders*/
                  #contact {
                  border-right:1px solid orange;
                  }

                  div.navbartext a:hover {
                  background-color:orange;
                  }

                  div.leftColumn {
                  float:left;
                  width:150px;
                  height:600px;
                  margin-right:10px;
                  background-color:darkgreen ;
                  color:white;
                  }

                  div.contentBloc k {
                  float:left;
                  width:100%;
                  background-color:white;
                  font-size:1em;
                  background-image: url(images/watermark2.bmp) ;
                  background-position: bottom right;
                  background-repeat: no-repeat;
                  }

                  div.contentText {
                  margin-top:10px;
                  margin-right:10px;
                  margin-bottom:10px;
                  text-align:left;
                  font-size:.75em;
                  }

                  div.contentBox {
                  float:right;
                  width: 260px;
                  height:214px;
                  margin-left:10px;
                  margin-right:10px;
                  margin-top:10px;
                  margin-bottom:10px;
                  padding:5px;
                  text-align:center;
                  color: white;
                  background-image: url(images/box.bmp);
                  background-repeat: no-repeat;
                  }

                  div.copyright {
                  width:100%;
                  margin-top: 15px;
                  margin-right:auto;
                  margin-left:auto;
                  float:left;
                  text-align:center;
                  color:silver;
                  font-size:.7em;
                  }

                  div.copyrightte xt {
                  text-align:center;
                  }

                  [/CODE]

                  Still a work in progress, looks like I need to clean up my spacing.

                  Thanks

                  -> PunchBack

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      First quick observation is you aren't using a doctype. Please see the article about doctypes under Howtos at the top of this page.

                      You have two div tags right behind the doctype where they should not be.
                      You are using a XHTML closing tag '/>' but are using html. Remove the slash.
                      You are missing two closing tags for divs. Validate your html for this list of errors.
                      Then validate your css for that list of errors.

                        Comment

                        • PunchBackJack
                          New Member
                          • Dec 2007
                          • 10
                          #7
                          Originally posted by drhowarddrfine
                          First quick observation is you aren't using a doctype. Please see the article about doctypes under Howtos at the top of this page.

                          You have two div tags right behind the doctype where they should not be.
                          You are using a XHTML closing tag '/>' but are using html. Remove the slash.
                          You are missing two closing tags for divs. Validate your html for this list of errors.
                          Then validate your css for that list of errors.
                          Thanks for that, Doctypes are one of the only things my intructor in college failed to explain. One of those 'just because' kinda things, I can't remember the statement for declaring the doctype, and forgot to google it before I started this site. Nice to know the information as to how they are used. Unfortunetly it still fails to correct the empty space issue I'm having.

                          I notice though the problem seems to lie with the contentBox, and ContentText divs, as it displays correctly if I comment out the styles for these divs. Something is going on with adding a return or extra padding for these elements incorrectly in IE, the amount of space reduces by half when only commenting out one of the divs, so they are stacking on each other.

                          Frustrating

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              Ok, so with the corrections made, post that markup. Do you have a link?

                                Comment

                                • PunchBackJack
                                  New Member
                                  • Dec 2007
                                  • 10
                                  #9
                                  I fixed it by using a different formatting. Instead of placing the leftColum div inside the contentBlock div, I seperated them and placed them both in a encapsulating div set to a specified height. The using 100% height on both and specified widths. I'll post the code for those curious.

                                  [CODE="html"]

                                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

                                  <html>

                                  <LINK REL=StyleSheet HREF="style.css " TYPE="text/css" MEDIA=screen>

                                  <!--Wraps all divs to adjust to center of screen-->

                                  <div class="divWrapp er">

                                  <div class="pageBord er">

                                  <head>
                                  <link rel=stylesheet href="style.css " type="text/css" media=screen>
                                  </head>

                                  <body class="bodyForm at">

                                  <div class="titlebox ">

                                  <img src="images/logo.bmp" alt="Wines-to-Go" align="left" />
                                  <a id="company">Wi nes-to-Go</a>

                                  </div>

                                  <div class="navbarbo x">

                                  <div class="navbarte xt">

                                  <a id="home" href="">Home</a>
                                  <a id="media" href="">Media</a>
                                  <a id="products" href="">Product s</a>
                                  <a id="info" href="">Informa tion</a>
                                  <a id="contact" href="">Contact </a>

                                  </div>

                                  </div>

                                  <div class="contentS urround">

                                  <div class="leftColu mn">
                                  </div>

                                  <div class="contentB lock">

                                  <h2 style="margin-top:10px;">Home made Wine... Made Easy</h2>
                                  <hr style="width:30 0px;" />

                                  <div class="contentT ext">

                                  <p> &nbsp;&nbsp;&nb sp;&nbsp;Welcom e to the Wines-to-Go website,
                                  your source for information all on all things winemaking.&nbs p;&nbsp;
                                  You will find all kind of information regarding the winemaking
                                  prcoess as well as what makes us different.&nbsp ;&nbsp;This site also
                                  outlines our services, products, and requirements for making wine at
                                  our location at 321 Victoria St. The following is useless jargon for testing purposes.</p>

                                  <div class="contentB ox">

                                  <h4>Specialty Kits at Low Prices</h4>
                                  <img src="images/red.gif" alt="Specialty Kits" style="backgrou nd-color:white; border:1px solid black;" />

                                  </div>

                                  </div>

                                  </div>

                                  </div>

                                  <div class="copyrigh t">

                                  <div class="copyrigh ttext">

                                  <hr style="width:40 0px;"/>
                                  <p>Copyright &copy; 2007 Wines-to-Go. All rights reserved.</p>

                                  </div>

                                  </div>

                                  </body>

                                  </div>

                                  </div>

                                  </html>

                                  [/CODE]

                                  [CODE="CSS"]

                                  /* style.css - Styling Page for Wines-To-Go */

                                  h1, h2, h3, h4, h5, h6, p {
                                  font-family: "Georgia";
                                  }

                                  hr {
                                  height:0;
                                  border-bottom:0;
                                  border-right:0;
                                  boder-left: 0;
                                  border-top: 1px solid orange;
                                  }

                                  /* This is to ensure centering on IE Properly */
                                  div.divWrapper {

                                  text-align:center;
                                  }

                                  div.pageBorder {
                                  margin-left: auto;
                                  margin-right: auto;
                                  width:800px;
                                  }

                                  body.bodyFormat {
                                  background-color: beige;
                                  }

                                  div.titlebox {
                                  width:800px;
                                  text-align:left;
                                  float:left;
                                  }

                                  #company {
                                  margin-left:10px;
                                  font-family:"Brush Script MT","Georgia" ;
                                  font-size:90px;
                                  color:black;
                                  font-style:italic;
                                  }

                                  div.navbarbox {
                                  padding-bottom:2px;
                                  padding-top:2px;
                                  width:100%;
                                  float:left;
                                  background-color:maroon;
                                  }

                                  div.navbartext {
                                  margin-left:2px;
                                  margin-right:2px;
                                  color:white;
                                  font-family:tahoma;
                                  font-size: .8em;
                                  text-align:left;
                                  }

                                  div.navbartext a {
                                  float: left;
                                  text-align:left;
                                  padding-left:20px;
                                  padding-right:20px;
                                  border-left: 1px solid orange;
                                  border-top: 1px solid orange;
                                  border-bottom: 1px solid orange;
                                  text-decoration:none ;
                                  color: white;
                                  }

                                  /*draws the the border line on the right of contact to finish the borders*/
                                  #contact {
                                  border-right:1px solid orange;
                                  }

                                  div.navbartext a:hover {
                                  background-color:orange;
                                  }

                                  div.contentSurr ound {
                                  width: 100%;
                                  height: 600px;
                                  }

                                  div.leftColumn {
                                  float:left;
                                  width:150px;
                                  height:100%;
                                  background-color:darkgreen ;
                                  color:white;
                                  }

                                  div.contentBloc k {
                                  float:right;
                                  width:650px;
                                  height:100%;
                                  background-color:white;
                                  font-size:1em;
                                  background-image: url(images/watermark2.bmp) ;
                                  background-position: bottom right;
                                  background-repeat: no-repeat;
                                  }


                                  div.contentText {
                                  margin: 10px;
                                  text-align:left;
                                  font-size:.75em;
                                  }

                                  div.contentBox {
                                  float:right;
                                  width: 260px;
                                  height:214px;
                                  margin-left:10px;
                                  margin-right:10px;
                                  margin-top:10px;
                                  margin-bottom:10px;
                                  padding:5px;
                                  text-align:center;
                                  color: white;
                                  background-image: url(images/box.bmp);
                                  background-repeat: no-repeat;
                                  }

                                  div.copyright {
                                  width:100%;
                                  margin-top: 15px;
                                  margin-right:auto;
                                  margin-left:auto;
                                  float:left;
                                  text-align:center;
                                  color:silver;
                                  font-size:.7em;
                                  }

                                  div.copyrightte xt {
                                  text-align:center;
                                  }

                                  [/CODE]

                                  I'll haved to open my code in an actual editor when I get home, and fix the formatting that is easier to spot when not using Notepad. I should valdiate them both as well.

                                  Thanks for the suggestions.

                                    Comment

                                    Previous template Next
                                    Working...