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/dynamici...rightslide.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 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?verbos...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 Code:

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

to:

HTML Code:

<html>

Get rid of all:

HTML Code:

/>

Change them to:

HTML Code:

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

Originally Posted by jscheuer1

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 :-/

Originally Posted by jscheuer1

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:

Code:

	<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:

Code:

.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.

Thread: Conveyour belt slideshow is shifted by a few pixels

Thread Tools

Search Thread

Conveyour belt slideshow is shifted by a few pixels

Bookmarks

Bookmarks

Posting Permissions