Forums

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)

/* 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" said:
...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:

		<img src=\"images/header-bg.jpg\" alt=\"header mockup\"><ul id=\"nav\">

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.

treehouse : what would you like to learn today?

Forums

Works in Safari and Firefox but not ie