Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE7 Positioning problem

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #26771
    Totoro
    Member

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

    welcome

    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.

    #66625
    AshtonSanders
    Participant

    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.

    #66637
    Totoro
    Member

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.