top menu dissapearing in IE

[03SF06]

hello,

my recently finished website http://www.purephotography.nl works pretty good and in also in all the browser shots provided by browsershots.org, (Safari Firefox, IE 6 and 7)

but some users are losing the the top menu bar in the website in their browser, would anyone with a browser less than IE 7.0 be willing to test my site and maybe be so kind to provide me with a tip or two to make the menu re-appear?
(it works fine in safari, Firefox and IE 7.0 that I have tested.)

Thank you so much for your time!

my css file: http://www.purephotography.nl/stylesheets/main.css

my main home page: (I have the entire website load in an iframe, however,
if I load the regular homepage the menu is still not there.)
http://www.purephotography.nl/home.shtml

thank you so much for your time!

[TheJoshMan]

I'm not seeing a "top menu" in FF3

[TheJoshMan]

change this in the file "main.css":



#container {
height:600px;
left:50%;
margin-left:-450px;
margin-top:150px;
position:relative;
top:50%;
width:900px;
}

[03SF06]

so you think that's the issue? That I tried to center the background?

this is a real question that keeps on bugging me, is that why did it show up in the screen shots?

I get errors in my inspector about this part:

<li class="sub"><a href="trouwen/index.shtml" id="trouwenli"><h1>trouwen</h1><div class="mlogo"></div></a></li>

do you think that might be related to the issue?

[TheJoshMan]

I'm not sure, what resolution are you viewing the site at? 1024? 1280? In either case, you need to get rid of the negative "top" attribute. Instead of "-300px" try putting in something like "15px"

[03SF06]

Nyne Lyvez, would you mind checking if it works now?

[TheJoshMan]

just checked it in FF3, and it's visible now... but still needs to come down some.

If you tried what I said about using "15px" for the "top" attribute, then try using something like "30px"... That should bring it down far enough to see.

[TheJoshMan]

Just viewed in IE7 as well, same thing. It's visible, but not completely. Still needs to come down just a little bit.

[03SF06]

I actually found coding erromy css file, so that's what made is show up slightly, I'll look at your suggestion too though!

[TheJoshMan]

Ok, give this a try and see what you think.

You are making it more difficult on yourself because you are defining the "top" attribute as "50%" while defining "margin-top" as "-300px". To save yourself the headache, simply replace your corresponding CSS with this:



#frame {
height:600px;
left:50%;
margin-left:-450px;
margin-top:0;
position:absolute;
top:15px;
width:900px;
}


Also, due to the fact that not everyone who views your site will be using a high screen resolution, having the body set to "overflow:hidden;" really is a bad idea. Though there are nowhere near as many nowadays as there used to be, there are still people who use 800x600 resolution. If you have the site set to overflow:hidden at that resolution, they would hardly see ANY of your site because they wouldn't be able to scroll down to it.

I would recommend changing it from



body{
overflow:hidden;
}


To this:


body{
overflow:auto;
}


Or you could just not give it a value at all... If you don't define it, then you leave it up to the browser to interpret and make the decision to scroll or not scroll.