IE8 div inside a div inside a div = white space.

[nico-t]

I just love this about making a new site. Well here's the problem ive been struggling for the last hour.
In FF everything works as it should, ofcourse. IE8 adds about 10 pixels of space on top of the text. Here is the html:

<div id="main"> <!--div main starts-->
<div id="content"> <!--div content starts-->
<div id="insidecontent"> <!--div insidecontent starts-->
Text blablabla
</div> <!--div insidecontent ends-->
</div> <!--div content ends-->
</div> <!--div main ends-->

All divs in the css have:
margin: 0px;
padding: 0px;

So why does IE8 add this white space to the top of the text? When i put text in the first and second div there is no white space at all, but in the third div there is.

[pstation]

try putting the </div> at the end of the text without any newspace or newlines

[nico-t]

doesnt work

[HighEnergy]

It helps (crossbrowser results) to include everything in the body tag first.
body {
font-size: whatever;
line-height: whatever;
letter-spacing: whatever;
etc
etc
etc
}

Also, for paragraph & header text, margin, padding
h1 {font-size: whatever; margin:whatever; padding: whatever;}
h2 {font-size: whatever; margin:whatever; padding: whatever;}
h3 {font-size: whatever; margin:whatever; padding: whatever;}
h4 {font-size: whatever; margin:whatever; padding: whatever;}

p {margin:whatever; padding: whatever;}

You'll get more predictable crossbrowser results getting in that habit.

[The Truth Hurts]

i took your code exactly as you posted it and it's looks identical in EVERY browser.
so you've apparently got something else going on.

[JamesK]

I think the 10 pixels comes from the text inside the div. the P element (paragraph) is creating a margin. could be a heading (h1, h2 etc) aswell.

either add this to that element (p, h1 whatever):

style="margin-top:0;"

or this to your css file

.firstitem { margin-top: 0; }

AND this to the element

class="firstitem"

[nico-t]

yea the code posted wasnt the whole code, theres also a sidebar and that was screwing things up.. i made dozens of wordpress sites and didnt encounter this before so thats why i didnt post it.
Anyway, i put a 1px dot, line height 0px, in the first div like this:

<div id="main"><p class="smalldot">.</p><div id="content"><div id="insidecontent">

and this somehow aligns all divs and texts the right way. Thanks for your efforts peeps.

[CPimp]

Your beginning and end tags need to be on the same line if you dont want white space. IE8 appends an "Empty Text Node" in the source code if it detects line breaks that you use in your code, meaning when you use a plain text editor and try to keep your code clean and separate lines, it thinks there's an empty text line there. I bitched and bitched about it till I decided to tinker around with it, put ALL my div contents on one line, and it worked like a breeze.

[potter]

I will guarantee it's either a line height issue, or it's simply the way the text is displayed on the other browser.

FYI: Text looks different on every browser. For example, 12px Verdana does NOT look exactly the same between all the browsers. Which could be what you are seeing.