SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout fine in firefox/opera bad in IE

    It works fine in Firefox and Opera but when I open it in IE something just goes wrong and I'm not 2 sure what it is. I would also like to get rid of the bullets and move the menu to the left if thats possible. I couldn't figure out how to do that and how to also change the background color to anything just so I can see where I change the color to the background of the site.

    Xhtml
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="Jayme Jackson" />
    	<meta name="keywords" content="" />
    	<meta name="description" content="" />
    	<meta name="robots" content="all" />
    	<title>blah bloop bleep blah</title>
    	<link href="css/main.css" type="text/css" rel="stylesheet" />
    
    	<link rel="Shortcut Icon" type="image/x-icon" href="" />	
    </head>
    
    <body>
    <div id="container">
        <div id="header"></div>
    	<div id="orange"></div>
    	<div id="bs1"></div>
    	<div id="left">
    			<div class="menu">Blank Text</div>
    
    				<ul id="nav">
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    					<li><a href="#">blank</a></li>
    
    					<li><a href="#">blank</a></li>
    				</ul>
    	
    	</div>
    	
    	<div id="right"></div>
    	<div id="bs2"></div>
        <div id="orange2"></div>
        <div id="footer">
            <p>Footer</p>
    
        </div>
    </div>
    
    </body>
    </html>
    CSS
    Code:
    body{
    	margin: 0;
    	padding: 0;
    	background-color:#666666
    	background-repeat: repeat-x;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:10px;
    	}
    
    p{
    	margin:0;
    	padding:0;
    }
    
    #outer {
    	width:100%;
    	background:#666;
    	margin:auto;
    	text-align:center;
    }
    #container{
    	background:#fff;
    	width:741px;
    	height:895px;
    	margin:0 auto;
    	padding:0;
    	}
    
    #header{
    	background-color:#ac0000;
    	width:740px;
    	height:75px;
    	margin:0;
    	padding:0;
    	text-align:right;
    	border-top:1px solid #ffffff;
    	border-bottom:1px solid #fff;
    	clear:both;
    	}
    #orange{
    	width:740px;
    	height:3px;
    	background-color:#ff8000;
    	clear:both;
    	float:none;
    	}
    #orange2{
    	width:740px;
    	height:3px;
    	background-color:#ff8000;
    	clear:both;
    	border-bottom:1px solid #fff;
    	float:none;
    	}
    #left{
    	width:190px;
    	height:827px;
    	background-color:#fff;
    	float:left;
    	border-right:solid 1px #666;
    	clear:none;
    	}
    #right{
    	width:550px;
    	height:827px;
    	background-color:#fff;
    	float:right;
    	clear:none;
    	}
    #navigation{
    	width:190px;
    	height:auto;
    	float:left;
    	}
    .menu{
    	background:url(../images/menu.gif) repeat-x #ac0000;
    	height:21px;
    	width:175px;
    	color:#fff;
    	padding-top:5px;
    	padding-left:5px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:13px;
    	margin-left:5px;
    	margin-right:5px;
    	background-color:#ac0000;
    	text-align:left;
    	float:left;
    	clear:both;
    	}
    #nav{
    	text-align:left;
     	width:180px;
     	float:left;
    	}
    #nav ul{
     	margin: 0;
     	padding-top:6px;
    	height:20px;
    	list-style-type: none;
    	background-color:#ed4b03;
    	text-align: right;
    	clear:both;
     }
    #nav ul li { 
    	display: inline;
    	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size:10px;
     }
    #nav ul li a{
    	text-decoration: none;
    	padding: 3px;
    	color:#666;
     }
    #nav ul li a:hover{
    	color: #666;
    	border-bottom:5px solid #fff;
     }
    #nav ul li a:active{
    	color:#666;
    	}
    #bs1{
    	background:#fff;
    	width:740px;
    	height:10px;
    	clear:both;
    	}
    #bs2{
    	background:#fff;
    	width:740px;
    	height:10px;
    	clear:both;
    	}
    #footer{
        background:#ac0000;
    	border-bottom:1px solid #101010;
    	width:740px;
    	height:10px;
    	clear:both;
        }
    h3{
    	font-size: 14px;
    	text-indent: 0em;
    	font-weight:bold;
    	color:#8fc9e4;
    	}
    h4{
    	font-size: 12px;
    	font-weight:bold;
    	color:#509ecc;
    	}
    a{
    	color: #ffffff;
    	padding:0px 9px 0px 9px;
    	text-decoration: none;
    }
    a:link {
    	color:#666;
    	text-decoration:none;
    }
    a:hover{
    	color:#001;
    	text-decoration:none;
    }
    a:visited {
     	color:#002;
    	text-decoration:none;
    }
    a:active { 
    	color:#003;
    	text-decoration:none;
    }
    acronym{
    	font-style:italic;
    	border-bottom: 1px dotted #8fc9e4;
    }

  2. #2
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First stop: your CSS selectors. To style the navigation list, don't create a rule for #nav ul, just #nav. For example, to turn off the bullets, you would create a rule;

    #nav { list-style-type: none; }
    not

    #nav ul { list-style-type: none; }
    There'll be plenty more to do after you fix that up, but that's all part of learning CSS.

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Have to guess how you want this

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="Jayme Jackson" />
    	<meta name="keywords" content="xx" />
    	<meta name="description" content="xx" />
    	<meta name="robots" content="all" />
    	<title>blah bloop bleep blah</title>
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	
    	body{
    	background:#666666; 
    	/*background-repeat:repeat-x; ? */
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:10px;
    	}
    	div,p{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;}
    	/*
    	#outer{
    	width:100%;
    	background:#666;
    	margin:auto;
    	text-align:center;
    	}
    	*/
    	#container{
    	background:#fff;
    	width:741px;
    	/*height:895px;*/
    	margin:0 auto;
    	}
    
    	#header{
    	background:#ac0000;
    	/*width:740px;*/
    	height:75px;
    	text-align:right;
    	border-top:1px solid #ffffff;
    	border-bottom:1px solid #fff;
    	/*clear:both;*/
    	}
    	#orange,#orange2{
    	height:3px;
    	background:#ff8000;
    	overflow:hidden;
    	/*width:740px;
    	clear:both;
    	float:none;*/
    	}
    	#orange2{border-bottom:1px solid #fff;}
    	
    	#left{
    	width:190px;
    	float:left;
    	border-right:solid 1px #666;
    	/*background:#ccffcc;
    	height:827px;
    	clear:none;*/
    	}
    	#right{
    	width:550px;
    	float:right;
    	/*
    	background:#ffffcc;
    	height:827px;
    	clear:none;*/
    	}
    	#right p{padding:0px 3px 5px 3px;}
    	/*
    	#navigation{
    	width:190px;
    	height:auto;
    	float:left;
    	}
    	*/
    	.menu{
    	background:#ac0000 url(../images/menu.gif) repeat-x;
    	/*height:21px;
    	width:175px;*/
    	color:#fff;
    	padding:5px 0 5px 5px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:13px;
    	margin:0 5px 0 5px;
    	/*float:left;
    	clear:both;*/
    	}
    	
    	/*#nav{
    	text-align:left;
     	width:180px;
     	float:left;
    	}*/
    	
    	#nav{/* ? #nav is the ul */
     	padding-top:0px;
    	list-style-type:none;
    	background:#ed4b03;
    	text-align:right;
    	margin:0 5px 0 5px;
    	/*clear:both;
    	height:20px;*/
     	}
    	* html #nav{height:1%;}
    	
    	#nav li{ /* ? #nav ul li
    	display: inline;
    	font-size:10px;*/
    	float:left;
    	width:100%;
    	
     	}
    	#nav li a{/* ? #nav ul li*/
    	text-decoration:none;
    	font-size:10px;
    	padding:3px;
    	color:#666;
    	display:block;
    	border-bottom:5px solid #ed4b03;
     	}
    	#nav li a:hover{
    	color: #666;
    	border-bottom:5px solid #fff;
     	}
    	#nav li a:active{
    	color:#666;
    	}
    	#bs1,#bs2{
    	/*background:#fff;
    	width:740px;
    	clear:both;
    	*/
    	height:10px;
    	overflow:hidden;
    	}
    	#bs2{clear:both;}
    	
    	#footer{
        background:#ac0000;
    	border-bottom:1px solid #101010;
    	height:20px;
    	overflow:hidden;
        }
    	#footer p{padding:3px 0 3px 3px;}
    	
    	h3{
    	font-size: 14px;
    	text-indent: 0em;
    	font-weight:bold;
    	color:#8fc9e4;
    	}
    	h4{
    	font-size: 12px;
    	font-weight:bold;
    	color:#509ecc;
    	}
    	a{
    	color: #ffffff;
    	padding:0px 9px 0px 9px;
    	text-decoration: none;
    	}
    	a:link {
    	color:#666;
    	text-decoration:none;
    	}
    	a:hover{
    	color:#001;
    	text-decoration:none;
    	}
    	a:visited {
     	color:#002;
    	text-decoration:none;
    	}
    	a:active { 
    	color:#003;
    	text-decoration:none;
    	}
    	acronym{
    	font-style:italic;
    	border-bottom: 1px dotted #8fc9e4;
    	}
    	head+body #nav:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	</style>
    
    	<!-- <link rel="Shortcut Icon" type="image/x-icon" href="" /> ? -->
    </head>
    
    <body>
    <div id="container">
        <div id="header"></div>
    	<div id="orange"></div>
    	<div id="bs1"></div>
    	<div id="left">
    			<div class="menu">Blank Text</div>
    
    				<ul id="nav">
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    				</ul>
    	
    	</div>
    	
    	<div id="right">
    	<p>right</p>
    	</div>
    	<div id="bs2"></div>
        <div id="orange2"></div>
        <div id="footer">
        <p>Footer</p>
        </div>
    </div>
    
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Dec 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    Have to guess how you want this

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    	<meta name="author" content="Jayme Jackson" />
    	<meta name="keywords" content="xx" />
    	<meta name="description" content="xx" />
    	<meta name="robots" content="all" />
    	<title>blah bloop bleep blah</title>
    	<style type="text/css">
    	*{margin:0;padding:0;}
    	
    	body{
    	background:#666666; 
    	/*background-repeat:repeat-x; ? */
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size:10px;
    	}
    	div,p{font-family:Verdana, Arial, Helvetica, sans-serif;font-size:13px;}
    	/*
    	#outer{
    	width:100%;
    	background:#666;
    	margin:auto;
    	text-align:center;
    	}
    	*/
    	#container{
    	background:#fff;
    	width:741px;
    	/*height:895px;*/
    	margin:0 auto;
    	}
    
    	#header{
    	background:#ac0000;
    	/*width:740px;*/
    	height:75px;
    	text-align:right;
    	border-top:1px solid #ffffff;
    	border-bottom:1px solid #fff;
    	/*clear:both;*/
    	}
    	#orange,#orange2{
    	height:3px;
    	background:#ff8000;
    	overflow:hidden;
    	/*width:740px;
    	clear:both;
    	float:none;*/
    	}
    	#orange2{border-bottom:1px solid #fff;}
    	
    	#left{
    	width:190px;
    	float:left;
    	border-right:solid 1px #666;
    	/*background:#ccffcc;
    	height:827px;
    	clear:none;*/
    	}
    	#right{
    	width:550px;
    	float:right;
    	/*
    	background:#ffffcc;
    	height:827px;
    	clear:none;*/
    	}
    	#right p{padding:0px 3px 5px 3px;}
    	/*
    	#navigation{
    	width:190px;
    	height:auto;
    	float:left;
    	}
    	*/
    	.menu{
    	background:#ac0000 url(../images/menu.gif) repeat-x;
    	/*height:21px;
    	width:175px;*/
    	color:#fff;
    	padding:5px 0 5px 5px;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-weight:bold;
    	font-size:13px;
    	margin:0 5px 0 5px;
    	/*float:left;
    	clear:both;*/
    	}
    	
    	/*#nav{
    	text-align:left;
     	width:180px;
     	float:left;
    	}*/
    	
    	#nav{/* ? #nav is the ul */
     	padding-top:0px;
    	list-style-type:none;
    	background:#ed4b03;
    	text-align:right;
    	margin:0 5px 0 5px;
    	/*clear:both;
    	height:20px;*/
     	}
    	* html #nav{height:1%;}
    	
    	#nav li{ /* ? #nav ul li
    	display: inline;
    	font-size:10px;*/
    	float:left;
    	width:100%;
    	
     	}
    	#nav li a{/* ? #nav ul li*/
    	text-decoration:none;
    	font-size:10px;
    	padding:3px;
    	color:#666;
    	display:block;
    	border-bottom:5px solid #ed4b03;
     	}
    	#nav li a:hover{
    	color: #666;
    	border-bottom:5px solid #fff;
     	}
    	#nav li a:active{
    	color:#666;
    	}
    	#bs1,#bs2{
    	/*background:#fff;
    	width:740px;
    	clear:both;
    	*/
    	height:10px;
    	overflow:hidden;
    	}
    	#bs2{clear:both;}
    	
    	#footer{
        background:#ac0000;
    	border-bottom:1px solid #101010;
    	height:20px;
    	overflow:hidden;
        }
    	#footer p{padding:3px 0 3px 3px;}
    	
    	h3{
    	font-size: 14px;
    	text-indent: 0em;
    	font-weight:bold;
    	color:#8fc9e4;
    	}
    	h4{
    	font-size: 12px;
    	font-weight:bold;
    	color:#509ecc;
    	}
    	a{
    	color: #ffffff;
    	padding:0px 9px 0px 9px;
    	text-decoration: none;
    	}
    	a:link {
    	color:#666;
    	text-decoration:none;
    	}
    	a:hover{
    	color:#001;
    	text-decoration:none;
    	}
    	a:visited {
     	color:#002;
    	text-decoration:none;
    	}
    	a:active { 
    	color:#003;
    	text-decoration:none;
    	}
    	acronym{
    	font-style:italic;
    	border-bottom: 1px dotted #8fc9e4;
    	}
    	head+body #nav:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	</style>
    
    	<!-- <link rel="Shortcut Icon" type="image/x-icon" href="" /> ? -->
    </head>
    
    <body>
    <div id="container">
        <div id="header"></div>
    	<div id="orange"></div>
    	<div id="bs1"></div>
    	<div id="left">
    			<div class="menu">Blank Text</div>
    
    				<ul id="nav">
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    					<li><a href="##">blank</a></li>
    
    					<li><a href="##">blank</a></li>
    				</ul>
    	
    	</div>
    	
    	<div id="right">
    	<p>right</p>
    	</div>
    	<div id="bs2"></div>
        <div id="orange2"></div>
        <div id="footer">
        <p>Footer</p>
        </div>
    </div>
    
    </body>
    </html>
    thx alot its working great now


Bookmarks

Posting Permissions

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