Forums

NinaMorena

I love this site and it has helped a great deal in designing layouts first and coding second!!

I had to throw a quick page up for a client who wants to promote his pool party. I ran into a bit of a menu issue.

http://www.homemadela.com/intropage.html

The left navigation looks great in FF however in IE, the left navigation menus are off. How do I solve this using CSS? Listed below is my css code for the site. The Div markers "Left-Nav-Home" is where the menu items are listed. Any help is appreciated.

/* CSS Document */
	
body {
	font-size: 62.5%;
	font-family: verdana, sans-serif;
	background: url(../images/white_bg.png) repeat top #FFF;
	} 
	
h1 {
	font-family: verdana, sans-serif;
	font-size: 18px;
	color: #7bc5e9;
	}
	
a.link {color:#7bc5e9; text-decoration:none;}
a.visited {color:#7bc5e9; text-decoration:none;}
a.hover {color: #7bc5e9; text-decoration:underline;}
a.active {color: #7bc5e9;}
		
	
div#page-wrap {
		width: 908px;
		margin: 0 auto;
		}
		

div#main-content {
		padding-top: 0px;
		width: 908px; 
		background: url(../images/white_bg.png) repeat top;
		}
		
		
		
ul#footer-content {
	    width: 470px; height: 200px;
		padding-left: 40px;
		float: left;
		}
		
ul#nav {
		margin-left: 150px;
		height: 52px; width: 892px;
		background: url(../images/home_made_logo.png) no-repeat; 
		margin-top: 0px;
}


div#content-holder {
		float: right;
		height: 1401px; width: 700px;
		background: url(../images/main_paragraph.png) no-repeat;
		margin-top: 0px;
		}
		div#content-holder-text {
		height: 1400px;
		width: 472px;
		margin-top: 20px;
		}
		
div#left-nav-home {
		float: left;
		height: 497px; width: 186px; 
		background: url(../images/left_nav.png) no-repeat;
		margin-top: 0px;
		}
		
ul#left-nav-home-text {
		height: 497; width: 186px;
		margin-top: 60px;
		margin-left: 12.5px;
		list-style: none;
		}
		ul#left-nav-home-text li a{					
					display: inline;
					}
ul#left-form {
		height: 200px;
		width: 100px;
		margin-top: 110px;
		margin-left: -20px;
					}
					
a.left-nav-home:link {color:#FFFFFF; font-size: 15px; text-decoration:none; font-weight:400}
a.left-nav-home:visited {color: #FFFFFF; font-size: 15px; text-decoration: none; font-weight:400}
a.left-nav-home:hoover {color:#FFFF00; font-size: 15px; text-decoration:underline; font-weight:400}
a.left-nav-home:active {color: #FFFFFF; font-size: 15px; text-decoration: none; font-weight:400}
		

.clear {clear:both;}

.form-button {
			background-color:#FFFFFF; 
			border: #7bc5e9 solid 2px;
			font-size: 12px;
			}
			
.form-field {
			background-color:#FFFFFF; 
			border: #7bc5e9 solid 2px;
			font-size: 12px;
			}

div#footer {
width: 275px;
height: 25px;
margin-top: 50px;
padding-bottom: 10px;
}

wmwood

Sorry to be vague....

You need to do a if IE statement
Ex: (Put in the header of the HTML)

<!--[if IE]>
<style type=\"text/css\"> 

/* Put the CSS id or class with attributes that make it look right in IE Here */

</style>
<![endif]-->

treehouse : what would you like to learn today?

Forums

FF vs. IE 7