CSS javascript header issue

[adpk77]

please see this site.
mazarspayroll.in

The page loads fine but whenever user moves the mouse over the services or downloads link on the top menu, a gap is created between tyhe header and navigation bar.

Previously the header image used to repeat itself which is not required. So i set the header image to no-repat within the css file. Instead now it does not repeat but creates that extra space or gap.

css code for those elements are below.

#head {
background:url("images/header.jpg") no-repeat scroll 0 0 transparent;
font-size:0.7em;
margin:15px auto 0;
padding:0;
width:960px;
}

#navbar {
background:url("images/navbar.png") no-repeat scroll 0 0 #2C2C2C;
margin:15px auto 0;
padding:0 10px;
text-transform:uppercase;
}

Using firefox and firebug. how do i sort this out? The other thing is that the services or download links are using javascript code to reload the page. Basically i wanted that if user clicks services or download links they they should be on that smae page so set it to page reload. This may be also causing that problem.

The links to those 2 menu items is set as javascript:this.location.reload();

is this causing the problem? problem is only in firefox and not in internet explorer 8.

 

[feherke]

Hi

whenever user moves the mouse over the services or downloads link on the top menu, a gap is created between tyhe header and navigation bar.

I noticed no gap. Also using FireFox. Could you show us a screenshot of that gap ? ( I attached what appears here. )

The links to those 2 menu items is set as javascript:this.location.reload();

Why not a single hash ( # ) character ?

Feherke.

http://free.rootshell.be/~feherke/

 

[adpk77]

see this link.

http://mazarspayroll.in/mazars.jpg

 

[adpk77]

you also mentioned about a single hash ( # ) character. please explain.

 

[adpk77]

i saw the attachment.
do u notice the gap between the nav bar and header where the logo is.

 

[feherke]

Hi

You wrote :

whenever user moves the mouse over the services or downloads link

But the gap you are mentioning now is always present. So is it permanent or appears only on mouse over ?

Anyway, there is a practically unused [tt]div[/tt] with [tt]id[/tt] banner-region. Removing it seems to make the gap disappear.

Note that you can expect to get the rendering as you want only if you provide the markup as the browser expects.

[highlight #EAEBEE] Result: [/highlight] 50 Errors, 1 warning(s)

Feherke.

http://free.rootshell.be/~feherke/