Help - different browser sizes


I have built this website over the last 2 days and I ma v happy with it, but I notice everything moves around in different browsers.

How to do I ensure for example that the nav bar doesn’t move?



Hello Anna! Welcome to SPF :wave: First of all a very happy new year!

Can you be a bit more specific? I just saw the site in Opera, FF and IE but I didn’t see any significant difference in the menu (the one you gave as an example)

Off Topic:

You have a z-index issue with the collections sub menu

Happy New Year!

What I mean is that when I change the size of the browser window the menu collapses at the size of the screen.

What is the z issue in my collections part?

Sorry, very new to CSS. Used to use HTML alot before I had kids!

Thanks so much for your help.

Maybe try this setting in your CSS style sheet then specifically set each border, margin. outline and padding.


  * {border:0; margin:0; outline:0; padding:0}

Don’t give the menu a large left margin; instead remove that margin and float it right. You’ll need to see a width or a max-width on the header to do that though.

I susect you mean that when the browser window gets narrower, the menu items wrap underneath?

You could fix that by setting a width on the menu:

ul.pureCssMenu {
    display: block;
    float: left;
    [COLOR="Red"]width: 450px;[/COLOR]

When I try to move the mouse towards the third list item(folders), the menu disappears!

You should also split the image into 4 sections to make it load a little faster. I know, it’s not that big (file size) and it doesn’t really load slow, but for people with a ****** connection having the images split into 4 sections (can put the 4 pieces in a table) will make things load instantly. Just my opinion. :slight_smile:

You are all absolute stars!

Managed to try out all your advice and workout which one is going to work!

Thanks so much for the help

Actually I wouldn’t recommend that. Splitting a 60kb (for example) image into four 15kb images won’t actually make your page load any faster, it’ll probably do the opposite.

Because browsers can only handle so many http requests concurrently, by splitting the image into smaller ones you’re increasing the number of requests and slowing overall page loading time.

That’s why the image sprite technique - lots of images combined into one larger, single image - came into being: to help with reducing http requests and loading pages faster.