Trouble with my page displaying

[Josh]

I am working on a site and I can't get the page to display correctly. The
URL of the temporary page that is under construction is
www.thesouthbeachhostel.com/FINAL-TEMPLATE2.htm. It displays fine in
Firefox 1.0 but in Internet Explorer 6 there is a mysterious gap between one
of the small images (curved design image) and the logo bar. There were
originally two gaps -- one on the top and one on the bottom -- but I started
to delete all of the extra spaces and line breaks in the code and the bottom
gap went away. I couldn't get rid of the top one. The site has gaps all
over the page in Netscape 6, but it displays. Netscape 4 seems ok. I don't
know about older versions of IE or Apple browsers. I've been working on
this problem for hours with no luck.

Any advice on how I can at least fix it so it displays correctly in IE5 and
6?

Thanks in advance.

 

[Blinky the Shark]

www.thesouthbeachhostel.com/FINAL-TEMPLATE2.htm. It displays fine in
Firefox 1.0 but in Internet Explorer 6 there is a mysterious gap between one
of the small images (curved design image) and the logo bar. There were
originally two gaps -- one on the top and one on the bottom -- but I started
to delete all of the extra spaces and line breaks in the code and the bottom
gap went away. I couldn't get rid of the top one. The site has gaps all
over the page in Netscape 6, but it displays. Netscape 4 seems ok. I don't

Bonus Checks: Okay Opera 7.23, Konqueror 3.1.4 both Linux.

 

[rf]

www.thesouthbeachhostel.com/FINAL-TEMPLATE2.htm.

Full points for supplying a working example of the problem without being
asked for one!

It displays fine in
Firefox 1.0 but in Internet Explorer 6 there is a mysterious gap between one
of the small images (curved design image) and the logo bar.

Turn all borders on:
* {border: solid 1px green;}
(I have a user style sheet that does this. Quite simple and easy).

You will note that the space is not part of the cell that contains that
image, it is above the table that cell is in.

Now turn on selective borders (or use different colours for each table). You
will eventually track down some whitespace in a cell somewhere.

</table></td>
no white spacce.

</table>
</td>
A newline. IE mistakenly treats single newlines in this situation as
whitespace.

BTW that HTML is so terribly layed out that I didn't explore exactly which
table/cell is causing the problem. I can hardly read it. Courtesy of
dreamweaver I suppose

BTW(2) you can get rid of all that dreamweaver generated mouseover stuff
that relies on javascript (and which doesn't appear to work in IE[1]) and
replace it with a couple of CSS rules. Much cleaner and easier and you won't
have bunches of images to download and make your page slow.

[1] correction, it does work when I turn javascript on

 

[Sid Ismail]

: I am working on a site and I can't get the page to display correctly. The
: URL of the temporary page that is under construction is
: www.thesouthbeachhostel.com/FINAL-TEMPLATE2.htm. It displays fine in
: Firefox 1.0 but in Internet Explorer 6 there is a mysterious gap between one
: of the small images (curved design image) and the logo bar. There were
: originally two gaps -- one on the top and one on the bottom -- but I started
: to delete all of the extra spaces and line breaks in the code and the bottom
: gap went away. I couldn't get rid of the top one. The site has gaps all
: over the page in Netscape 6, but it displays. Netscape 4 seems ok. I don't
: know about older versions of IE or Apple browsers. I've been working on
: this problem for hours with no luck.
:
: Any advice on how I can at least fix it so it displays correctly in IE5 and
: 6?


</a></td></tr></table><!-- end Navigation sub-table --></td><tr><!--
container table row 2 of 3 -->

You have </td> followed by <tr>

Have a look there?


Now it's ok:

</TD></TR></TBODY></TABLE><!-- end Navigation sub-table --></TD><!--
container table row 2 of 3 -->
<TD vAlign=top width=20 height=20><IMG height=20 alt=""
src="Miami Hostels - South Beach Hostel (hostal) in Miami Beach,
Florida - youth hostel in Miami_files/index_r2_c2.gif"

Sid

 

[Josh]

Thanks for that browser check...

don't

Bonus Checks: Okay Opera 7.23, Konqueror 3.1.4 both Linux.

--
Blinky Linux Registered User 297263

Upgrading From IE http://blinkynet.net/comp/upgrade.html
Mozilla Firefox http://www.mozilla.org/products/firefox/

 

[Josh]

Full points for supplying a working example of the problem without being
asked for one!

I learned my lesson last time I asked a question here
Thanks for your reply.

Turn all borders on:
* {border: solid 1px green;}
(I have a user style sheet that does this. Quite simple and easy).

You will note that the space is not part of the cell that contains that
image, it is above the table that cell is in.

Now turn on selective borders (or use different colours for each table). You
will eventually track down some whitespace in a cell somewhere.

</table></td>
no white spacce.

</table>
</td>
A newline. IE mistakenly treats single newlines in this situation as
whitespace.

I was starting to suspect that my new lines were causing the problems.
That's why the code is all clumped together -- I started to delete all the
spaces everywhere.

BTW that HTML is so terribly layed out that I didn't explore exactly which
table/cell is causing the problem. I can hardly read it. Courtesy of
dreamweaver I suppose

I spent a long time laying the HTML out in an organized and commented way
but I couldn't get the site to work until I started deleting spaces.

BTW(2) you can get rid of all that dreamweaver generated mouseover stuff
that relies on javascript (and which doesn't appear to work in IE[1]) and
replace it with a couple of CSS rules. Much cleaner and easier and you won't
have bunches of images to download and make your page slow.

I wish I could do it in CSS but I am just learning CSS so I don't really
know how. If I do it in CSS will it display in all the browsers?

 

[Josh]

: I am working on a site and I can't get the page to display correctly. The
: URL of the temporary page that is under construction is
: www.thesouthbeachhostel.com/FINAL-TEMPLATE2.htm. It displays fine in
: Firefox 1.0 but in Internet Explorer 6 there is a mysterious gap between one
: of the small images (curved design image) and the logo bar. There were
: originally two gaps -- one on the top and one on the bottom -- but I started
: to delete all of the extra spaces and line breaks in the code and the bottom
: gap went away. I couldn't get rid of the top one. The site has gaps all
: over the page in Netscape 6, but it displays. Netscape 4 seems ok. I don't
: know about older versions of IE or Apple browsers. I've been working on
: this problem for hours with no luck.
:
: Any advice on how I can at least fix it so it displays correctly in IE5 and
: 6?


</a></td></tr></table><!-- end Navigation sub-table --></td><tr><!--
container table row 2 of 3 -->

You have </td> followed by <tr>

Have a look there?


Now it's ok:

</TD></TR></TBODY></TABLE><!-- end Navigation sub-table --></TD><!--
container table row 2 of 3 -->
<TD vAlign=top width=20 height=20><IMG height=20 alt=""
src="Miami Hostels - South Beach Hostel (hostal) in Miami Beach,
Florida - youth hostel in Miami_files/index_r2_c2.gif"

Sid

Thanks for pointing that out. I wonder why it didn't show up when I
validated the page...

 

[Josh]

One more question about the page -
www.thesouthbeachhostel.com/FINAL-TEMPLATE.htm: does anyone know why
Dreamweaver/Fireworks insterted a "shim row" into the code? It's a couple
of lines below the <body> tag. The width of the content should be 750
pixels but Fireworks or Dreamweaver added a "shim row" with some spacer.gif
images and the width adds up to 751 pixels with a height of 1 pixel. Can I
just delete this shim row?

Any ideas?

 

[rf]

One more question about the page -
www.thesouthbeachhostel.com/FINAL-TEMPLATE.htm: does anyone know why
Dreamweaver/Fireworks insterted a "shim row" into the code? It's a couple
of lines below the <body> tag. The width of the content should be 750
pixels but Fireworks or Dreamweaver added a "shim row" with some spacer.gif
images and the width adds up to 751 pixels with a height of 1 pixel. Can I
just delete this shim row?

If you don't want it then yes. This is one of the stupid things these
WYSIWYdontG editors.

You own the HTML, not dreamweaver

Any ideas?

Delete dreamwaever?

 

[Josh]

Can

If you don't want it then yes. This is one of the stupid things these
WYSIWYdontG editors.

You own the HTML, not dreamweaver

I was just wondering if the shim row had a purpose. They must have
programmed it to add the shim row for a reason? (or not?)

Delete dreamwaever?

Normally I would try to code everything by hand but I had just a couple of
days to make this site and am still relatively slow at it. I can't write
javascript rollovers yet so I get Fireworks to do it for me...

 

[Mark Parnell]

I can't write
javascript rollovers yet so I get Fireworks to do it for me...

Why not use CSS instead?

 

[Josh]

Why not use CSS instead?

I would love to learn how to do that. Will they display properly in all the
browsers?

 

[Mark Parnell]

Previously in alt.html, Josh <[email protected]> said:

[CSS rollovers]

I would love to learn how to do that. Will they display properly in all the
browsers?

Depends on what you mean by "all".

Probably more than the JavaScript ones will. Plus then you can actually
use text instead of pictures of text. NS4 is the only "major" browser
that they won't work in, and it is only rarely used these days. Plus,
the rollovers aren't essential to the content of the site, surely?