font height and text node misbehavior 1

[ESquared]

I'm simulating an explorer-style interface where there are nodes with plus signs or minus signs next to them, and vertical dotted lines joining everything. I need there to be no space between each line of text.

If I have the following:

<DIV><A HREF="#" onclick="blah();"><IMG src="plug.png"></A></DIV>
<DIV><A HREF="E" onclick="blah();"<IMG src="plus.png"></A></DIV>

these two images (21 wide by 16 high) will touch each other.

But the moment I put a text node after them inside the DIVs (or other element, could be a P for example) they become separated from each other by 2 or 3 pixels (IE or firefox). I can make the font 5px high and it makes no difference. Line-height appears to do nothing at all in IE or firefox (I have to be doing something wrong). If I adjust the height of the image to less than actual, each line does become closer together, making it seem like the height of the line is coming from the image but the spacing is coming from the text.

First, could you help me understand why text nodes are doing this and second, how do I fix it? I'm about to experiment with more DIVs inside the outer one, but why is that even necessary?

I've found Dave's Inline Box Model helpful in understanding how fonts are laid out in browsers, but I haven't figured this one out yet.

Putting a negative bottom margin on the text doesn't help.

I have the following css declarations in my document:

html {
font-family:Tahoma, sans-serif;
font-size:12px;
}
html, div, form, img, table, td, th, p {
border:none;
margin:0px;
padding:0px;
}
body {
padding:4px;
}


A secondary item is that the text is aligned incorrectly (too low) and I can fiddle around with correcting that, but I need to solve the other thing first.

 

[BillyRayPreachersSon]

It could be due to whitespace, which you can quickly test for by either putting your div elements on one line, or closing each div on the following line, i.e:

<div>some code</div
><div>some code</div
><div>some code</div>

If not whitespace, then you could explicitly give each div the correct height, and set the overflow to hidden using CSS:

<style type="text/css">
.nodeRow {
   height: 16px;
   overflow: hidden;
}
</style>

...

<div class="nodeRow">some code</div>
<div class="nodeRow">some code</div>
<div class="nodeRow">some code</div>

You might even find you need to remove the whitespace and use the overflow CSS.

Give those a whirl and see what happens - they're the most common causes of extra space.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Another option would be to use a pre-built tree, for example, the highly-configurable (but little-promoted) Joust Outliner:

http://www.ivanpeters.com/

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[fatlardo]

There are a couple of things you could try:

Firstly, assuming you will have text by every + sign, change the margin or padding to a minus figure. I'm not sure if this will work. I haven't used these properties much in the past!

If that doesn't work you can try absolutely positioning your div's. The following code will position your two div's at (50,10) and (50,20) (50 pixels from the left of the screen and 10 (or 20) from the top)

<DIV style="position:absolute;left:50px;top:10px"><A HREF="#" onclick="blah();"><IMG src="plug.png"></A></DIV>
<DIV style="position:absolute;left:50px;top:20px"><A HREF="E" onclick="blah();"<IMG src="plus.png"></A></DIV>

Hope it helps

Gary

 

[monksnake]

First, could you help me understand why text nodes are doing this

If you outline the divs you will see that the extra space is added underneath each image. I guess the default behavoir is for the image to sit where the writing "line" would be and so it has to allow for letters that go below the line like jgqp, so it adds spacing. For some reason it's treating the image as if it's part of the text line.

how do I fix it?

Setting your img tags vertical-align: top, bottom, or middle will put them back together in IE6, I really have no idea why.



<.

 

[ESquared]

Thanks everyone for your ideas.

Monksnake,

That's it! I knew I was on the right track with Dave's Inline Box Model but kept thinking in terms of the text. Now thinking about the image sitting on the baseline... that's got to be what's happening. Thank you for solving the puzzle. Have a star.

My "secondary" question was also not secondary, it was part and parcel of what was going on. I sort of wondered that, but couldn't know for sure.