Page not showing correct in Firefox

Adding space between head.asp and default.asp

[morten44]

Hi again.
I have resolved an issue with allignement of banner in Firefox but introduced a new fault with big space between head.asp and default.asp only when shown in Firefox

Here you can see the code and the examples:

The front page consist of 2 pages
head.asp (banner and menu)
default.asp (content)
Its using a css page called style.asp

This is what happens

*************************************************
in style.asp i have:

#MenuBar{
position: absolute; top: 0; left: 0; height: 60;

*************************************************

*************************************************************************************************************************
in head.asp i have

<div id="MenuBar">
<table border="0" width="100%" bgcolor="<%= rsMenuStyle(1) %>" cellspacing="0" cellpadding="0" height="81">
<tr>
<td width="100%" align=center valign="top"><a href="default.asp"><img border="0" src="Files/Banner.jpg"></a></td>
</tr>
</table>
</div>
**************************************************************************************************************************

What happens in the browser?

If I open in IE it works fine
If i open in Firefox the banner is alligned to the left

I have then on another page using same system done the following change in

*******************************************************
style.asp:
#MenuBar{
//position: absolute; top: 0; left: 0; height: 60;
********************************************************
Now the page works fine in IE and Firefox when it comes to the Banner allignement
The page looks good in IE
But now i have a new fault in Firefox. The distance from the menu down to the content is to bog

There must be something i have to enter into one of the two files in order for it to show correct in Firefox

Does anyone have an idea where to look?

Kind Regards
Morten

[edited by: tedster at 2:44 am (utc) on Mar. 30, 2009]

[mattur]

[Mods: this should probably be moved to CSS]

Try putting a width on the absolutely positioned element.

#MenuBar{
position: absolute; 
top: 0; 
left: 0; 
height: 60; 
width: 100%;
}

I'd question whether you need to use position: absolute for your menu, since it's at the top of your markup anyway.

#MenuBar{
height: 60; 
}

Make sure you're using a full doctype to put IE into standards compliance mode.

Install the Firebug Extension for Firefox. It will enable you to inspect each page element and see the CSS rules that apply to it. Get your layout to work in Firefox first, then add any fixes required for IE using conditional comments.

[morten44]

Hi
Thanks for your answer. I will try to have a look into this over the weekend and feed back.
Thanks so far for taking time to respond

Kind Regards
morten

[morten44]

Hi again
That did resolve the issue.
It now works in the major 5 browsers!

Thanks alot for your help.
I have nearly gone mad over this i tell you.
Now i can start eating and shaving again :)

user everything incl height: 60;

Thanks again

Regards
Morten