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

Home Forums CSS little IE problem

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #25474

    Hello everybody,

    I’m making a small website for a friend, to show his work:
    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.



    * {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;


    /* 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;
    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;



    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.


    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?


    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)

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