...

View Full Version : Browser compatability issues with website



lmorales
05-22-2012, 03:42 PM
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

SB65
05-22-2012, 04:02 PM
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.

lmorales
05-22-2012, 04:27 PM
didnt work :(

SB65
05-22-2012, 05:42 PM
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'); }
);

});

lmorales
05-22-2012, 06:02 PM
Meep! Sorry about the double post. I marked it as resolved so hopefully noone will look at it anymore

lmorales
05-22-2012, 07:16 PM
Thank you so much for your help! That worked wonders!

lmorales
05-23-2012, 07:43 PM
Im looking at this now, and the nav bar has moved. how the heck?

SB65
05-23-2012, 07:52 PM
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.

lmorales
05-23-2012, 07:57 PM
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.

lmorales
05-23-2012, 08:16 PM
Im not sure whats going on, I had a legacy file saved so i switched the css back, and its still wonky..

SB65
05-23-2012, 08:43 PM
Have you tried adding position:relative to #container?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum