10 replies to this topic

[qwerty]

I need to replace a Flash slide show, and as I don't work with Flash (I don't have the software to create a Flash file) I need a nice, simple JS-based version. I thought I'd found something pretty straightforward, but even after editing its HTML, scripts, and the various style sheets it required, I've got bupkis: only the first image displays, the captions that were supposed to display temporarily in a fancy translucent line along the bottom of the image are displaying permanently as text above the image, and the whole thing is superimposed over the page's text

I just need a nice, easy script that will let me name four or five images and rotate through them when the page loads. Anybody got one they can recommend?

[cfreek]

Have you tried the JQuery Cycle plugin? I use it quite often.
You create one container element, and add one line of JavaScript for the most simple version.

http://jquery.malsup.com/cycle/

[qwerty]

Thanks. I'll take a look at it.

[qwerty]

Yup, that was exactly what I was looking for. Thanks a lot.

[1dmf]

Wow that's a really cool javascript slide show. nice one cfreek.

[qwerty]

I should probably start a new thread here, but since the presence of the slide show pointed out the issue, I think I'll just put it here.

Since I made the leap from the dreaded IE years ago and switched to Firefox as my main browser (back when it was still called Firebird or something like that), I've been coding for standards-compliant browsers and then tweaking things to get IE to work. As a non-designer, the tweaking part has always been a real hassle for me, but I've always found that if a page works in FF, it's going to work in Opera, Chrome, and Safari (for Windows, at any rate).

So I coded up this page. It's a very straightforward (and not all that pretty) design, intended to emulate a client's current site but taking it out of tables and using valid code. I checked it for valid HTML 4.01 Strict and the only errors involved the presence of Google Analytics code. I tried it out in FF and IE 8, and everything was fine. It wasn't until after I added the slide show to one of the pages that I tested it in Opera, Safari and Chrome, and it didn't work in Chrome! I had to futz around and specify the width of a block-level element that should have inherited its width from its parent (and does in other browsers).

So that's fixed, although it's not clear to me why it was necessary to fix it in Chrome if it worked everywhere else, but there's still a problem with Chrome. The CSS of the site contains the following:

CODE

body{font-family:Verdana,Arial,Helvetica,sans-serif 76%;text-align:left; background:#fff;}

Simple, right? All of the text on the page uses the same sans-serif font (although colors and sizes differ for various elements). But in Chrome, the page (and not just the page containing the slide show) has all Serif fonts. I had to go into the browser's font setting and set the default Serif font to Verdana -- a sans-serif font -- in order to get it to display properly, and I can't very well put a note on the site telling all Chrome users to do the same.

What could be causing this?

[cfreek]

I usually specify font sizes separate from the font-family, but that's just personal preference and an old habit.
Running the CSS through W3C validation does give one warning:

"Family names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space."

So, have you tried quoting the "sans-serif 76%" to see if Chrome is just picky on that?

[qwerty]

Yeah, that worked, although I don't really understand why. I thought the generic font family was sans-serif, which doesn't contain a space rather than sans-serif 76%, which does.

Anyway, thanks. One less reason to yank out my hair.

[1dmf]

font-family can ony contain font names, if you want to define all properties you use the 'font' attribute like so.

CODE

body{font:italic bold 12px/30px Georgia, serif;}

here's a link to w3schools with full details

http://www.w3schools...r_font_font.asp

[qwerty]

Yup, I ended up defining font size separately:

CODE

body{font-family:Verdana,Arial,Helvetica,sans-serif; font-size:82%;text-align:left; background:#fff;}

[1dmf]

I prefer to break my CSS down to each attribute setting rather than a one liner. though having said that, I do break that rule when it comes to border

CODE

border: 1px solid #000;