Works in Safari and Firefox but not ie

[damostkid]

Hi! I am new to designing websites and watched your converting photoshop into css (great by the way!!). I tweaked the code a little to make a different layout. However, it looks great in firefox and safari but breaks in ie. I am at a lost to what code I am missing. Any help would be much appreciated!! Thanks!

The link is:

http://www.sirenhouse.com

and the external code I am using is:
(its from the tutorial but tweaked)

Code:

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
background: url(‘images/body-bg.jpg’) top left;; font-style:normal; font-variant:normal; font-weight:normal; font-size:62.5%; font-family:Lucida Grande, sans-serif
}

ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
p.metadata { background: #fff9a7; padding: 3px;}
a { outline: none; }
a img { border: none; }

h1 {
font-family: Georgia, serif;
font-size: 2.4em;
font-weight: normal;
color: #80728a;
}
h1#logo {
width: 654px;
height: 112px;
background: url(‘images/header.jpg’) no-repeat center;
text-indent: -9999px
}

/* END RESET */

/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */

#wrapper {
margin: 0 auto;
width: 750px;
background: url(‘images/content-bg.jpg’) repeat-y;

}

#main-content {
padding: 80px 110px 80px 100px;
}
#article-area {
width: 400px;
float: left;
display: inline;
}
#sidebar {
width: 92px;
float: right;
display: inline;
}

ul#nav {

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

}
ul#nav li.donate a {
width: 125px;
background: url(‘images/donate-nav.jpg’) no-repeat bottom center;

}
ul#nav li.about a {
width: 90px;
background: url(‘images/about-nav.jpg’) no-repeat bottom center;
}
ul#nav li.services a {
width: 129px;
background: url(‘images/services-nav.jpg’) no-repeat bottom center;
}

ul#nav li.involved a {
width: 123px;
background: url(‘images/involved-nav.jpg’) no-repeat bottom center;
}

ul#nav li.events a {
width: 123px;
background: url(‘images/events-nav.jpg’) no-repeat bottom center;
}

ul#nav li.recources a {
width: 123px;
background: url(‘images/resources-nav.jpg’) no-repeat bottom center;
}
ul#nav li a:hover {
background-position: center;
}

ul#nav2 {

}
ul#nav2 li {
display: inline;
}
ul#nav2 li a {
display: block;
height: 80px;
text-indent: -9999px;
float: left;

}
ul#nav2 li.corner a {
width: 175px;
background: url(‘images/clients-nav.jpg’) no-repeat bottom center;
margin-right: 91px
}
ul#nav2 li.hope a {
width: 175px;
background: url(‘images/hope-nav.jpg’) no-repeat bottom center;
}

ul#nav2 li.enews a {
width: 175px;
background: url(‘images/enews-nav.jpg’) no-repeat bottom center;
}

ul#nav2 li.supporters a {
width: 175px;
background: url(‘images/supporters-nav.jpg’) no-repeat bottom center;
}

ul#nav2 li.boutique a {
width: 175px;
background: url(‘images/boutique-nav.jpg’) no-repeat bottom center;
}

ul#nav2 li a:hover {
background-position: center;
}

#footer {
min-height: 127px;
background: url(‘images/footer-bg.jpg’) no-repeat;
}

/* END STRUCTURE */

[AshtonSanders]

"damostkid" wrote:

…it looks great in firefox and safari but breaks in ie.

Welcome to the Internet.

Well, you didn’t say what was wrong with it, so I’ll guess:

White space below the logo:
Get rid of the space between the IMG and UL, so it looks like this:

Code:

Let me know if that helps

[damostkid]

Hi! Yep, it was that white line on the banner that was messing up. I couldn’t get the images to connect. I tried your suggestion and it didnt work. After doing some research, I found something on image containers and tried that and that seemed to do the trick to connect the images together. Thanks again for your response!

[AshtonSanders]

Sweet. Glad you got it working. Looks good.

[Author]

Posts