Blank line....painful

C

Clayburn

Okay, so I'm working on this website. It was done "professionally"
and now I'm stuck with the job of maintaining it. We'll likely be
redoing the entire thing, but in the meantime, I'm working on fixing
it up and updating it some.

One thing that keeps annoying me is this blank line that appears.
It's just below the Flash logo animation and right above the page's
welcome title. You can see a break in the background images of the
table cells.

Check it out here: http://www.gelbcenter.com/pages/home.htm

I've tried finding out what's wrong, changing alignment on things,
adjusting heights. Can't seem to get it to go away. Can anyone
figure this one out?
 
C

C A Upsdell

Clayburn said:
Okay, so I'm working on this website. It was done "professionally"
and now I'm stuck with the job of maintaining it. We'll likely be
redoing the entire thing, but in the meantime, I'm working on fixing
it up and updating it some.

One thing that keeps annoying me is this blank line that appears.
It's just below the Flash logo animation and right above the page's
welcome title. You can see a break in the background images of the
table cells.

Check it out here: http://www.gelbcenter.com/pages/home.htm

I've tried finding out what's wrong, changing alignment on things,
adjusting heights. Can't seem to get it to go away. Can anyone
figure this one out?

What browser? Which version?

I've looked at your page with FF and IE, and the page looks good. There
is a thick horizontal brown line below the H1 header, but this line
makes the page look nicer, and acts as an attractive separator between
the page title and the page content.
 
C

Clayburn

What browser?   Which version?

I've looked at your page with FF and IE, and the page looks good.  There
is a thick horizontal brown line below the H1 header, but this line
makes the page look nicer, and acts as an attractive separator between
the page title and the page content.

I just checked it in IE and it's fine. The problem occurs in
Firefox. It's not that noticeable. They've had it the same for two
years and nobody's said anything. But it just really annoys me and
I'd like to fix it if I can. It's just a light break in the images of
the trees, just below the animated logo.
 
R

rf

Clayburn said:
I just checked it in IE and it's fine. The problem occurs in
Firefox. It's not that noticeable. They've had it the same for two
years and nobody's said anything. But it just really annoys me and
I'd like to fix it if I can. It's just a light break in the images of
the trees, just below the animated logo.

See the little faint "Block" button there? This if firefox asking you if you
wish to block that flas animation. It inserts an <a> element to do this.
This is pushing the next block down a bit.

You will see the same but more noticable effect if you increase your font
size quite a bit, so the fax number falls below the flash.

Which idiot sliced the background image into little bits and put them in
different block elements? Join it back together and use it as a background
for the entire table.

I just noticed the tables. Do not expect fixed sized background images in
different cells to line up when content of unknown size is put in the cells.
 
R

rf

Clayburn said:
I just checked it in IE and it's fine. The problem occurs in
Firefox. It's not that noticeable. They've had it the same for two
years and nobody's said anything. But it just really annoys me and
I'd like to fix it if I can. It's just a light break in the images of
the trees, just below the animated logo.

Just noticed the same thing happens with IE. In this case it'll be something
like

</flash>
</td>

Notice the whitespace between the end of the flash and the end of the table
cell. You can verify this by changing your font size. Even though the
drezigners have supidlty specifed pixels for font size IE will still resize
that bit of whitespace or, er, lightbrownspace.

Same solution applies.
 
K

Kiran Makam

I just checked it in IE and it's fine.  The problem occurs in
Firefox.  It's not that noticeable.  They've had it the same for two
years and nobody's said anything.  But it just really annoys me and
I'd like to fix it if I can.  It's just a light break in the images of
the trees, just below the animated logo.

Your logo swf height is 134px but the TD containing the swf is having
a rendered height of 138px. May be spaces between tags inside TD is
causing this extra height. Remove space between embed and closing
object tag
 
K

Kiran Makam

I just checked it in IE and it's fine.  The problem occurs in
Firefox.  It's not that noticeable.  They've had it the same for two
years and nobody's said anything.  But it just really annoys me and
I'd like to fix it if I can.  It's just a light break in the images of
the trees, just below the animated logo.

Your logo swf height is 134px but the TD containing the swf is having
a rendered height of 138px. May be spaces between tags inside TD is
causing this extra height. Remove space between embed and closing
object tag
 
R

richard

I just checked it in IE and it's fine. The problem occurs in
Firefox. It's not that noticeable. They've had it the same for two
years and nobody's said anything. But it just really annoys me and
I'd like to fix it if I can. It's just a light break in the images of
the trees, just below the animated logo.


They paid for that piece of trash?
While the output may look good, the coding sucks royally.
Who the sam hell in their right minds codes in xhtml then relies on
tables for display?

I didn't see your problem right away until I enlarged the text and
then all kinds of strange things happen.

Dude, scrap the code and rewrite it.
It would appear that some idiot decided to position the navigational
links so that when text is enlarged, they stay put. I don't think I've
ever seen text do that inside a table before.

When you're done, charge the idiots double what they paid for it to
begin with.
 
C

Clayburn

Just noticed the same thing happens with IE. In this case it'll be something
like

</flash>
</td>

Notice the whitespace between the end of the flash and the end of the table
cell. You can verify this by changing your font size. Even though the
drezigners have supidlty specifed pixels for font size IE will still resize
that bit of whitespace or, er, lightbrownspace.

Same solution applies.

I like the idea of putting the image back together. I may do that.
But right now it's 1:00 am and I don't feel like doing anything that
requires work. I was hoping I could just delete or add some minor
code somewhere to fix it. I don't get what you mean by the </flash></
td> stuff. Are you saying it may be fixable by putting one or both of
those somewhere?
 
R

rf

Clayburn said:
I like the idea of putting the image back together. I may do that.
But right now it's 1:00 am and I don't feel like doing anything that
requires work. I was hoping I could just delete or add some minor
code somewhere to fix it. I don't get what you mean by the
</flash></ td> stuff. Are you saying it may be fixable by putting
one or both of those somewhere?

</object>
<!-- #EndEditable --></td>The whitespace between </object> and
</td>. There is a newline, a bunch of spaces and a comment. IE collapes all
of that (except the comment) into a single space. That is the space that is
causing the problem.Use </object></td> but you probably can't because of
your template.
 
A

Awful Dog Autry

Your logo swf height is 134px but the TD containing the swf is having
a rendered height of 138px. May be spaces between tags inside TD is
causing this extra height. Remove space between embed and closing
object tag
-------
<embed....></object>
--------
If this does not help remove all spaces between tags inside TD and
try.

- Kiran Makam

That did it, but strange, when I looked at it in ff Web Developer tool,
the closing embed tag was missing and it was in the source. Can't figure
that one.
 
C

Clayburn

That did it, but strange, when I looked at it in ff Web Developer tool,
the closing embed tag was missing and it was in the source. Can't figure
that one.

Well, I deleted the template element that was the logo. Hope that
doesn't screw anything up. I just removed the Template beginning and
ending tags for the logo, and deleted the whitespace between the </
embed> </object> and </td>. I don't think it matters that the logo is
no longer editable space since it appears the same on every page
anyway. But yeah, I think it's fixed. If anyonoe else notices any
problems or things I should fix, please let me know. I'll be
designing a new site, but in the meantime I need to optimize the
current one as best as I can.

Thanks for the help.
 
N

Nicole

Clayburn said:


I have Firefox.
Yes, it is ugly.

To find out what is wrong, you can try 3 ways:

1) very low hope:
Try setting in CSS - please check the correct syntax - like:
table-collapse-border:collapse;

2) high hope, low time:
Go in FF with the mouse above your elements and try "inspect element".
With this information you take away what you see.
e.g. "scroll" with the background-image and others.
Try until the problem is gone

3) sure way, long time:
backup the site and take every element away until the lines are gone.



And:
I love your site!!



Nicole,
http://TigerTradingClub.com
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top