Help with jQuery Carousel? - Page 3

AChicken9 · 05-01-2011, 05:31 PM

I'm officially at a loss at what to do with this. Can anyone else weigh in?? I have this 99.9% working in FF (all except the buttons), and pretty close in IE. Gaps in images are still there and my buttons are still showing really weird. Only one in IE and it looks pixelated and with a weird outline. And in FF, neither button shows.

I'm sure Andrew is annoyed with this page about as much as I am now... Can someone please please help!!

SB65 · 05-01-2011, 06:55 PM

At present you have:

Code:

<!-- Begin Top Include -->

<!-- Begin Top Include -->

before your doctype. Can you remove these comments? That makes IE start to behave like FF, for a start. IE gets upset if the doctype isn't right at the top.

EDIT: Then try setting the width of your carousel explicitly:

Code:

visible: '650px'

Looks the same for me in IE8 and FF now... buttons missing on both though....

EDIT AGAIN:...however, if I look in your css, you have:

Code:

div.jMyCarousel .next{...}

but your html is:

Code:

<div class="JMyCarousel"

Now, css is case-sensitive, so FF isn't picking up the style. IE is because the comments before the doctype is putting it into quirks mode which isn't case sensitive. Make your html match your css and that seems to fix the right hand button, just leaving the left hand one...

EDIT ONE MORE TIME:...and your css is wrong for the left hand arrow - you have:

Code:

div.jMyCarousel.prev{

which should be:

Code:

div.jMyCarousel .prev{

Fix that and you should be nearly there...

AChicken9 · 05-01-2011, 10:49 PM

Thanks, unfortunately I cannot remove the comments before the doc type. This site uses somewhat of a CMS, and unfortunately I don't have access to change that code. I did however make all of the other changes. I feel like an idiot, I didn't realize CSS was case sensitive, so thank you for that! I now have a right arrow in FF, but it still looks weird, and still no left arrow in either browser and gaps in IE. Any other ideas?

SB65 · 05-02-2011, 08:42 AM

The prev button, your css for that line is now correct but you have errors in the rest of your css which I think are interfering - you have comments and html within your css file.

Run your page through the css validator to sort these.

If you can't get rid of those comments you'll always struggle to get IE to behave I'm afraid.

AChicken9 · 05-02-2011, 04:10 PM

Thanks, I'll work on cleaning up the errors that I can control and contact the CMS admins on the others. One question though... on some of the parsing errors it relates to

Parse Error !important;

Now I know that using !important isn't best practice, but when I remove them, it borks my whole carousel as it seems there are some conflicting styles. So that being said... what should I do? Obvious answer is figure out the conflicts and resolve them so I don't have to use them... but i haven't been able to do that, so I guess my question is are there ever scenarios where these errors are acceptable?

SB65 · 05-02-2011, 05:05 PM

!important is perfectly valid, but it needs to be like this:

Code:

div.JMyCarousel ul {
position:absolute !important;
}

not, as you have:

Code:

div.JMyCarousel ul {
position:absolute; !important;
}

AChicken9 · 05-02-2011, 05:24 PM

Awesome thanks! I'll work on getting the rest of these resolved. Fingers crossed that does the trick ;-)

AChicken9 · 05-02-2011, 09:40 PM

Okay, I've gone through and fixed everything that I seem to be able to... there are just a few that I have access to fix, but can't seem to identify what is wrong within my CSS. Here are the ones that I think I can tweak if I can just figure out what's wrong... can you shed some light?

URI : http://s3.amazonaws.com/filestore.re...erial=58&a0003
1502 #content tbody td#left Parse Error *width:180px;
URI : http://s3.amazonaws.com/filestore.re...erial=58&a0003
1503 Unknown pseudo-element or pseudo-class :center
URI : http://s3.amazonaws.com/filestore.re...erial=58&a0003
1503 text-align Parse Error center;
URI : http://s3.amazonaws.com/filestore.re...erial=58&a0003
1504 text-align Parse Error }

On the others, unfortunately I'm at the discretion of the CMS vendor to fix these, and it sounds like it's not high on their priority list (they claim these wouldn't affect the page display). I don't suppose there are any work around tricks I could implement?

AChicken9 · 05-04-2011, 03:18 PM

Well I was able to do more digging and have determined that these remaining errors (21) are all within the CSS for the CMS, which I don't have direct access to change. I've requested they update them, but again I kind of doubt they will anytime soon. So 2 last questions to anyone who can answer:

1.) I do have the ability to enter my own custom CSS, which is how I've done most of this other stuff. From what I can tell it seems to essentially append my entry onto the overall site CSS file. Now this may be a dumb question, but if i essentially re-enter the lines of CSS which have errors, but with those errors corrected, I'm assuming it doesn't solve anything as you'll still have the errors in there?

2.) Is there ANYTHING else that could be causing the gaps in IE? Everything else works, so that's literally the last thing I need to figure out, and I hate to just trash this work if i can't get that working.

As you can tell I'm slightly desperate :-(

AndrewGSW · 05-04-2011, 04:58 PM

The css file '2152.css' shows this rule in IE:

Code:

a img { 
    border-bottom: medium none;
    border-left: medium none;
    border-top: medium none;
    border-right: medium none;
}    /* try */

a img { border: none !important; }

bearing in mind that this will affect (hopefully..) all images contained within an 'a' tag.

The first image isn't in an li (according to IE) - I think I mentioned this before.

Added: And you are correct in 1.)

AChicken9 · 05-05-2011, 12:04 AM

Sorry Andrew, I must have missed that. I made it a list item and wouldn't you know it, it works in IE!!! THANK YOU BOTH sooo sooo much!!!!