GoFuckYourself.com - Adult Webmaster Forum

GoFuckYourself.com - Adult Webmaster Forum (https://gfy.com/index.php)
-   Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)
-   -   IE8 div inside a div inside a div = white space. (https://gfy.com/showthread.php?t=953127)

nico-t 02-10-2010 05:05 PM

IE8 div inside a div inside a div = white space.
 
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 02-10-2010 05:19 PM

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

nico-t 02-10-2010 05:29 PM

doesnt work

HighEnergy 02-10-2010 05:38 PM

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 02-10-2010 05:40 PM

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 02-10-2010 05:48 PM

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):
Code:

style="margin-top:0;"
or this to your css file
Code:

.firstitem { margin-top: 0; }
AND this to the element
Code:

class="firstitem"

nico-t 02-10-2010 05:58 PM

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 02-10-2010 06:09 PM

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 02-10-2010 07:19 PM

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.


All times are GMT -7. The time now is 04:26 PM.

Powered by vBulletin® Version 3.8.8
Copyright ©2000 - 2025, vBulletin Solutions, Inc.
©2000-, AI Media Network Inc