PDA

View Full Version : Conveyour belt slideshow is shifted by a few pixels



sgupt
03-06-2009, 12:53 AM
1) Script Title: Conveyor Belt slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm

3) Describe problem: The entire slideshow is shifted to the right by a few pixels.

Here's the site I'm using it on: http://umurf.org/ I changed the background of the slideshow area to red, which is the proper width and alignment (disregard the height).

Nile
03-06-2009, 02:15 AM
I dont know how to fix this issue, but use The Crawl (http://home.comcast.net/~jscheuer1/side/thecrawl/) instead.

jscheuer1
03-06-2009, 02:59 AM
That might help, but there are also quite a number of problems with the page regardless of the script used. It shows only as garbage characters on a white background in Opera.

It's invalid:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fumurf.org%2F

It uses an XHTML DOCTYPE, but is being served as HTML, so should use an HTML DOCTYPE.

The styles are overblown - too complicated for such a page. I think this is at the root of your problem, though the other issues should be dealt with because once that they are, it will make it easier to fix this one.

sgupt
03-06-2009, 03:05 AM
I was just using whatever the template provided :-/

I'll make as many fixes I can, and I'll try that crawl script instead.

Most of the errors in the validator seem to come from the conveyor belt script

sgupt
03-06-2009, 03:24 AM
OK well changing over to the crawl script fixed the issue, and halved the number of errors. I'll work on getting rid of the rest.

I also changed the doctype to HTML 4.01 transitional, but then I get errors like "there is no attribute "XMLNS"." How do I get rid of those?

jscheuer1
03-06-2009, 03:30 AM
Change:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >


to:


<html>

Get rid of all:


/>

Change them to:


>

After that you should have only a few errors that should be fairly self evident how to fix. Things like missing alt attributes for img tags. For that you can just add an empty alt="" attribute to the tag.

sgupt
03-06-2009, 03:33 AM
Thanks. I actually switched it back to XHTML and fixed all the errors so it now validates properly.

Should I switch back to HTML? I have no issue in doing so, just wondering if it's necessary.

jscheuer1
03-06-2009, 03:51 AM
The page is being parsed as HTML, so should have an HTML DOCTYPE, so yes, use HTML.

There is still the problem in Opera. I'm not sure what it is. It looks as though your file, which is being served as UTF-8 encoded data may be encoded differently. But that should also be a problem, at least in FireFox, but isn't - looks good in FireFox, GC and Safari 3 Win.

IE 7 is still a bit off on the right end of the crawl. That may be able to be fixed with a conditional style. But I still think the entire page uses way too much css.

sgupt
03-06-2009, 04:05 AM
The page is being parsed as HTML, so should have an HTML DOCTYPE, so yes, use HTML.

Will do, thanks

EDIT: Changing everything to HTML breaks the whole page. Even the joomla main site uses XHTML, so I think I'm going to have to stick with it :-/


But I still think the entire page uses way too much css.

I totally agree. I'm going to look at the templates css closer this weekend to see if I can combine or get rid of anything.

jscheuer1
03-06-2009, 04:27 AM
I figured out how to fix it in IE and it will not hurt others. Use this for the markup and init:


<div class="marquee" id="slideshow">

<img src="/templates/vj_anelco/images/slideshow/1.jpg" alt=""><img src="/templates/vj_anelco/images/slideshow/2.jpg" alt=""><img src="/templates/vj_anelco/images/slideshow/3.jpg" alt=""><img src="/templates/vj_anelco/images/slideshow/4.jpg" alt=""><img src="/templates/vj_anelco/images/slideshow/5.jpg" alt="">
</div>
<script type="text/javascript">
marqueeInit({
uniqueid: 'slideshow',
style: { //style object for this marquee container (use quotes on both sides of the : as shown)
'width': '100%',
'height': '260px',
'color': '#fff',
'background-color': '#fff',
'font-family': 'sans-serif',
'margin': '0 auto'},
inc: 2, //speed - pixel increment for each iteration of this marquee's movement
mouse: false, //mouseover behavior ('pause' 'cursor driven' or false)
noAddedSpace: true
});
</script>

Add this to your stylesheet:


.marquee0 img {
margin: 0 6px;
}

I still haven't figured out the trouble with Opera, but oddly enough a local copy of the page displays fine in it. Must be something about how it is being served.

sgupt
03-06-2009, 05:13 AM
Thank you soo much I really appreciate it!!

I'll install opera and take a look around, maybe it's a simple configuration setting in joomla or the webserver that needs to be changed

sgupt
03-09-2009, 07:50 AM
still not sure whats causing the issue in opera argh

but, the doctype is supposed to be xhtml because xml is used to call certain joomla elements (it shows up as html in the page source ofc)

jscheuer1
03-09-2009, 11:39 AM
One thing I just noticed is that the Joomla demo site includes a prologue:


<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<base href="http://demo.j . . .

Whereas your page has no prologue:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >

<head>
<base href="http://um . . .

That may or may not be the problem in Opera.