overflow scrollbars problem

[snk]

Hello,

please visit http://www.myfoxnet.com/rest in rder to understand my following problem.

Menu uses httpRequest in order to load new pages. New pages are loaded into #horizontal_slide.

I have a problem that occurs differently using FF or IE7 when I am trying to use scrollbars, please click on coctails & shakers to activate the scrollbar and to understand the problem.

When I use Firefox the scrolling area is fine, (it needs some fixes for better looking,I have them in my mind and its not a problem right now) ,but it makes a weird braking on the background image. If you disable, via firebug, the overflow attribute scrollbars go away, but the weirdo braking is not there.

When I use IE7, I dont have this weird braking, but I have problem with the background image, because behaves as image in the content (is getting down) rather background image. when I use background-attachment:fixed image is getting disappeared.

I would appreciate much if somebody could give me some hints to resolve those 2 problems, coz they really drive me crazy.

Thank you in advance for any effort.

[opifex]

step 1. validate your page and CCS with the W3C validators.
step 2. check demo2.js and menu list.... line 137 is throwing a "no properties" error on load

 $('h_press').addEvent('click', function(e){
      e.stop();

because "h-press" does not exist. BUT "h_reserv" is there 3 times!!! (Coctails...)

step 3. finally, check "reserv.html"... it probably has an extra </div> at the end that is throwing off the scrollbar.

this is probably an AJAX/html problem...

[snk]

Hello opifex,

Thank you for your time. I am aware of the javascript errors, I think that they are irrelevant with problem, they are there just to make the httpRequest.

content of rest.html is in a proper div, I dont use the name anymore, as it was for a test that didnt change anything..

I will follow your guides and I will post again.

Thank you so far.

[opifex]

my mistake about the div! the error coming back is the "</br> should be a <br/>. the scroll problem is due to the nested divs... clean it up and maybe set a height and you should be ok.

[snk]

Hi opifex,

thanks for your constant replies,

I successfully validated CSS and HTML and everything is fine according w3c.

problem is still there, now I have included
overflow:auto;
background-attachment:fixed;

Height was and is 613px. background image is 612px

as you see its awful.

overflow makes the weird braking
background attachment kicks out the background...

I have spent more than 8 hours to find a solution and I cant come up with something new...

horizontal_slide has to stay in content_div for alignment purposes.

Plz let me know if there is something else you can see or advise me.

[snk]

Do you think that it might be something with document or CSS declaration ? Could you give me some alternative ways?

It looks strange that doesnt like at all
overflow: auto; (Fine with IE7, mess with FF)
background-attachment:fixed; (Mess with both)

Can a moderator transfer this thread to html section? I think is not Ajax as the problem occurs when I change css attributes, even if I get validated from w3s.

Cheers.

[opifex]

not sure what you mean by "mess with" -not very descriptive.

if it is the scrollbar length(height) the problem is to align the div height with you background image - the horizontal_slide height:580px; or so to keep the text inside the curve.

an you might want to clean up the barackslideshow.css a little.

#slideshow #menu_div #menu-snk {

means applies to id menu_snk inside id menu_div inside id slideshow.... you just need the last id for all of your references like this in the css.

combine the css as much as you can.... you might have some hidden conflicts there.
... and put the various inline css in the stylesheet also!

i've used similar code for small sites like restaurants and it does work well if you pay attention to the code... good luck!

[snk]

if you had a look with both browser you could see the difference, but now i fixed problem with firefox.

Im posting the solution in case somebody else find it useful.

mootools.js makes a div, you can see it via firebug. overflow of this div was hidden and in my horizontal_slide was auto. That was creating a flicking on the screen.

at line 348 I replaced

overflow:”hidden”
to
overflow:”auto”

and now FF hasnt got any problem.

I still have problem with IE. Background Image goes down. If you can spot the problem it would be great. I just mention that if I set
background-attachment:fixed;
The background image goes for coffee

cheers

[opifex]

well, until you clean up the css, you will find it a little easier to hack it so that ie7, and ie6 will render the way you want them to.
all of ie has particular problems with png images as backgrounds and ie6 and below won't render transparency without an alpha hack or .htc fix. for your jpg background and div alignments you have to remember that ie has a broken box model.
you already figured out that your javascript code inserts divs ... you can name those divs in the script and add them in your style sheet so that you can format them... makes life a whole lot simpler when you have everything neatly arranged on one plate. well organized coding goes a long way!

clean up the code and you'll get it.

... and i actually check everything in multiple browsers (ff2, ff3, ie7, ie6, ie5.5, safari3 and opera9) you should at least check in ff2, ie7,ie6 and safari also.