page not displaying correctly in Safari and Firefox - Firefox Browser Usage and Support forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

page not displaying correctly in Safari and Firefox

firefox and safari are displaying incorrectly

jason_mc99

9:33 pm on May 30, 2004 (gmt 0)

10+ Year Member

Hi,

I've got a website that uses an SSI file as the header for each page.

When I view certain pages, the header displays correctly, but when I view others, the header doesn't seem to line up with the top of the page, and it uses too much vertical space. I have this problem with both Firefox 0.8 and Safari 1.0.2. The problem does NOT appear in Internet Explorer, which makes me think it's a problem with my page and not the browser.

Here's an example:

Some pages load correctly. If you see the navigation links at the top, the vertical space between them is small - just what I was looking for.

However, on my About Us page, you will see that the spacing between the row that contains 'home Ś about us' etc. is larger on the "about us" page than it is on others.

The thing is, the table that contains that header comes from the same file! I've viewed source, and all the margins and cellpadding/spacing are the same.

I can't figure out for the life of me why the vertical spacing is different between the 'about us' and the other pages on Safari or FireFox; if anyone could shed some light on this situation, I would really appreciate it!

Thanks,
Jason

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

[edited by: tedster at 9:39 pm (utc) on May 30, 2004]

tedster

9:53 pm on May 30, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

What DTD are we talking about here? And do any of the pages use external CSS?

Given that Firefox is one of your problematic browsers, I'm inclined to think that this is an issue of Standards mode vs. Quirks mode in some way.

One thing's for sure, something definitely is different between the two types of pages.

dcrombie

11:36 am on May 31, 2004 (gmt 0)

This can happen if your pages start with something like;

<?PHP 
 include "header.inc"; 
?>

but then you edit them in a WYSIWYG [google.com] editor which results in:

<P><?PHP 
 include "header.inc"; 
?></P>

or similar.

MatthewHSE

4:46 pm on Jun 1, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Just a tip - Safari and FireFox are almost undoubtedly displaying the page correctly. If there's one thing you can count on, it's that FireFox will render a page correctly according to what the code actually is, which may be different than what you wanted the result to be. If Mozilla, Safari, FireFox or Netscape 7 show something different than what IE shows you, assume that IE is wrong.

And Welcome to Webmaster World!

jason_mc99

6:18 pm on Jun 1, 2004 (gmt 0)

10+ Year Member

Hey everyone,

Thanks for the words of welcome!

I've narrowed down the problem - with tedster and Matthew's help, I've figure out that it's a problem with quirks mode/standards mode. If I use this DTD at the top of the page:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Then I get the unexpected behaviour. So I understand that Safari and FireFox (and I'm sure Opera, too, though I haven't tested it) are displaying this page exactly as the standards say they should.

Basically, I'm convinced that this is the problem - I have a <tr> row that has a space in it - I'm using it as a vertical spacer. I'm trying to set the line-height to 4px because I don't need a huge vertical space - just a tiny bit.

Here's my HTML:


 <tr class="content" align="center" valign="middle" style="line-height:4px">
  <td vAlign="top" align="center" colspan="9">&nbsp;<br /></td>
 </tr>

It displays correctly in quirks mode, but in standards mode, it seems to ignore the line-height that I tell it to use.

Am I doing something wrong?

monarch

6:24 pm on Jun 1, 2004 (gmt 0)

10+ Year Member

Yep, all is correct.

MatthewHSE

6:33 pm on Jun 1, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

I don't think you can specify align, valign or line-height on a <tr>. Don't those have to go on the <td>'s instead? (Come to think of it, line-height might be inherited; never have tried applying much to a <tr> because there's so much that can't be used with it.)

jason_mc99

6:39 pm on Jun 1, 2004 (gmt 0)

10+ Year Member

I don't know - I can't figure it out. I tried applying the line-height to the <td>, I tried putting a <p> inside the cell with a line-height of 4px, but I can't make that blank line any smaller in standards mode!

MatthewHSE

6:57 pm on Jun 1, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Try taking all content out of that table cell, including a space or   and assign it a height.

DrDoc

9:02 pm on Jun 1, 2004 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Does your markup validate [validator.w3.org]?

dcrombie

9:24 am on Jun 2, 2004 (gmt 0)

Why don't you scrap that line entirely and just apply 4px vertical margin or padding to the previous or following element?

matkat

12:03 pm on Jun 2, 2004 (gmt 0)

10+ Year Member

  is actually text. It will render the same height as your text and override the space height designation. Leave it out.