Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: incrediBILL
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]
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.
And Welcome to Webmaster World!
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?