Please test this website for me

**03SF06** · 10-25-2008, 06:44 PM

Hello,

I have worked on this website for a while now, and it seems like it all works, I have tested it on browsershots.org and it looked like it worked fine.

But it doesn't. The website is live, and my friend keeps on getting comments that the menu on top is missing and so they can't click it.

It's inconsistent, sometimes it's FF, sometimes IE always on windows based machines though...

Can you please take the time to test it in the browser(s) you use to help me figure out what's going on?

Thanks so much for your time!

http://website link

**TheJoshMan** · 10-25-2008, 06:50 PM

I distinctly remember trying to help you with this site quite a while back.

The problem is still now as it was then, you are using "margin-top:-300px" for your main container... This is resulting in the container being pushed up (and in some cases depending on screen resolution, out of the viewport)

You should use this instead.

Code:

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

**03SF06** · 10-25-2008, 08:09 PM

that's right!

then I found an error in my css and hoped that fixed it and in my busy-ness this issue got pushed to the background...

I just did what you said, and see no difference in my browsers, (which is a good thing) do you see any improvement?

thanks for your time!

**TheJoshMan** · 10-25-2008, 08:23 PM

sorry, i suppose i worded my response wrong... it's not necessarily your "main" container... it's the div with the ID "frame" which you need to apply those styles i posted to.

Code:

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

As it is with the container you put the styling into, it is still off by a bit. I tested that set of styles using the <div id="frame"> rather than <div id="container">

**03SF06** · 10-25-2008, 08:31 PM

okay, so I adjusted in index.html which has the frame div in there and changed main.css back to its original settings...

but now, it aligns at the top, my friend really wants it aligning in the middle (yeah and that's what got this all started)

but is the menu now visible as it should?

**03SF06** · 10-25-2008, 08:52 PM

I changed the container div layout to (in main.css) :

#container {
position: absolute;
width: 900px;
height: 600px;

and changed the top margin to 50px for #frame so it gets off the top border a little.

Is the menu fixed?

**TheJoshMan** · 10-26-2008, 04:20 AM

yes, the menu is fixed... however, there is a section at the bottom which is being cut off now.

Your friend needs to realize that the entire layout is far to large to be a "static layout" and be visible on all screen resolutions.

If you want the menu AND the things at the bottom to be visible and have the layout centered vertically, you'll need to make the large image smaller and thus make the containing div smaller

**03SF06** · 10-26-2008, 03:29 PM

could you describe how much is being cut off? or post a screen shot?

thanks so much for your help!

**TheJoshMan** · 10-26-2008, 04:10 PM

here's what I see at 1280x800 resolution:

**Medyman** · 10-26-2008, 04:37 PM

One thing to keep in mind, 03SF06, is that Josh (Nyne Lyvez) has 76 toolbars in his normal viewing port. That shouldn't be the experience you want to optimize the site for. The fact is that you won't be able to design a website that displays optimally to everyone. You can only try to code for the most common use cases.

I tested your website through our testing suite (a range of the most common browsers/configurations). If you were to move the site up approx 20 pixels, it would be work as desired for the 1024 x 768 resolutions and above. This assumes no more than 1 toolbar (say, bookmarks), the status bar, the Windows task bar shown (no auto-hide enabled) and a maximized browser window.

If your attempt is to show it people with lower resolutions and/or viewports, do as Josh says and reduce the size of the image.

On a different note, I suggest you download Firefox and the Web Developer toolbar. It'll allow you to resize the viewport to the most common configurations. I've actually tested using those system settings. But, if you don't have that ability, the web developer toolbar allows you to get a general idea of how the site will resize. It'll make your workflow much faster!