little IE problem

[matt3000]

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:

Kralen uit Guatemala

• home
• home
• sieraden
• home

• Armbandjes
• Sleutelhangers
• Hals-kettingen
• Riemen
• Ringen
• Tasjes
• Kleding
• Sjaaltjes
• Portemonnees
• Enkelbandjes

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

[tomwalters5678]

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.

[matt3000]

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?

[matt3000]

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)

[Author]

Posts