Totoro

# November 15, 2009 at 3:51 pm

Hello,

I’ve been following a jquery image carousel tutorial and I can’t seem to get the carousel where I want it to be. I want it to be centered horizontally. It’s in the middle of the page in Firefox but in IE7 the image has moved to the right of the page. I have been fiddling with the code all afternoon but I don’t see what is wrong with it.
And I can’t figure out why the content beneath (Our location etc.) the image isn’t starting after the image. On the other pages eg. Information page the text area and the dividers are well positioned.

Oh and if you run the page through the validator it will give you a bunch of errors but that’s because a pasted a googlemaps adres in it. The adress has alot of "&" in it, don’t know how to fix that.
Please forgive me if I have asked a question that’s been asked a million times before. I’m new to CSS and try to understand it as much as I can.

Here’s how it look right now (in FF):
http://www.puppetbrain.com/temp/website/homeTest.html

It should look like this (in FF/Safari):
http://www.puppetbrain.com/temp/website/home.html

This is what I got in CSS (part of the code):

Code:

/*—————— carousel ———————*/

.infiniteCarousel .wrapper {
width: 940px; /* .infiniteCarousel width – (.wrapper margin-left + .wrapper margin-right) */
overflow: hidden;
height: 260px;
margin: 0;
padding:0;
position:absolute;
top: 0;
}

.infiniteCarousel ul a img {
border: none;
}

.infiniteCarousel .wrapper ul {
width: 9999px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0;
padding:0;
top: 0;
}

.infiniteCarousel ul li {
display:block;
float:left;
padding: 0;
height: 260px;
width: 940px;
}

.infiniteCarousel ul li a img {
display:block;
}

.infiniteCarousel .arrow {
display: block;
height: 30px;
width: 19px;
background: url(img/btnArrowRight.jpg) no-repeat 0 0;
text-indent: -9999px;
position: absolute;
top: 112px;
right:0;
cursor: pointer;
}

.infiniteCarousel .forward {
background-position: 0 0;
right: -40px;
}

.infiniteCarousel .back {
background-position: 0 0;
left: -40px;
}

.infiniteCarousel .forward:hover {
background-position: 0 -30px;
}

.infiniteCarousel .back:hover {
background-position: 0 -30px;
}

/*—————— carousel ———————*/

html:

Code:

• Home
• Information
• Projects
• Clients
• Projects

Welcome to OrienTouch Entertainment. OrienTouch Entertainment is an independent and professional entertainment and events organization bureau which specializes in organizing both traditional and modern Chinese entertainment shows to cater to your explicit wishes.

more info

more projects

• 
• 
• 
• 

AshtonSanders

# November 15, 2009 at 4:41 pm

Hey, I would try absolute:positioning on the class.subhead. In IE7, it looks like that subhead is what is pushing the gallery to the right.

"Totoro" wrote:

Oh and if you run the page through the validator it will give you a bunch of errors but that’s because a pasted a googlemaps adres in it. The adress has alot of "&" in it, don’t know how to fix that.

Change all "&" to "&" That is the special character for &… everything will still work.

Totoro

# November 16, 2009 at 5:15 am

Thanks. It’s positioned as I wanted in IE. Have to understand more about the positioning especially the absolute and relative part.