...

View Full Version : Weird spaces between divs



wdroush
11-25-2009, 11:56 PM
I can't begin to explain why.

With spaces:


<div id="content">
<!-- End template File: header.php -->

<!-- Begin template File: index.php -->
<div id="greenspace">
<div><img src="http://172.16.100.20/development/cfpg/images/header.png"></div>
</div>
</div>


Without:


<div id="content"><div id="greenspace">
<!-- End template File: header.php -->

<!-- Begin template File: index.php -->
<div><img src="http://172.16.100.20/development/cfpg/images/header.png"></div>
</div>
</div>


Line break (before content)


<!-- End template File: header.php -->

<!-- Begin template File: index.php -->
<div id="content"><div id="greenspace">
<div><img src="http://172.16.100.20/development/cfpg/images/header.png"></div>
</div>
</div>


Now for the weird one... line break in this one (two files, comment processing removed):


<div id="content"><div id="greenspace">
<div><img src="http://172.16.100.20/development/cfpg/images/header.png" /></div>
</div>


And even weirder:


<div id="content">
<!-- End template File: header.php -->

<!-- Begin template File: index.php -->
test<div id="greenspace">
<div><img src="http://172.16.100.20/development/cfpg/images/header.png"></div>
</div>
</div>

"test" shows up in the gap between the two divs.

I simply cannot explain why.

Now, As you can probably tell by the comments, these are PHP scripts combining together... but this is a browser behavior issue, any ideas?

The space is just a blank text line, I could do a top:-22px; hard code, but different sizes of text messes that up.


Edit:
heh, because #content doesn't hold direct content (ex: text should be in elements) font-size:0; fixes it... kinda... no text now, but proof of concept (blank text line).

IE and Firefox (oh look IE does something other browsers do too!).


Well floating greenspace left fixed it in firefox, IE is still freaking out.

abduraooft
11-26-2009, 12:27 AM
Now for the weird one... line break in this one (two files, comment processing removed):

<div id="content"><div id="greenspace">
<div><img src="http://172.16.100.20/development/cfpg/images/header.png" /></div>
</div>
lol, it's that mysterious gap (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps)!

wdroush
11-28-2009, 07:49 PM
lol, it's that mysterious gap (https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps)!

Wasn't using strict, and was using divs. (no tables whatsoever on the page)

Floating all the divs fixed the issue in all browsers but IE, IE has a top-margin:-XXpx to fix the problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum