Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: CSS/IE Problems

  1. #1
    Regular Coder
    Join Date
    May 2006
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts

    CSS/IE Problems

    Hi there,

    I'm having some problems getting this website to display correctly in IE..

    The HTML..
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Northville High School Womens Basketball | Northville, MI</title>
    <meta http-equiv="Content-Language" content="English" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/girls/global/style2.css" media="screen" />
    </head>
    <body>
    	<div id="container">
    		<div id="top">
            	<img id="logo" src="/girls/images/logo.gif" />
    			<img id="title" src="/girls/images/title.gif" alt="Northville Mustang Girls Basketball" />
    		</div>
    		<div id="leftnav">
               <div id="menu">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Information</a></li>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">Alumni</a></li>
                        <li><a href="#">Camps & Clinics</a></li>
                        <li><a href="#">Links</a></li>
                    </ul>
                </div>
    		</div>
    		<div id="rightnav">
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
    			</p>
    		</div>
    		<div id="content-home">
    			<h2>Subheading</h2>
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    			</p>
    			<p>
    				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    			</p>
    		</div>
    		<div id="footer">
    		</div>
    	</div>
    </body>
    </html>
    The CSS..
    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	background: #CECECE;
    }
    
    #container {
    	width: 900px;
    	margin: 10px auto;
    	background-color: #fff;
    	color: #333;
    	border: 1px solid grey;
    	line-height: 130%;
    	}
    
    #top {
    	background: url(/girls/images/top3.jpg);
    	background-color: #ddd;
    	height: 100px;
    	}
    
    	#top h1 {
    		padding: 0;
    		margin: 0;
    		}
    		
    	#top #title {
    		position: relative;
    		bottom: 30px;
    		left: 5px;
    		}
    	
    	#top #logo {
    		margin-top: 4px;
    		width: 130px;
    		height: 84px;
    		}
    
    #leftnav {
    	float: left;
    	width: 140px;
    	margin: 0;
    	}
    
    #rightnav {
    	float: right;
    	width: 160px;
    	margin: 0;
    	padding: 10px;
    	}
    
    #content {
    	margin-left: 140px;
    	border-left: 1px solid black;
    	padding: 15px;
    	width: 550px;
    	}
    	
    #content-home {	
    	margin-left: 140px;
    	margin-right: 160px;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	padding: 15px;
    	width: 550px;
    	}	
    
    #footer {
    	clear: both;
    	margin: 0;
    	background: url(/girls/images/bottom.jpg);
    	height: 75px;
    	color: #333;
    	background-color: #ddd;
    	border-top: 1px solid black;
    	}
    
    #leftnav p, #rightnav p {
    	margin: 0 0 1em 0;
    	}
    	
    #content h2, #content-home h2 { 
    	padding: 10px;
    	}
    	
    #menu {
    	clear: both;
    	width: 140px;
    	font-size: 14px;
    	}
    	
    	#menu ul {
    		list-style: none;
    		margin: 0;
    		padding: 0;
    		}
    	
    	#menu li a {
    		height: 32px;
    		voice-family: "\"}\""; 
    		voice-family: inherit;
    		height: 24px;
    		text-decoration: none;
    		}	
    		
    	#menu li a:link, #menu li a:visited {
    		color: #CCC;
    		display: block;
    		background:  url(/girls/images/menu4.gif);
    		padding: 8px 0 0 10px;
    		}
    		
    	#menu li a:hover {
    		color: #FFF;
    		background:  url(/girls/images/menu4.gif) 0 -32px;
    		padding: 8px 0 0 10px;
    		}
    For some reason the content-home div is not moving all the way up to the top. I think its my misunderstanding of floats that is causing the problem. How can I fix this?

    Also, is it possible to get the content of content-home to appear a little higher? I've played around with the padding but it messes up the borders.

    Thanks in advance!

    FuZion

  • #2
    Regular Coder
    Join Date
    May 2006
    Posts
    152
    Thanks
    5
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •