Grow your CSS skills. Land your dream job.

HELP! Css positioning problems with IE and Firefox (again)

  • # October 6, 2009 at 7:42 pm

    Hey, I’m brand new to css-tricks so I’ll hit the ground running with an age old problem:
    position issues with IE and ff, just like the title says.

    Here’s the site: http://www.voodazz.com/front.html

    I have a rotating gallery using jquery’s innerfade plug in and it works fine in FF. It’s exactly where it needs to be:

    [img]http://i406.photobucket.com/albums/pp145/voodazz/firefox.jpg[/img]

    but you guessed it, it’s slammed all the way to the right side in IE as you can see here:

    [img]http://i406.photobucket.com/albums/pp145/voodazz/explorer.jpg[/img]

    I’m not quite sure what to do and it’s starting to get really annoying.
    Here is the html:

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Front page blurb

    Who the heck am I??

    My name is Vincent Radford and I am the sole owner of the Knoxville based Voodazz Studios with almost 10 years experience in interactive and visual design.
    I cater to the budgets of most small businesses because not everyone can afford the rates of larger design firms

    What am I about?

    My primary goal is to give the client the best possible product that meets and exceeds their needs whether it’s a custom illustration for a sports team or giving someone a presence in the virtual world, I help them produce the best solution that would create an inexpensive unique and effective product rather than a pricey ineffective headache.

    How am I different?

    I’m motivated by quality and customer satisfaction rather than money.
    Getting paid for my services is a good thing, don’t get me wrong, but it is not and should not the sole motivating factor in doing business.
    Establishing trust and presenting a client with something we’re BOTH happy with is much more important to me.


    Here’s the CSS:

    Code:
    @charset “UTF-8″;
    /* CSS Document */

    body {
    background-image: url(IMAGES/bg.gif);
    margin: 0;
    font-family: Arial,Helvetica,Verdana, San-serif;
    font-size: 12px;
    color: #999;
    background-color: #333;

    }

    h5{
    font-size: 22px;
    margin: 0px;
    color: #FF6600;

    font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
    text-transform: uppercase;
    padding: 0 0 0 10px;
    }

    h3{
    font-size: 21px;
    background-color: #d66d10;
    color: #FFFFFF;
    width: 200px;
    font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
    text-transform: uppercase;
    padding: 0 0 0 10px;

    }

    h2{
    font-family: “Akzidenz Grotesk BE MdCn”, “Arial Narrow”, Arial, Helvetica;
    font-size: 15px;
    margin: 5px 0 0 0px;
    color: #b83917;

    }

    .headerImage{
    background-image: url(IMAGES/design_header.jpg);
    width: 1200px;
    background-repeat: no-repeat;
    height: 90px;
    margin: 0;
    position: relative;
    }

    .moveLogo{
    position: absolute;
    top: 12px;
    left: 50px;
    margin: 0 0 0 40px;
    }

    .frontContainer{
    background-image: url(IMAGES/frontpage_bg.jpg);
    width: 1200px;
    background-repeat: repeat-x;
    padding-bottom: 20px;
    height: 326px;
    position: relative;

    }

    /*ul#frontSlideShow li img{
    float: right;
    width: 770px;

    }

    */
    .slideShowContainer{
    width: 770px;
    margin: 0px;
    position: relative;
    padding: 0;
    left: 175px;

    }
    ul#frontSlideShow {
    list-style-type: none;
    background: transparent none repeat scroll 0 0;
    display: block;
    height: 326px;

    }

    ul#frontSlideShow img{
    position: absolute;
    left: 0;
    top: 0;

    }

    .moveLogo2{
    position: absolute;
    top: 40px;
    left: 50px;
    margin: 0 0 0 45px;

    }

    .textContainer{
    }

    .textBox{
    float: left;
    width: 300px;
    margin: 0 15px 0 50px;
    color: #333333;
    font-size: 14px;
    line-height: 16px;
    }

    .textBox p {
    padding-bottom: 10px;

    }

    .shadowWrapper{
    background-image: url(IMAGES/shadowbg.gif);
    background-position: center top;
    background-repeat: repeat-y;
    margin: 0 auto;

    width: 1250px;

    }

    .pageWrapper {
    margin: 0px 0 0 0;
    background-color: #eeeeee;
    background-image: url(IMAGES/pagewrap_bg.jpg);
    background-repeat: repeat-y;

    width: 1200px;
    z-index: 2;
    }

    .contentWrapper{
    background: transparent;
    z-index: 500;
    margin: 50px 0 0 50px;
    width: 980px;

    }

    .thumbNails{
    width: 215px;
    float: left;
    margin: 0 30px 0 0;
    padding: 0 0 10px 0;
    }

    .thumbNails p{
    margin: 5px 0 5px 0px;
    font-size: 14px;
    color: #333333;

    }

    .clearBoth {
    clear: both;

    }

    .cornerLink ul {
    background-color: #2e343d;
    text-transform: uppercase;
    font-size: 16px;
    margin: 0 0px 0 0px;
    padding: 10px 10px 10px 0px;
    text-align: right;

    }

    .cornerLink li {
    display: inline;
    list-style-type: none;

    }

    .cornerLink a {
    padding: 0 20px 0 0;

    }

    .cornerLink a:visited {
    color: #FFFFFF;
    text-decoration: none;

    }

    .cornerLink p {
    margin: 0;
    padding: 0;

    font-size: 14px;

    }

    .cornerLinka:link, .cornerLink a:visited {
    color: #ffffff;
    text-decoration: none;

    }

    .cornerLink a:hover {
    color: #cc3300;
    text-decoration: underline;

    }

    .shadowFooter{
    background-image: url(IMAGES/footershadow.gif);
    background-repeat: repeat-x;

    background-position: bottom;
    width: 1250px;

    }

    .footer {
    clear: both;

    text-align: center;
    background-image: url(IMAGES/newfooter.jpg);
    background-repeat: no-repeat;
    font-size: 10px;
    color: #fff;
    padding: 55px 0px 0px 0px;
    width: 1200px;
    margin: 0px;

    }

    It’s like the ul#frontSlideShow is completely disregarding the containing div (slideShowContainer). :cry:
    It’s probably something reeeeally simple I’m missing (hopefully), but I’m not seeing it.
    Some help would be GREATLY appreciated! Thanks.

    # October 6, 2009 at 10:36 pm

    try throwing this into your css. At the very top of your css.

    * {margin: 0; padding: 0; }

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".