|page not displaying correctly in Safari and Firefox |
firefox and safari are displaying incorrectly
| 9:33 pm on May 30, 2004 (gmt 0)|
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!
<Sorry, no personal URLs. See TOS [webmasterworld.com]>
[edited by: tedster at 9:39 pm (utc) on May 30, 2004]
| 9:53 pm on May 30, 2004 (gmt 0)|
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.
| 11:36 am on May 31, 2004 (gmt 0)|
This can happen if your pages start with something like;
but then you edit them in a WYSIWYG [google.com] editor which results in:
| 4:46 pm on Jun 1, 2004 (gmt 0)|
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!
| 6:18 pm on Jun 1, 2004 (gmt 0)|
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"
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"> <br /></td>
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?
| 6:24 pm on Jun 1, 2004 (gmt 0)|
Yep, all is correct.
| 6:33 pm on Jun 1, 2004 (gmt 0)|
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.)
| 6:39 pm on Jun 1, 2004 (gmt 0)|
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!
| 6:57 pm on Jun 1, 2004 (gmt 0)|
Try taking all content out of that table cell, including a space or and assign it a height.
| 9:02 pm on Jun 1, 2004 (gmt 0)|
Does your markup validate [validator.w3.org]?
| 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?
| 12:03 pm on Jun 2, 2004 (gmt 0)|
is actually text. It will render the same height as your text and override the space height designation. Leave it out.