473,326 Members | 2,192 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

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.contentBlock {
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?
Dec 28 '07 #1
8 2418
Death Slaught
1,137 1GB
Try this:

Expand|Select|Wrap|Line Numbers
  1.  body { 
  2.   margin:0;
  3.   padding:0;
  4. }
  5.  
Hope it helps, Thanks, Death
Dec 28 '07 #2
Try this:

Expand|Select|Wrap|Line Numbers
  1.  body { 
  2.   margin:0;
  3.   padding:0;
  4. }
  5.  
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.
Dec 28 '07 #3
Death Slaught
1,137 1GB
Post all of your code, the HTML, CSS all of it.

Thanks, Death
Dec 28 '07 #4
Post all of your code, the HTML, CSS all of it.

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

Expand|Select|Wrap|Line Numbers
  1.  
  2. <html>
  3.  
  4. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
  5.  
  6. <!--Wraps all divs to adjust to center of screen-->
  7.  
  8. <div class="divWrapper">
  9.  
  10. <div class="pageBorder">
  11.  
  12. <head>
  13.     <link rel=stylesheet href="style.css" type="text/css" media=screen>
  14. </head>
  15.  
  16. <body class="bodyFormat">
  17.  
  18.     <div class="titlebox">
  19.  
  20.             <img src="images/logo.bmp" alt="Wines-to-Go" align="left" />
  21.             <a id="company">Wines-to-Go</a>
  22.  
  23.     </div>
  24.  
  25.     <div class="navbarbox">
  26.  
  27.         <div class="navbartext">
  28.  
  29.             <a id="home" href="">Home</a>
  30.             <a id="media" href="">Media</a>
  31.             <a id="products" href="">Products</a>
  32.             <a id="info" href="">Information</a>
  33.             <a id="contact" href="">Contact</a>
  34.  
  35.         </div>
  36.  
  37.     </div>
  38.  
  39.     <div class="contentBlock">
  40.         <div class="leftColumn">
  41.         </div>    
  42.  
  43.         <h2 style="margin-top:10px;">Homemade Wine... Made Easy</h2>
  44.         <hr style="width:300px;" />
  45.  
  46.         <div class="contentText">    
  47.             <p> &nbsp;&nbsp;&nbsp;&nbsp;Welcome to the Wines-to-Go website,
  48.             your source for information all on all things winemaking.&nbsp;&nbsp;
  49.             You will find all kind of information regarding the winemaking
  50.             prcoess as well as what makes us different.&nbsp;&nbsp;This site also
  51.             outlines our services, products, and requirements for making wine at 
  52.             our location at 321 Victoria St.  The following is useless jargon for testing purposes.</p>
  53.  
  54.             <div class="contentBox">
  55.  
  56.                 <h4>Specialty Kits at Low Prices</h4>
  57.                 <img src="images/red.gif" alt="Specialty Kits" style="background-color:white; border:1px solid black;" />
  58.  
  59.             </div>
  60.  
  61.         </div>        
  62.  
  63.     </div>
  64.  
  65.     <div class="copyright">
  66.         <div class="copyrighttext">
  67.             <hr style="width:400px;"/>
  68.             <p>Copyright &copy; 2007 Wines-to-Go.  All rights reserved.</p>
  69.  
  70.         </div>
  71.  
  72.     </div>
  73.  
  74. </body>
  75.  
  76. </div>
  77.  
  78. </div>
  79.  
  80. </html>
  81.  
  82.  
and the CSS

Expand|Select|Wrap|Line Numbers
  1.  
  2. /* style.css - Styling Page for Wines-To-Go */
  3.  
  4. h1, h2, h3, h4, h5, h6, p {
  5.     font-family: "Georgia";
  6. }
  7.  
  8. hr {
  9.     height:0;
  10.     border-bottom:0;
  11.     border-right:0;
  12.     border-top: 1px solid orange;
  13. }
  14.  
  15. /* This is to ensure centering on IE Properly */
  16. div.divWrapper {
  17.  
  18.     text-align:center;
  19. }
  20.  
  21. div.pageBorder {
  22.     margin-left: auto;
  23.     margin-right: auto;
  24.     width:800px;
  25. }
  26.  
  27. body.bodyFormat {
  28.     background-color: beige;
  29. }
  30.  
  31. div.titlebox {
  32.     width:800px;
  33.     text-align:left;
  34.     float:left;
  35. }
  36.  
  37. #company {
  38.     margin-left:10px;
  39.     font-family:"Brush Script MT","Georgia";
  40.     font-size:90px;
  41.     color:black;
  42.     font-style:italic;
  43. }
  44.  
  45. div.navbarbox {
  46.     padding-bottom:2px;
  47.     padding-top:2px;
  48.     width:100%;
  49.     float:left;
  50.     background-color:maroon;
  51. }
  52.  
  53. div.navbartext {
  54.     margin-left:2px;
  55.     margin-right:2px;
  56.     color:white;
  57.     font-family:tahoma;
  58.     font-size: .8em;
  59.     text-align:left;
  60. }
  61.  
  62. div.navbartext a {
  63.     float: left; 
  64.     text-align:left;
  65.     padding-left:20px;
  66.     padding-right:20px;
  67.     border-left: 1px solid orange;
  68.     border-top: 1px solid orange;
  69.     border-bottom: 1px solid orange;
  70.     text-decoration:none;
  71.     color: white;
  72. }
  73.  
  74. /*draws the the border line on the right of contact to finish the borders*/
  75. #contact {
  76.     border-right:1px solid orange;
  77. }
  78.  
  79. div.navbartext a:hover {
  80.     background-color:orange;
  81. }
  82.  
  83. div.leftColumn {
  84.     float:left;
  85.     width:150px;
  86.     height:600px;
  87.     margin-right:10px;
  88.     background-color:darkgreen;
  89.     color:white;
  90. }
  91.  
  92. div.contentBlock {
  93.     float:left;
  94.     width:100%;
  95.     background-color:white;
  96.     font-size:1em;
  97.     background-image: url(images/watermark2.bmp);
  98.     background-position: bottom right;
  99.     background-repeat: no-repeat;
  100. }
  101.  
  102. div.contentText {
  103.     margin-top:10px;
  104.     margin-right:10px;
  105.     margin-bottom:10px;
  106.     text-align:left;
  107.     font-size:.75em;
  108. }
  109.  
  110. div.contentBox {
  111.     float:right;
  112.     width: 260px;
  113.     height:214px;
  114.     margin-left:10px;
  115.     margin-right:10px;
  116.     margin-top:10px;
  117.     margin-bottom:10px;
  118.     padding:5px;
  119.     text-align:center;
  120.     color: white;
  121.     background-image: url(images/box.bmp);
  122.     background-repeat: no-repeat;
  123. }
  124.  
  125. div.copyright {
  126.     width:100%;
  127.     margin-top: 15px;
  128.     margin-right:auto;
  129.     margin-left:auto;
  130.     float:left;
  131.     text-align:center;
  132.     color:silver;
  133.     font-size:.7em;
  134. }
  135.  
  136. div.copyrighttext {
  137.     text-align:center;
  138. }
  139.  
  140.  
Still a work in progress, looks like I need to clean up my spacing.

Thanks

-> PunchBack
Dec 31 '07 #5
drhowarddrfine
7,435 Expert 4TB
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.
Dec 31 '07 #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.
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
Dec 31 '07 #7
drhowarddrfine
7,435 Expert 4TB
Ok, so with the corrections made, post that markup. Do you have a link?
Dec 31 '07 #8
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.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4.  
  5. <html>
  6.  
  7. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
  8.  
  9. <!--Wraps all divs to adjust to center of screen-->
  10.  
  11. <div class="divWrapper">
  12.  
  13. <div class="pageBorder">
  14.  
  15. <head>
  16.     <link rel=stylesheet href="style.css" type="text/css" media=screen>
  17. </head>
  18.  
  19. <body class="bodyFormat">
  20.  
  21.     <div class="titlebox">
  22.  
  23.             <img src="images/logo.bmp" alt="Wines-to-Go" align="left" />
  24.             <a id="company">Wines-to-Go</a>
  25.  
  26.     </div>
  27.  
  28.     <div class="navbarbox">
  29.  
  30.         <div class="navbartext">
  31.  
  32.             <a id="home" href="">Home</a>
  33.             <a id="media" href="">Media</a>
  34.             <a id="products" href="">Products</a>
  35.             <a id="info" href="">Information</a>
  36.             <a id="contact" href="">Contact</a>
  37.  
  38.         </div>
  39.  
  40.     </div>
  41.  
  42.     <div class="contentSurround">
  43.  
  44.         <div class="leftColumn">
  45.         </div>    
  46.  
  47.         <div class="contentBlock">
  48.  
  49.             <h2 style="margin-top:10px;">Homemade Wine... Made Easy</h2>
  50.             <hr style="width:300px;" />
  51.  
  52.             <div class="contentText">    
  53.  
  54.                 <p> &nbsp;&nbsp;&nbsp;&nbsp;Welcome to the Wines-to-Go website,
  55.                 your source for information all on all things winemaking.&nbsp;&nbsp;
  56.                 You will find all kind of information regarding the winemaking
  57.                 prcoess as well as what makes us different.&nbsp;&nbsp;This site also
  58.                 outlines our services, products, and requirements for making wine at 
  59.                 our location at 321 Victoria St.  The following is useless jargon for testing purposes.</p>
  60.  
  61.                 <div class="contentBox">
  62.  
  63.                     <h4>Specialty Kits at Low Prices</h4>
  64.                     <img src="images/red.gif" alt="Specialty Kits" style="background-color:white; border:1px solid black;" />
  65.  
  66.                 </div>
  67.  
  68.             </div>
  69.  
  70.         </div>
  71.  
  72.     </div>
  73.  
  74.     <div class="copyright">
  75.  
  76.         <div class="copyrighttext">
  77.  
  78.             <hr style="width:400px;"/>
  79.             <p>Copyright &copy; 2007 Wines-to-Go.  All rights reserved.</p>
  80.  
  81.         </div>
  82.  
  83.     </div>
  84.  
  85. </body>
  86.  
  87. </div>
  88.  
  89. </div>
  90.  
  91. </html>
  92.  
  93.  
Expand|Select|Wrap|Line Numbers
  1.  
  2. /* style.css - Styling Page for Wines-To-Go */
  3.  
  4. h1, h2, h3, h4, h5, h6, p {
  5.     font-family: "Georgia";
  6. }
  7.  
  8. hr {
  9.     height:0;
  10.     border-bottom:0;
  11.     border-right:0;
  12.     boder-left: 0;
  13.     border-top: 1px solid orange;
  14. }
  15.  
  16. /* This is to ensure centering on IE Properly */
  17. div.divWrapper {
  18.  
  19.     text-align:center;
  20. }
  21.  
  22. div.pageBorder {
  23.     margin-left: auto;
  24.     margin-right: auto;
  25.     width:800px;
  26. }
  27.  
  28. body.bodyFormat {
  29.     background-color: beige;
  30. }
  31.  
  32. div.titlebox {
  33.     width:800px;
  34.     text-align:left;
  35.     float:left;
  36. }
  37.  
  38. #company {
  39.     margin-left:10px;
  40.     font-family:"Brush Script MT","Georgia";
  41.     font-size:90px;
  42.     color:black;
  43.     font-style:italic;
  44. }
  45.  
  46. div.navbarbox {
  47.     padding-bottom:2px;
  48.     padding-top:2px;
  49.     width:100%;
  50.     float:left;
  51.     background-color:maroon;
  52. }
  53.  
  54. div.navbartext {
  55.     margin-left:2px;
  56.     margin-right:2px;
  57.     color:white;
  58.     font-family:tahoma;
  59.     font-size: .8em;
  60.     text-align:left;
  61. }
  62.  
  63. div.navbartext a {
  64.     float: left; 
  65.     text-align:left;
  66.     padding-left:20px;
  67.     padding-right:20px;
  68.     border-left: 1px solid orange;
  69.     border-top: 1px solid orange;
  70.     border-bottom: 1px solid orange;
  71.     text-decoration:none;
  72.     color: white;
  73. }
  74.  
  75. /*draws the the border line on the right of contact to finish the borders*/
  76. #contact {
  77.     border-right:1px solid orange;
  78. }
  79.  
  80. div.navbartext a:hover {
  81.     background-color:orange;
  82. }
  83.  
  84. div.contentSurround {
  85.     width: 100%;
  86.     height: 600px;
  87. }
  88.  
  89. div.leftColumn {
  90.     float:left;
  91.     width:150px;
  92.     height:100%;
  93.     background-color:darkgreen;
  94.     color:white;
  95. }
  96.  
  97. div.contentBlock {
  98.     float:right;
  99.     width:650px;
  100.     height:100%;
  101.     background-color:white;
  102.     font-size:1em;
  103.     background-image: url(images/watermark2.bmp);
  104.     background-position: bottom right;
  105.     background-repeat: no-repeat;
  106. }
  107.  
  108.  
  109. div.contentText {
  110.     margin: 10px;
  111.     text-align:left;
  112.     font-size:.75em;
  113. }
  114.  
  115. div.contentBox {
  116.     float:right;
  117.     width: 260px;
  118.     height:214px;
  119.     margin-left:10px;
  120.     margin-right:10px;
  121.     margin-top:10px;
  122.     margin-bottom:10px;
  123.     padding:5px;
  124.     text-align:center;
  125.     color: white;
  126.     background-image: url(images/box.bmp);
  127.     background-repeat: no-repeat;
  128. }
  129.  
  130. div.copyright {
  131.     width:100%;
  132.     margin-top: 15px;
  133.     margin-right:auto;
  134.     margin-left:auto;
  135.     float:left;
  136.     text-align:center;
  137.     color:silver;
  138.     font-size:.7em;
  139. }
  140.  
  141. div.copyrighttext {
  142.     text-align:center;
  143. }
  144.  
  145.  
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.
Dec 31 '07 #9

Sign in to post your reply or Sign up for a free account.

Similar topics

17
by: Stanimir Stamenkov | last post by:
Is it possible to make two inline elements to appear adjacent stripping any white space appearing in between in the source? Example: <span class="adj">1</span> <span class="adj">2</span>...
5
by: Applebrown | last post by:
Hello, basically, I'm just learning intermediate CSS and trying to convert my old table webpage completely to CSS. Hoorah, right? Well, it's not quite going as planned. It's an extremely simple...
1
by: Generale Cluster | last post by:
hello, I've made a template which has the layout I want, but there is an undesired white space between the left elements and the right column. How can I remove it? Thank you Bye!! Here's the...
3
by: Simon Dean | last post by:
Hello! Im looking to try and get into CSS for formatting my sites. Seems like a nice premise, and should allow easier design for the future. But gees, Im having a hard time of it. I would...
38
by: Xah Lee | last post by:
sometimes i wish to add white space in <p> as to achived effects similar to tab. what should i do? using empty image seems the sure way but rather complicated. (and dosen't change size with...
8
by: chrisoftoday | last post by:
Hi, I'm having trouble with some white space that's appearing in my table. I can't seem to spot the problem, it'd be great if someone could help. The HTML code (ignore the PHP, it shouldn't be...
28
by: Alan Silver | last post by:
Hello, Here I am again with another "why does IE do that" question!! Please have a look at http://www.kidsinaction.org.uk/fd/homepage.html and see if you can work out why IE adds a one pixel...
4
by: asnowfall | last post by:
If I have white space in the <atag, IE interpretes it as line break. I tried setting "whie-space: pre" and it did not seem to affect. Here is a sample. ...
2
by: Jibran | last post by:
I need some help with extra spaces in HTML form. There is a big white space appearing at the center of the HTML form that I am designing even though there is no <br> tags been used: ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.