SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: layout fine in firefox/opera bad in IE

  1. Dec 22, 2005 15:58 #1
    efhx
    efhx is offline
    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. Dec 22, 2005 19:01 #2
    fattyjules
    fattyjules is offline
    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. Dec 26, 2005 06:33 #3
    all4nerds
    all4nerds is offline
    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. Dec 28, 2005 19:10 #4
    efhx
    efhx is offline
    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
« Previous Thread | Next Thread »

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
  •  

Forum Rules