Browser compatability issues with website

I have a test site up at www.trendstudiosorlando.com/test3/index.html. The issue Im currently having is mainly with my accordian menu., and well the background as well, but mainly the accordian menu. Heres whats going one:

In Safari - My accordian menu doesnt work at all, it doesnt collapse or expand the whole way, and the background of my website has two stripes of a different color in the header and footer. Also my background collapses and doesnt extend past the content as it should...


In Firefox - accordian menu works just fine, but I still have the strips of wrong color in the header and footer.

In Opera- my accordian menu appears without my rounded corners and has a scroll box. However my background is all one solid color as it should be.

Are these browser compatability issues? ( how do i fix this? I have no clue how to compensate for that as of yet) Or did I mess up my code somewhere as the dreamweaver validator validates fine with the exception of a couple of &'s that should be &


My test site is at trendstudiosorlando.com/test3/index.html

Try adding overflow:auto to .services - that should make the background extend properly in Opera and Safari, and it might solve your accordion as well - I think there just isn't enough space in those two browsers to accommodate the expanded accordion.

Strips of wrong colour - might be my eyes, but I can't see these in any browser - where exactly are they?

In Opera 11.64 your accordion does have rounded corners.

didnt work :(

Well, it fixes the accordion in Opera, and extends the background in Safari - have a look (http://tinyurl.com/d5qtxlo).

Doesn't fix the accordion in Safari, I see.

Ah, the problem in Safari is because the js is running before the images have loaded - if you call your accordion function on $(window).load() that's sorted as well. So change:

$(function(){

// Accordion
$("#accordion").accordion({ header: "h3" });

//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);

});


to

$(window).load(function(){

// Accordion
$("#accordion").accordion({ header: "h3" });

//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);

});

Meep! Sorry about the double post. I marked it as resolved so hopefully noone will look at it anymore

Thank you so much for your help! That worked wonders!

Im looking at this now, and the nav bar has moved. how the heck?

Well, obviously you've changed the css at some point since yesterday.

I can't remember exactly how you had the menu positioned, but I wonder if you've removed position:relative from #container. Reinstating this moves the menu back to sit above your graphic.

Ah, I didnt know the css on your thing was linked back to mine, and ugh I cant even remember what the hell I did between all this crap.

Im not sure whats going on, I had a legacy file saved so i switched the css back, and its still wonky..

Have you tried adding position:relative to #container?