extra white space in template....font problem? 2

[RISTMO]

Hey guys,

I don't have any clue why this won't work...I've done everything I can think of to fix this, but to no avail....

http://www.signmart.com/problem_page/problem_page.html

Right below the green menu bar and above the blue one...see the white space? How can I get rid of this? I've been working on this for the last two days...it has to be something really obvious or else I would have seen it by now....and if it is that obvious I'm probably too familar with this code to catch it. Can someone take a look at this for me and show me what to fix?

Oh yeah--the funny thing is that this problem only exists when I have the "homepage" or some other text in there. If I take it out, it works great. But the font-size is only 6px, so I can't see how that's affecting it...

Thanks a lot!

Rick
P.S. A star goes to whoever can solve this first.

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/

 

[Vragabond]

The problem is interaction between the image and text in that table cell. Since nothing is specified, browsers render it with default behaviour, which is text flowing after the picture. This will, no matter what (since the table cell is 44px high and so is the image) generate extra space at the bottom. There are a couple of solutions available:

<td style="width:522px;height:44px;background-image:url('[URL unfurl="true"]http://www.signmart.com/problem_page/images/menu_bg.gif');background-repeat:repeat-x;"[/URL] valign="top" style=""><img src="[URL unfurl="true"]http://www.signmart.com/problem_page/images/menu_left.gif"[/URL] [b]style="vertical-align: top;"[/b] />homepage</td>

This is my favourite one. It eliminates the gap in IE6, Mozilla and Opera and behaves the same in all three of them. I also tried vertical-align: middle; but IE got a little confused, although the result was generally a little nicer. If this does not give you enough flexibilty, you could also try with align="left" hspace="0" as an old html solution or style="float: left; margin: 0;" as a CSS solution (has some problems with the margin in IE). Personally, I would keep playing with vertical-align until you find the value that works for you (baseline, sub, super, top, text-top, middle, bottom, text-bottom).

 

[ChrisHunt]

Yeah, vertical alignment is the problem. By default, browsers align images so that the bottom of the image aligns with the baseline of neighbouring text - allowing room below for the descenders in the p and the g. Using the CSS vertical-align property ( see

http://www.w3schools.com/css/pr_pos_vertical-align.asp

) should fix it - "top" apparently works, "bottom" should work too.

-- Chris Hunt

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[RISTMO]

You guys are AWESOME. I'd tried vertical-align:top; in the style for the <td>, and it didn't work...I never thought to put it in the <img>'s style. In the end, this is the code I used:

<td style="width:522px;height:44px;background-image:url('images/menu_bg.gif');background-repeat:repeat-x;" valign="top"><img src="images/menu_left.gif" style="vertical-align:top;"><span style="height:30px;padding-top:14px;">homepage</span></td>

Thanks a ton!

Rick

http://www.ristmo.com/

http://www.arabchurch.com/

http://www.cashfutures.com/

http://www.word-tools.com/