CSS - Css Navbar Not Displaying Properly In Other Browsers

Surprise, surprise...

[edit]link removed...[/edit]

In FF the list of links that represent the toon archive are dispayed as two columns just like I want, but IE isn't performing properly, showing it as one list right under the other...

[note]
The CSS is in the head, I haven't exported to a seperate file sheet yet since it's still in development.
[/note]

Hello

Can anyone tell me where this code is going wrong, works fine in IE, firefox shows all the menu under one another.

Here is my code - css

Code:

div#menuContainer
	{ width:146px;
	position:absolute; 
	margin:0px; 
	background:#ffffff;
	height:400px; }

  
ul#mainMenu{	 margin:0; 
	padding:1px 0; 
	list-style:none;
	 width:100%;
	 height:21px; 
	border-left:1px solid #ffffff;
	   font-family:verdana, arial, helvetica;
	   font-size:12px;}
					
ul#mainMenu li{ margin:0; 
		padding:0; 
	         display:block;
		float:left;
					position:relative;
		width:146px; }
	
ul#mainMenu li a:link{ 	padding:4px 0; 					display:block;					text-align:center;					text-decoration:none; 	background-color:#333333;					color:#ffffff; 					width:146px; 					height:25px; 				border-right:1px solid #ffffff;				border-top:1px solid #ffffff;
		font-family:Arial, Helvetica, sans-serif;			font-size:16px;}


ul#mainMenu li a:visited{ 	padding:4px 0; 					display:block; 
			text-align:center; 
			text-decoration:none; 
			background-color:#999999; 
			border-top:1px solid #ffffff;
			border-right:1px solid #ffffff;
			color:#ffffff; 
			width:146px; 
			height:25px;
			font-family:Arial, Helvetica, sans-serif; }
								
ul#mainMenu li a:hover{	padding:4px 0;
			display:block;
			text-align:center; 
			text-decoration:none; 
			background-color:#666666;
			color:#ffffff; 
			width:146px; 
			height:25px; 
			border-right:1px solid #ffffff;
			border-top:1px solid #ffffff;
		font-family:Arial, Helvetica, sans-serif; }
								
ul#mainMenu li a:active{ 	padding:4px 0; 				display:block;
			text-align:center; 
			text-decoration:none;
			background-color:#999999;
			color:#ffffff; 
			width:146px; 
			height:25px; 
			border-right:1px solid #ffffff;
			border-top:1px solid #ffffff;
		font-family:Arial, Helvetica, sans-serif;}
								

ul#mainMenu	li ul.subMenu	{	 	display:none;					margin:0; 					padding:0; 
	list-style:none; 					position:absolute; 
		left:147px; 
		top:0px; 
		padding:1px 1px 0 1px;  
		border-right:1px solid #FFFFFF; 
		background:#ffffff; 
		z-index:1000; }
										
					
ul#mainMenu li:hover ul.subMenu{ display:block; }

ul#mainMenu li ul.subMenu li{ 	width:146px; 
					clear:left;
										} 

ul#mainMenu li ul.subMenu li a:link {	clear:left; 
			background-color:#000066;				padding:4px 0; 
			width:146px; 
			border:none; 
			border-bottom:1px solid #ffffff; 
			position:relative;
			z-index:1000;
												}
												
ul#mainMenu li ul.subMenu li a:visited{ 	clear:left; 
			background-color:#000099; 
			padding:4px 0; 
			width:146px; 
			border:none; 
			border-bottom:1px solid #ffffff; 
			position:relative; 
		z-index:1000; }
													
ul#mainMenu li ul.subMenu li:hover a{	clear:left; 
		background-color:#000099;
		padding:4px 0; 
	width:146px; 
		border:none; 
		border-bottom:1px solid #ffffff; 
		position:relative; 
		z-index:1000;}
												
ul#mainMenu li ul.subMenu li a:active{	clear:left; 
		background-color:#000099; 
	padding:4px 0; 
	width:146px; 
	border:none; 
	border-bottom:1px solid #ffffff; 
	position:relative;					z-index:1000;}
												
ul#mainMenu li ul.subMenu li a:hover{ 	clear:left; 
			background-color:#000099; 
			padding:4px 0; 
				width:146px; 
			border:none; 				border-bottom:1px solid #ffffff; 
			position:relative;					z-index:1000; }

ul#mainMenu li ul.subMenu li ul.subMenu1{ 	display:none;
						margin:0;						padding:0;					list-style:none; 
	position:absolute; 
	left:147px; 
top:-2px;
padding:1px 1px 0 1px;					border-right:1px solid #FFFFFF; 			background:#ffffff; 				z-index:900; }
														
ul#mainMenu li ul.subMenu li:hover ul.subMenu1{ display:block; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:link{ background-color:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:visited{ background:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li:hover a{ background:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:hover{ background:#000099; }

ul#mainMenu li ul.subMenu li ul.subMenu1 li a:active{ background:#000099; }

ul#mainMenu li ul.subMenu li a span{ 	position:absolute; 
			top:0; 
	left:132px; 					font-size:12pt; 
	color:#fe676f; }
												
ul#mainMenu li ul.subMenu li:hover a span{ 	position:absolute; 					top:0; 						left:132px; 					font-size:12pt;					color:#ffffff; }
														
ul#mainMenu li ul.subMenu li a:hover span{ 	position:absolute; 					top:0; 						left:132px; 
font-size:12pt; 
color:#ffffff; }
														

html
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<link rel="stylesheet" type="text/css" href="menu_style.css" />
</head>
<body>

<div id="menuContainer">
		<ul id="mainMenu">
		<li><a href="#" name="Home">Home</a></li>
		<li><a href="#" name="Services">Services</a></li>
			<ul class="subMenu">
				<li><a href="#" name="internet marketing">Internet Marketing</a></li>
				<li><a href="#" name="web development">web development</a></li>				
				<li><a href="#" name="e-commerce">e-commerce</a></li>
			</ul>
	
		<li><a href="#" name="About">About Us</a></li>
		<li><a href="#" name="case studies">Case Studies</a></li>
		<li><a href="#" name="Jobs">Jobs at toltech</a></li>
		
		<li><a href="#" name="Contact Us">Contact Us</a></li>
			<ul class="subMenu">
				<li><a href="#" name="Location">Location</a></li>
				<li><a href="#" name="Enquiry Form">Enquiry Form</a></li>
			</ul>
	</ul>
	
</div>



</body>
</html>

Thanks in advance,
gillian

I am just muddling through tweaking my weblog at the mo - learning as I go. But I have come accross something that I just can't pinpoint the solution for. I was hoping someone here could look at it with a fresh [and more knowledgeable] perspective.

I have been googling, reading, researching, experimenting and generally pulling my hair out for about 12 hours now and am still no closer.

The problem is that I have a div (with the id of "left bar") which I would like to sit on the left hand side of my page. It displays perfectly in firefox but in IE the whole section sits to the extreme right.

Here is the link to the SITE

Here is a link to some SCREENSHOTS

The code:CSS

Code:

/*left bar  */

#left_bar {
	float: left;
        position: absolute;
	padding-left: 2px;
	margin: 160px 12em 0px 0px;
	width: 200px;
	display: inline;
}


#left_bar ul {
	color: #336666;
	font-weight: bold;
	text-transform: lowercase;
	list-style-type: none;
	margin: 0;
	padding-left: 1px;
}
#left_bar ul li {
	font: italic normal 100% 'Times New Roman', Times, serif;
	text-align: right;
	letter-spacing: 0.1em;
	margin-top: 10%;
        margin-right: 10%;
        float: none;
	padding-bottom: 2px; 

}
#left_bar ul ul {
	font-variant: normal;
	font-weight: normal;
	line-height: 100%;
	text-align: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#left_bar ul ul li {
	font: normal normal 70%/115% 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
	letter-spacing: 1px;
	border: 0;
	margin-top: 0;
	padding: 0;
	padding-left: 8px;
}
#left_bar ul ul li a {
	color: #996699;
	text-decoration: none;
}
#left_bar ul ul li a:hover {
	border-bottom: 1px solid #660066;
}

The code: html

Code:

<div id="left_bar">
<ul>
<li id="calendar">
	<?php require( dirname(__FILE__).'/_calendar.php' ); ?>
	</li>
</ul>
<ul>
<li>
	<?php require( dirname(__FILE__).'/pophis.php' ); ?>
	</li>
</ul>

<br />
<ul>
<li>
<ul>
<li>
	<?php require( dirname(__FILE__).'/misc.php' ); ?>

</li>
</ul>
</li>
</ul>

</div>

Any thoughts, help, suggestions..... anything...... would be v much appreciated!

The middle content column on our page, (code shown below) is not displaying in IE5 and IE6. Any ideas as to why?

see page at federalacqusitionservice
Code:

start code

-->
</style>
</head>
<body>
<!-- Generated at () -->
<div id="container" >
<div id="banner" >
<div align="left"><img src="(URL address blocked: See forum rules)" width="400" height="63" /><img src="(URL address blocked: See forum rules)" width="60" height="63" />
<script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 468x60, created 7/17/08 */
google_ad_slot = "7082054352";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="()">

</script></div>
<h1><a href="()">Home</a> | advertise | about us | Contact US</h1>

</div>
<div id="outer" >
<div id="inner">
<div id="left" >
<h2><img src="()" />&nbsp;</h2>


<div align="left">
<script type="text/javascript"
src="()"></script>
<br />
<table width="195" border="0">
<tr>
<td><div align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 120x90, created 7/17/08 */
google_ad_slot = "9592010100";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)">
</script>
</div></td>
</tr>
</table>

<br />
<img src="()" alt="Featured Links" width="200" height="34" /><br />
<br />
<table width="195" border="0">
<tr>
<td> <div align="center">
<img src="()" width="185" height="45" /><br />
<br />
<img src="()" width="185" height="45" /><br />
<br />
<img src="()" width="185" height="45" /><br />
<br />

<script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 120x240, created 7/14/08 */
google_ad_slot = "0661630514";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="()">
</script>
</div></td>
</tr>
</table>
<br />
<br />
<br />
</p>
</div>
</div>

<div id="right" >
<h2><img src="()" /></h2>
<pre class="style1"><h2><a href="()">(URL address blocked: See forum rules)</a><br />Printing, Promo Items, WebSites
<a href="http)">()</a><br />Import to the US with confidence
<a href="httprules)">linkstodc.com</a><br />Washington, DC business <br />and living directory.<br /><a href="(URL address blocked: See forum rules)">stickerrocket.com</a>
custom sticker, stock labels
<a href="(rules)">hostingone.ca</a><br />Affordable web hosting
<br />
Become a sponsor to
federalacqusitionservice.com
click here</h2>
<br />
<br /><script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 120x90, created 7/14/08 */
google_ad_slot = "4200878981";
google_ad_width = 120;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)">
</script>
<br /><br />
<br />
<br />

</div>

<div id="content">
<h2><img src="(rules)" width="546" height="34" /><br />
</h2>
<table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)">
<tr>
<td width="268" height="127" valign="top"><table width="234" height="42" border="0" align="center">
<tr>
<td width="228" height="38" valign="top"> FederalAcquisitionService.com is the link directory for Federal, State, Local and non-profit contracting sources. </td>
</tr>
</table>
<table width="234" border="0" align="center">
<tr>
<td width="134" valign="top">Check back regularly to see an even greater number of Federal acquisition links.</td>
<td width="90"><img src="(URL address blocked: See forum rules)" alt="US Link Directory" width="90" height="60" /></td>
</tr>
</table> </td>
<td width="267" valign="top"><table width="234" height="42" border="0" align="center">
<tr>
<td valign="top">Reach your clients through sponsored <a href="httpURL address blocked: See forum rules)">text links</a> and <a href="httprules)">featured links</a> on FederalAcquisitionService.com. <br /></td>
</tr>
</table>
<table width="234" border="0" align="center">
<tr>
<td width="134" valign="top">Text links start at only $9.95 per month, featured image links start at $99 per year.</td>
<td width="90"><img src="(forum rules)" alt="Premium Links" width="90" height="60" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="14" colspan="2" valign="top"><div align="center"><script type="text/javascript"><!--
google_ad_client = "pub-3947167825178840";
/* 468x60, created 7/17/08 */
google_ad_slot = "6799108791";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="(URL address blocked: See forum rules)">

</script
>
<br />
</div></td>
</tr>
</table>
<img src="(rules)" width="546" height="34" />
<table width="543" align="center" style="border-left: 1px solid rgb(192,192,192); border-right: 1px solid rgb(192,192,192); border-top: 0px solid rgb(192,192,192); border-bottom: 1px solid rgb(192,192,192)">
<tr>
<td valign="top"><div align="right"><a href="!!tophits!!"><img src="(rules)" width="82" height="35" border="0" /></a><a href="!!whatsnew!!"><img src="(URL rules)" width="50" height="35" border="0" /></a><a href="!!rgs_login!!"><img src="(rules)" width="57" height="35" border="0" /></a><a href="!!add_url_link!!"><img src="(URL rules)" width="73" height="35" border="0" /></a><a href="!!add_premium_url_link!!"><img src="( See forum rules)" width="136" height="35" border="0" /></a><a href="!!register!!"><img src="(rules)" width="72" height="35" border="0" /></a><br />
<br />
</div>
<form method="POST" action="(: See forum rules)">
<p align="center"><input type="text" name="keywords" size="33"><input type="submit" value="Search"
name="B1"> <a href="(forum rules)">Advanced</a></p>
</form>
<div align="left">!!psdata!!<br />
<br />
</div></td>
</tr>
</table>
<h2><br />
<br />
<br />
</h2>
</div>
</div>
<!-- end inner -->
</div><!-- end outer -->
<div id="footer"><h1 align="center">C federalacquisitionservice.com 2008</h1>
</div>

</div><!-- end container -->
</body>
</html>
Code:

end code

Hi everyone,

This is my first time posting, I'm having a issue getting my site to appear correctly in IE7. It displays properly in all other major browsers (firefox, safari, chrome, opera and even ie6) but for some reason in IE7 the header imager overlaps the menubar.

The site is (vividmark.com.au) and if anyone could shead some light on this, I'd be very greatful.

Thanks.

Hello everyone; I've been working on my webpage and I just noticed that my page loaded differently ( not aligned ) in my friends wide screen Laptop. I was hoping if anyone knows of a way to display the webpage properly no matter what resolution or screen? would this be done with css or just plain HTML?

please let me know.
thank you.

mamut

Thanks for taking the time to read my question.

I have 2 types of pages. One with 2 colums and one with 3. If I have only one row, it all works out fine. When I add subsequent rows, the page gets all messed up.

Why?

How do I make "contentleft" always be on the lefthand side?


CSS

Code:

body {
  text-align:center;
  margin-top: 0px;
  background-color: #d8d8d8;
}

a:visited {
color:#c0c0c0;
}
a:hover {
color:red;
}
a {
color:white;
}

#frame {
width: 640px;
text-align: center;
}

#main {
background-color: #6699cc;
width: 640px;
}

#main p.pagetitle {
color: white;
font-size: 32;
}

#main p.title {
color: white;
font-size: 22;
text-align: left;
text-decoration: underline;
font-weight: bold
}

#sub {
background-color: #6699cc;
width: 640px;
padding-left: 20px;
padding-right: 20px;
}

#sub p.titleleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}

#sub p.titlecenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
text-decoration: underline;
}

#sub p.titleright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
text-decoration: underline;
}

#sub p.contentleft {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;

}

#sub p.contentcenter {
float: left;
color: #000073;
font-size: 15;
width: 160px;
padding: 5px;
}

#sub p.contentright {
float: left;
color: #000073;
font-size: 15;
width: 280px;
padding: 5px;
}

#sub p.titlerightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}

#sub p.titleleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
text-decoration: underline;
}

#sub p.contentrightright {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}

#sub p.contentleftleft {
float: left;
color: #000073;
font-size: 15;
width: 299px;
padding: 5px;
}

html: 3 colum example.
Code:

<html>
<!-- Generated by AceHTML Freeware http://freeware.acehtml.com -->
<!-- Creation date: 10/15/04 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="bradsonorus@hotmail.com">
<meta name="generator" content="AceHTML 5 Freeware">
<link rel="StyleSheet" type="text/css" href="test.css">
</head>
<body>
<div id="frame">
<div id="main">
<img src="C:/Lisa/images/topbar.png" width="640" height="30" alt="">
<img src="C:/Lisa/images/highburyschool.jpg" width="166" height="104" alt="Highbury School, Winnipeg, Manitoba, Canada">
<span>&nbsp;</span>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="500" height="100" id="LisasNavBar" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="C:/Lisa/LisasNavBar.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#6699cc" />
<embed src="C:/Lisa/LisasNavBar.swf" quality="high" bgcolor="#6699cc" width="500" height="100" name="LisasNavBar" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
<p class="pagetitle">TESTS</p>
<p class="title">Tests:</p>
</div>
<div id="sub">
<p class="titleleft">Test Topic / Subject</p>
<p class="titlecenter">Test Date</p>
<p class="titleright">Suggestions</p>
<p class="contentleft">Math: Long Division Test</p>
<p class="contentcenter">Tuesday, October 15, 2004</p>
<p class="contentright">Review pages 31 to 40 in Math text.</p>
<p class="contentleft">English: Spelling Test</p>
<p class="contentcenter">Tuesday, October 22, 2004</p>
<p class="contentright">Practice all the 17 syllable words, they will be on the test.</p>
<p class="contentleft">Phys. Ed.</p>
<p class="contentcenter">Tuesday, November 5, 2004</p>
<p class="contentright">Full Marathon. Those that don't make it under the 5 hour limit will fail.</p>
<p><hr width="80%"></p>
<p><a href="C:/Lisa/home.htm">Home</a> | <a href="C:/Lisa/homework.htm">Homework</a> | <a href="C:/Lisa/projects.htm">Projects</a> | <a href="C:/Lisa/specialevents.htm">Special Events</a> | <a href="C:/Lisa/tests.htm">Tests</a> | <a href="C:/Lisa/links.htm">Links</a></p>
</div>
<img src="C:/Lisa/images/bottombar.png" width="640" height="30" alt="">
</div>
</body>
</html>

I've searched around the web for a solution to this problem and have found other with BG display problems, but none that were exactly the same. Others seems to have a persistant problem, while mine only occurs about 20% of the time a page is loaded. Basically I have a div within a div. The inner div has variable content ranging from images, text, and tables, some of which are floated. The outer div has a superfish style menu in it. The height of the inner div is set to 100% to expand with the content within, and the outer div height is set to 100% to expand along with the inner div. Basically, two kinds of errors appear at random with IE. 1) a thin line of the outer div background color is missing at the bottom of the div just about corners rounded with RUZEE.ShadedBorder, or 2) a larger block of the background is missing just above the rounded corners. It only happens sporatically in IE, and usually pressing Reload fixes the problem. These divs are also enclosed within another container div, but its the smaller inner container div that is having the problem. It happens on all of the pages in my site about 20% of the time they are loaded up.

Does anyone know why I'm having this problem? Any help is greatly appreciated!

Here are two images of what I'm talking about followed by my CSS for those two divs.

http:// i1093.photobucket.com/albums/i428/kan3xiao/Clipboard01.jpg
http:// i1093.photobucket.com/albums/i428/kan3xiao/Clipboard02.jpg

(remove the extra spaces after http://)

#outerDiv {
background-color: #BBDB56;
height: 100%;
padding: 1px 20px 23px 5px;
width: 860px;
margin: 15px auto 0px auto; }

#outerDiv, #outerDiv .sb-inner {
background: #bbdb56; }

#innerDiv {
margin: 15px 0px 0px 160px;
padding-bottom: 0px;
background-color: #fff;
height: 100%;
}

Hi all,

This is the xHTML link

This is the CSS file.

Please open this in Internet Explorer.

Notice that when the drop-down menu falls over the drop-down list form, it gets hidden beneath the list.

I've spent a whole week trying to fix this but wasn't successful

This works perfectly in Firefox though.


Thanks!!

I have edited this page down to be bare-bones for ease...

The background image only shows behind the 'branding' div. It used to show all the way down. The problem is somewhere in the style sheet because it looks the same even when I take out all content between the body tags. I am not sure what mistake I made.

When you look at the style sheet you will find html#orchid to be commented out. I realized how to work with that to fix the problem, however I want to know what is causing this problem in the first place, for my further education.

http://www.centerpointpilates.com/welcome2.html code:

Code:

<?xml version="1.0" encoding="iso-8859-1"?><!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" lang="en" xml:lang="en">
<head>
<title>CENTERPOINT PILATES :: a Santa Barbara pilates studio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="/centerpoint.css" rel="stylesheet" type="text/css" />
</head>
<body background="/images/orchidYellowOverlay2.jpg" style="background-repeat: no-repeat; background-position: top left;">
<div id="branding"> 
  <h1>CenterPoint Pilates - Exercising the Body and Mind</h1>
</div>
<!--end branding-->
<div id="content"> 
  <div id="navigation"> 
    <ul>
      <li><a href="/welcome.html">WELCOME</a></li>
      <li><a href="/studio.html">STUDIO</a></li>
      <li><a href="/getting-started.html">GETTING STARTED</a></li>
      <li><a href="/classes.html">CLASSES</a></li>
      <li><a href="/schedule.html">CLASS SCHEDULE</a></li>
      <li><a href="/workshops.html">WORKSHOPS</a></li>
      <li><a href="/pricing.html">PRICING</a></li>
      <li><a href="/instructors.html">TEACHERS</a></li>
      <li><a href="/contact-us.html">CONTACT US</a></li>
    </ul>
  </div>
  <!--end navigation-->
  <div id="text"> 
    <h2>Welcome</h2>
    <p>CenterPoint Pilates was founded in 2001 with the goal of inspiring each 
      individual on a program of exercising the body and mind. Our certified teachers 
      provide exceptional guidance in private, group, and class settings. The 
      studio is equipped with classic and contemporary exercise apparatus and 
      boasts a stunning view of the Santa Ynez Mountains and downtown Santa Barbara.</p>    
    </div>
  <!--end text-->
</div>
<!--end content-->
</body>
</html>

style sheet code:

Code:

/* Normalizes margins, padding */
body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, blockquote, th, td {
	margin: 0;
	padding: 0; 
}
/* Normalizes font-size for headers */
h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}
/* Removes Styles from lists */
ol, ul {
	list-style: none; 
}
/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
/* Removes list-style from lists */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Removes border from fieldset and img */
fieldset, img {
	border: 0;
}
/* Left-aligns text in caption and th */
caption, th {
	text-align: left;
}
/* Removes quotation marks form q */
    q:before, q:after {
    content: '';
}
/* normalizes links */
a:link {
   text-decoration: none;
   color: #6b9d98;
}
a:hover {
    color: red;
}
a:visited {
   text-decoration: none;
   color: #0B6E64;
}
/*----------------------------------------------------------------*/
html {
	background-color: #F6EEC2;
	text-align: center;	
}

body {
     font-family: Arial, sans-serif, Geneva, sans-serif;
	 color: #6B9D98;
	 width: 770px;
	 margin: 0 auto;
	 margin-left: 10px;
	 text-align: left;
	 position: relative;
	 
}
bodyBold {	
	
	font-family: Arial, sans-serif, Geneva, sans-serif;
	font-weight: 700;
	 color: #6B9D98;
	 width: 770px;
	 margin: 0 auto;
	 margin-left: 10px;
	 text-align: left;
	 position: absolute;
}
/*html#orchid {
    background-image: url(/images/orchidYellowOverlay2.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}*/
#branding {
     background:  url(images/logo.gif) top left no-repeat;
	 text-indent: -9999px;
	 height: 70px;
	 margin: 0 0 30px 0;
}

div#content {
     position: relative;
	 width: 100%;
}

div#navigation {
     position: absolute;
	 left: 0;	 
	 width: 13%;
	 padding-top: 1em;
	 
}

div#navigation li {
     font-weight: bold;
	 font-size: .9em;
	 border: 1px solid #6B9D98;
	 width: 115px;
	 padding-bottom: 3px;
	 padding-top: 3px;
	 text-align: center;
	 margin: 0 0 20px 0;
}

div#text {
     position: absolute;
	 left: 17%;	
	 width: 80%;
	 border-left: 1px solid #6B9D98;
	 padding-left: 10px;
}

div#site_info{    	 
	 text-align: center;
	 margin-top: 10px;	 
	 font-family: Arial, sans-serif, Geneva, sans-serif;
	 font-size: .9em;
	 font-style: italic;
	 color: #6B9D98;
	 padding-bottom: 3px;	 
}

h2 {
     font-size: 1.35em;
}
indentBox {
     border: 1px solid #6B9D98;
	 width: 115px;
	 padding-bottom: 3px;
	 padding-top: 3px;
	 text-align: left;
	 margin: 0 0 0 0;
}

I've got a mostly-css layout he

http://highballsociety.com/~lwco/test.php

Using the following CSS page he

http://highballsociety.com/~lwco/lwc.css

For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help.

Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes.

Thanks,
m__

Here is a quick visual layout of my page

(container)
(div banner)
(div left column) (div middle content) (div right column)
(div footer)

In my (div left column) is a list that is aligned right which works great. However, lower in the (div left column) I wish to make another list and align it left. The problem is it won't align all the way to the left. It stops at about the center of the div. I didn't notice it on the first list because it aligned right just fine but it also stops in the middle.

Here is the HTML:
(go easy on the coding, I'm still pretty new at this stuff)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="css/common.css" type="text/css" media="screen" />
<title>Las Vegas Floor Care</title>
</head>

<body id="body">
<div id="container">
<div id="banner">
</div>
<div id="content">
<div id="content_left">
<div class="links">
<ul class="list">
<li><a href="index.htm"><span class="list_big">H</span>OME <span class="list_big">P</span>AGE</a></li>
<li><span class="list_big">R</span>ESIDENTIAL</li>
<li><span class="list_big">C</span>OMMERCIAL</li>
<li><span class="list_big">C</span>ONTACT <span class="list_big">U</span>S</li>
</ul>
</div>
<div class="special_offers">Special Internet Offers</div>
<img class="image_center" src="images/coupon.jpg" />
<ul class="list_offers">
<li>Test 1</li>
<li>Test 2</li>
</ul>
</div>
<div id="content_middle">
<div id="content_middle_top">
</div>
<p class="text"><img src="images/slogan.jpg" style="float:left; margin-right:2px" /> At Las Vegas Floor Care we use Prochem truck mount extractors, which have been rated number one for over 30 years. We also use the Bridgpoint brand of treatment solutions that are eco friendly, pet friendly, and are even biodegradable. We offer carpet repair, cleaning, and protection making you get more out of your carpet no matter what the situation. We also offer 3 different types of tile cleaning to fit the condition of your tile and your pocket book.</p>
<br />
<p class="text">We cater to all aspects of cleaning ranging from the average home owner who wants clean floors to the executive who needs to keep their office in tip top shape, and everything in between. There is no job too big or small. We offer several service packages for home owners with yearly service contracts.</p>
<div id="content_middle_bottom">
</div>
</div>
<div id="content_right">
<img class="image_center" src="images/contact.jpg" />
<div class="side_text">If you have questions or would like to schedule a cleaning, please contact us at <span class="contact_number">(702) 756-0148</span>.</div>
</div>
</div>
<div id="bottom">
<img src="images/bottom_top.jpg" align="top"/>
<p class="bottom_text">
Phone: (702) 756-0148
<br />
Fax: (206) 350-7320
<br />
</p>
</div>
</div>
</body>
</html>

Here is the CSS:

Code:

#banner {position:relative; width:700px; height:130px; clear:both; background-image:url(../images/banner.jpg)}

#body {text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; background-image:url(../images/bg.jpg); margin-top:20px; background-position:center}

#bottom {position:relative; text-align:right; width:700px; clear:both; background-color:#970000}

.bottom_text {font-family:Calibri; font-size:14px; text-align:right; margin:0px 8px 0px 4px; color:#CCCCCC}

.contact_number {font-family:Calibri; font-size:12px; color:#970000}

#container {width:700px; margin-left:auto; margin-right:auto; text-align:left}

#content {position:relative; width:700px; overflow:auto; background-image:url(../images/content_bg.jpg); background-position:center}

#content_left {float:left; width:138px; margin-right:5px; clear:left}

#content_left_bottom {width:138px; background-color:#FF3399}

#content_left_top {width:138px; background-color:#FF3399}

#content_middle {float:left; width:414px}

#content_middle_bottom {width:414px; height:100px; background-image:url(../images/middle_bottom.jpg)}

#content_middle_top {width:414px; height:30px; background-image:url(../images/middle_top.jpg)}

#content_right {float:left; width:138px; margin-left:5px; clear:right}

#content_right_bottom {width:138px; background-color:#00FF00}

#content_right_top {width:138px; background-color:#00FF00}

.image_center {margin-left:auto; margin-right:auto; text-align:center; display:block}

.links a:link {text-decoration:none; color:#666666}
.links a:visited {text-decoration:none; color:#666666}
.links a:hover {text-decoration:underline; color:#970000}
.links a:active {text-decoration:none; color:#970000}

.list {font-family:Calibri; font-size:14px; list-style:none; text-align:right; margin:0px 4px 20px 4px; border-bottom:solid; border-bottom-width:1px; border-bottom-color:#666666; padding-bottom:10px; padding-right:4px; color:#666666}

.list_big {font-family:Calibri; font-size:18px}

.list_offers {font-family:Calibri; font-size:12px; list-style:none; text-align:left; margin-left:0px; overflow:auto; color:#666666}

.side_text {font-family:Calibri; font-size:12px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

.special_offers {font-family:Calibri; font-size:18px; text-align:center; margin-left:4px; color:#970000}

.text {font-family:Calibri; font-size:14px; text-align:justify; margin:0px 4px 0px 4px; color:#666666}

Thanks ahead of time for any help.

hey i was just wondering how i can fix the left menu to display properly in Opera. it works in Moziila and i have a seperate style sheet for IE but Opera is no go. are there any hacks that will fix the positoning?

the site is located at:
http://studentwork.qantm.com.au/pking/Website/

and css is at:
http://studentwork.qantm.com.au/pking/Website/ptwm.css

any help would be great

cheers