Website can't scroll down..bugs?

[Keren_1]

www.kerennma.com

This is the website. When i'm on the "Work", the page doesn't scrolls down, it only works when i click on to another tab and come back to this. Also, if you realise the navigation for this page compared to "Contact" and "Home" page is bigger. Could it be a bug?

[gentlemedia]

In which browser (version) you have this issue? I checked in Chrome on the Mac and I can scroll down on the work page.

Edit: I do see that the scroll area is taller then the page so I don't get all the work items in view, so that's a bit weird.

[Keren_1]

@gentlemedia Is it..? My chrome can't scroll now i'm not sure why?

[gentlemedia]

Your #content div. Why did you made it so high (1560px)?
I understand what you were after, but then you could better use the default scrollbar (on the body) and give your header a fixed position, so that the navigation stays on top while scrolling the page.

[JorgeM]

Remove the { overflow: hidden } style from your <body/> element.
The { overflow: scroll } is not required on your #content div as gentlemedia describes.

[Keren_1]

@gentlemedia #content div if i change it to auto will it be alright?

[Keren_1]

@JorgeM "Remove the { overflow: hidden } style from your <body/> element." Sorry i didn't get this part, not css?

[JorgeM]

Yes, its defined in your css file, workbg.css

html, body{
    /*background:url(simplebg.jpg); */
    background:url(works-large-bg.png);
    background-repeat:no-repeat;
    height:auto;
    width:100%;
    overflow:hidden;
    margin-top: 0;
    margin-left: 0;
    background-attachment:fixed;
}

[Keren_1]

@JorgeM omg thank you so much it worked!! By the way, did you see the "Work" page, the navigations, font size is bigger than the other two pages? I removed normalize.css and it became fine(like the other two pages). Do i necessary need to attach the normalize.css ?

[gentlemedia]

The default value of the height property is already 'auto', so it's not necessary to declare it and I'd recommend to not set any heights to your elements. Well... 99% of the cases. Just let the content of those elements dictate the height.

[Keren_1]

@gentlemedia you see when i remove the height, image happens. The content is somewhat cut below by footer

[JorgeM]

Do i necessary need to attach the normalize.css ?

That is totally up to you. If you are asking this question, it could be because you are not sure what this css file is for. If you take a look at it, it is known as a CSS "reset" which means that it sets styles for many html elements so that when your uses use different browsers, the various users will see the same result regardless of what browser they use. The reason is because browsers have their own "default" styles. If you dont apply a style to an element, the browser uses the default setting. Different browsers have different defaults. Therefore, to get a consistent view, you apply a css reset.

This should be the first stylesheet. in your case, it isnt. If you keep it, i'd recommend that you move it up in your markup (in the head section of your pages) because CSS is applied in order. You currently have 4 stylesheets. I recommend you have 2 if possible.. 1) your css reset and then 2) your stylesheet. having fewer external files to load will also improve the loading time on your pages although your files are small so you may not see an actual improvement, but its good development practices.

[gentlemedia]

Ok... here's what you could do in your CSS:

1. html, body - remove the overflow property on these tags
2. #content remove the height property
3. #content change overflow: scroll to overflow: hidden

Because the work items are floated in the content div you need to clear the floats with overflow hidden in order to get the 100px padding-bottom to work.

[Keren_1]

@JorgeM See when i move up the normalize.css, i browsed it in chrome and the navigation font size became very big. If i use css reset then i could just remove normalize.css is that right? Thank you for the explanation on normalize.css!

[Keren_1]

@gentlemedia ah...now i get it, thank you so much!

[gentlemedia]

Good stuff! I see there is now a horziontal scrollbar. To get rid of that is to remove the margin: 0 2% 0 2% on #header. It's pointles to have it there anyway and it makes the #header div 104% width.... hence the scrollbar.

[Keren_1]

@gentlemedia i had that margin thing because of the jqurey navigation that's why. Thank you for that!