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?
8 2418
Try this: - body {
-
margin:0;
-
padding:0;
-
}
-
Hope it helps, Thanks, Death
Try this: - body {
-
margin:0;
-
padding:0;
-
}
-
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.
Post all of your code, the HTML, CSS all of it.
Thanks, Death
Post all of your code, the HTML, CSS all of it.
Thanks, Death
This is what I'm looking at right now. -
-
<html>
-
-
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
-
-
<!--Wraps all divs to adjust to center of screen-->
-
-
<div class="divWrapper">
-
-
<div class="pageBorder">
-
-
<head>
-
<link rel=stylesheet href="style.css" type="text/css" media=screen>
-
</head>
-
-
<body class="bodyFormat">
-
-
<div class="titlebox">
-
-
<img src="images/logo.bmp" alt="Wines-to-Go" align="left" />
-
<a id="company">Wines-to-Go</a>
-
-
</div>
-
-
<div class="navbarbox">
-
-
<div class="navbartext">
-
-
<a id="home" href="">Home</a>
-
<a id="media" href="">Media</a>
-
<a id="products" href="">Products</a>
-
<a id="info" href="">Information</a>
-
<a id="contact" href="">Contact</a>
-
-
</div>
-
-
</div>
-
-
<div class="contentBlock">
-
<div class="leftColumn">
-
</div>
-
-
<h2 style="margin-top:10px;">Homemade Wine... Made Easy</h2>
-
<hr style="width:300px;" />
-
-
<div class="contentText">
-
<p> Welcome to the Wines-to-Go website,
-
your source for information all on all things winemaking.
-
You will find all kind of information regarding the winemaking
-
prcoess as well as what makes us different. 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="contentBox">
-
-
<h4>Specialty Kits at Low Prices</h4>
-
<img src="images/red.gif" alt="Specialty Kits" style="background-color:white; border:1px solid black;" />
-
-
</div>
-
-
</div>
-
-
</div>
-
-
<div class="copyright">
-
<div class="copyrighttext">
-
<hr style="width:400px;"/>
-
<p>Copyright © 2007 Wines-to-Go. All rights reserved.</p>
-
-
</div>
-
-
</div>
-
-
</body>
-
-
</div>
-
-
</div>
-
-
</html>
-
-
and the CSS
Still a work in progress, looks like I need to clean up my spacing.
Thanks
-> PunchBack
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.
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
Ok, so with the corrections made, post that markup. Do you have a link?
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. -
-
<!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="divWrapper">
-
-
<div class="pageBorder">
-
-
<head>
-
<link rel=stylesheet href="style.css" type="text/css" media=screen>
-
</head>
-
-
<body class="bodyFormat">
-
-
<div class="titlebox">
-
-
<img src="images/logo.bmp" alt="Wines-to-Go" align="left" />
-
<a id="company">Wines-to-Go</a>
-
-
</div>
-
-
<div class="navbarbox">
-
-
<div class="navbartext">
-
-
<a id="home" href="">Home</a>
-
<a id="media" href="">Media</a>
-
<a id="products" href="">Products</a>
-
<a id="info" href="">Information</a>
-
<a id="contact" href="">Contact</a>
-
-
</div>
-
-
</div>
-
-
<div class="contentSurround">
-
-
<div class="leftColumn">
-
</div>
-
-
<div class="contentBlock">
-
-
<h2 style="margin-top:10px;">Homemade Wine... Made Easy</h2>
-
<hr style="width:300px;" />
-
-
<div class="contentText">
-
-
<p> Welcome to the Wines-to-Go website,
-
your source for information all on all things winemaking.
-
You will find all kind of information regarding the winemaking
-
prcoess as well as what makes us different. 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="contentBox">
-
-
<h4>Specialty Kits at Low Prices</h4>
-
<img src="images/red.gif" alt="Specialty Kits" style="background-color:white; border:1px solid black;" />
-
-
</div>
-
-
</div>
-
-
</div>
-
-
</div>
-
-
<div class="copyright">
-
-
<div class="copyrighttext">
-
-
<hr style="width:400px;"/>
-
<p>Copyright © 2007 Wines-to-Go. All rights reserved.</p>
-
-
</div>
-
-
</div>
-
-
</body>
-
-
</div>
-
-
</div>
-
-
</html>
-
-
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
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>...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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.
...
|
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: ...
|
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...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
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...
|
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...
|
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...
|
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...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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
|
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...
| | |