Grow your CSS skills. Land your dream job.

little IE problem

  • # July 16, 2009 at 4:24 am

    Hello everybody,

    I’m making a small website for a friend, to show his work: http://www.kralenuitguatemala.woelmuis.nl/
    I used one of the tutorials here to make it (I did a weird thing with two buttons, but no matter)
    It works fine in Fire fox and in Safari, but not in IE :( (what a surprise)
    I had a lot of troubles witch I already solved, but there are two little problems left:

      In IE the green color of the header is suddenly a different green ?! how is that possible.
      The background image is cut out of the header…[/list:u]
      On the "sieraden" page the footer is suddenly to the left.
      the page is exactly build as the home page, the only difference is that there is an extra column.
      (so that will be the problem, but how do I solve it?) [/list:u]

      I think it is something very simple, but I will paste the entire code,
      because I have no idea where it might come from.

      I must say that it is a real comfort knowing that if I fail in solving problems, I can always come here.

      Thanks,
      Matt

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

    Code:
    /* RESETS AND BASIC SETUP */

    * {margin: 0; padding: 0; }
    html { overflow-y: scroll; }

    body {
    font: 62.5% “Trebuchet MS”, sans-serif;
    background: url(images/background.png);
    }

    ul { list-style: none inside; }
    p { font-size:1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
    a { outline: none; }
    a img { border: none; }

    h1 {
    font-family: Georgia, serif;
    font-size: 2.8em;
    color: black;
    }

    h1#logo {
    width: 1054px;
    height: 260px;
    background: url(images/header.jpg) no-repeat center center;
    text-indent: -9999px;
    }

    /* END RESETS AND BASIC SETUP */

    /* TOOLBOX */

    .floatleft {float: left; }
    .floatright {float: right; }
    .clear { clear: both; }

    /* END TOOLBOX */

    /* STRUCTURE */

    #page-wrap {
    width: 1054px;
    margin: 0 auto;
    background: url(images/content-bg.png) repeat-y;
    }
    #main-content {
    padding: 10px 80px 30px 80px;
    }

    #big_part {
    width: 700px;
    float: left;
    }

    #intro {
    width: 900px;
    float: left;
    }

    #nav2 {
    width: 154px;
    float: right;
    font-size:1.3em;
    padding: 20px;
    }

    ul#nav {

    }

    ul#nav li {
    display: inline;
    }

    ul#nav li a {
    display: block;
    height: 88px;
    text-indent: -9999px;
    float: left;
    }

    ul#nav li.left-bird a {
    width: 280px;
    background: url(images/buttons/left-bird.jpg);
    }

    ul#nav li.home a {
    width: 248px;
    background: url(images/buttons/home-total.jpg) bottom center;
    }

    ul#nav li.sieraden a {
    width: 248px;
    background: url(images/buttons/sieraden-total.jpg) bottom center;
    }

    ul#nav li.right-bird a {
    width: 277px;
    background: url(images/buttons/right-bird.jpg);
    }
    ul#nav li a:hover {
    background-position: center center;
    }

    body#sieraden ul#nav li.sieraden a{
    background-position: top center ;
    }
    body#home ul#nav li.home a{
    background-position: top center ;
    }

    #footer {
    height: 136px;
    background: url(images/footer.png) no-repeat center center;
    }

    /* END STRUCTURE */

    # July 16, 2009 at 3:52 pm

    Try replacing, in your background formatting "Transparent" with "##7fc241" – That’s the hex code for the colour of green you want. I can’t test this for myself so let me know if this works.

    # July 17, 2009 at 2:14 pm

    Oke, with that I think I can make that work, but also very important:

    How is it possible that on my local host the page "sieraden" works fine in IE,
    and on the web, the footer is suddenly not properly centered?

    Or: How do I make it also work properly on the web?

    # July 26, 2009 at 12:49 pm

    I also ran it through the validator, but it gives no errors on my html and css
    (only on the added sponsored link of my free host)

    # July 27, 2009 at 7:06 am

    I’m on a mac so I’m not actually seeing the problem, but you could try giving the footer a width:

    Code:
    #footer {
    background:transparent url(images/footer.png) no-repeat scroll center center;
    height:136px;
    width:1054px;
    }

    aub

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

You must be logged in to reply to this topic.

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