CSS - Layout Of My Intranet Website Was Change When I Access It On Different Computers

Index.php code:
Code:

<div id="Wrapper">
  <div id="Content">
    <div id="Header">
    <div id="Logo"></div>
    <div id="Title"></div>
      <div id="Navigation">
        <ul>
          <li><a href="(url blocked)">Home</a></li>
          <li><a href="specials.html">Specials</a></li>
          <li><a href="">Inventory</a>
            <ul>
              <li><a href="inventory-weapons.html">Weapons</a></li>
              <li><a href="inventory-accessories.html">Accessories</a></li>
              <li><a href="inventory-ammunition.html">Ammunition</a></li>
            </ul>
          </li>
          <li><a href="manufacturers-links.html">Manufacturers</a></li>
          <li><a href="about-us.html">About Us</a></li>
          <li><a href="contact-us.html">Contact</a></li>
        </ul>
      </div>
    </div>

And my css file:
Code:

#Title {
width: 425px;
height: 75px;
background: url(../images/Title.png) no-repeat;
padding: 0px;
margin: 0px;
position: absolute;
top: 3%;
left: 35%;
}

Code:

#Welcome_Letter {
margin-right: 18%; 
margin-left: 3%;
position: absolute;
top: 190px;
}

Code:

#Navigation {
position: absolute;
top: 15%;
left: 30%;
width: 580px;
}

The problem is the absolute positioning of the Title and Menu, and the margins of the first paragraph. On 4 out of the 5 computers I've tested it on, its shown properly (In Firefox, yes I know I need to fix the paragraph for IE.) But on the one computer, even in Firefox, the Title, Menu, and margins of the first paragraph are way off, and I can't figure out why. I've tried doing it in px, em, and currently its in percent, which has been the closest so far. But why is it not showing up perfect?

This is what its supposed to look like:
i27.tinypic.com/9ihfza.jpg

This is what it shows up as on the 1 computer:
i28.tinypic.com/swwu49.jpg

Help please! Thank you

Edit: Fixed url's

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

I am working on the new home page which is based on a template.

The left sideColumn is working fine, however I am having a few problems with the mainColumn layout.

Here is a static image to show what I want it to look like

Here are the problems I am having:

1) The #scroll box is place where I want it in IE but in foxfire it is right up against the left side of the #sideColumn partially hidden.

There will be text that scrolls into this box and stops. I haven't started on the part yet - in case that makes a difference. Not my choice, but that is what the bosses want.

2) I want the image centered horizontal within the #mainColumn. Here is what I have for the css:

#home img {
margin: 5px auto 5px auto;
}

which I thought would do the trick, but it's not.

3) I want the p text to have a 40px margin on the right and left side like the .large does.

Here is what I have for the css:

#home p, .large {
margin: auto 40px auto 40px;
}

It works for the .large (Welcome to Vitalograph), but not for the text below it. At one point I had it working, but after addtional changes fixing other problems, now it doesn't and I can't figure out why.

Here is the xhtml starting at the 2 column part (wrapper): Code:

  	<!--begin wrapper-->
  	<div id="wrapper">
  
  	<!--begin side column -->
  	<div id="sideColumn">
        <span class="category">Products</span>
    <ul>
		<li><a href="/products/spirometers.html">Spirometers</a></li>
		<li><a href="/products/clinical_trials.html">Clinical Trials</a></li>
		<li><a href="/products/asthma_copd.html">Asthma & COPD</a></li>
		<li><a href="/products/smoking_cessation.html">Smoking Cessation</a></li>
		<li><a href="/products/resuscitaion.html">Resuscitation</a></li>
	</ul>
	
	<span class="category">Resources</span> 
    <ul>
      <li><a href="/resources/contact_us.html">Customer Support</a></li>
	  <li><a href="/resources/training_services.html">Training & Services</a></li>
      <li><a href="/resources/exhibitions.html">Exhibitions</a></li>
      <li><a href="/resources/newsletters.html">Newsletters</a></li>
      <li><a href="/resources/downloads.html">Downloads</a></li>
      <li><a href="/resources/useful_links.html">Useful Links</a></li>
      <li><a href="/resources/industry_information.html">Industry Information</a></li>
	  <li><a href="/resources/industry_information.html">Sitemap</a></li>
	</ul>
  </div>
  <!--end of side column -->
  
  <!--begin main column -->  
  <div id="mainColumn">
  
  	<!-- InstanceBeginEditable name="Main_Section" -->
  
  
  
    <div id="home">	
        <div id="scroll"><span>scrolling news will go hear and stop</span></div>
		
        <img src="/images/boys_bubbles.gif" width="485" height="333" alt="boys and bubbles" />
	
		<span class="large">Welcome to Vitalograph</span>
		
		<p>Vitalgraph offers a wide range of spirometers along with other asthma 
          management equipment with over 40 years experience. From simple hand-held 
          units to sophisticated Windows based spirometry systems, we have it 
          all. Check out our full line of respiratory equipment under the product 
          category.</p>
		
		
      <p><a href="/about_us/about_us.html">more about us...</a></p>
		
		
	</div>
  
  
  <!-- InstanceEndEditable -->
  
  </div>
  <!--end of main column -->
  
  </div> 
  <!--end of wrapper--> 

Here is the vitalograph_master.css: Code:

body {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	background-color: #ffffff;
	color: #515151;
	margin:0px;
	padding:10px;
}

/*page container settings*/

#page {
	width: 750px;
	height: 600px;
	border: 1px solid #5094F9;
	background-color: #FFFFFF;
	overflow: hidden;
	margin: auto;
	padding: 10px 10px 10px 10px;
	text-align: left;
}

/*logo header and tag settings*/
	
#header {	
	margin: 0;
	padding-bottom: 5px;
	width: 450px;
	height: 36px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	text-align: left;
}

#header img {
    vertical-align: -7px;
    }

.tagline {
	color: #5094F9;
	font-size: 16;
	font-style: italic;
	font-weight: bold;
	display: inline;
	clear: both;
	line-height: 20px;
	margin-left: 10px;
}

/*top bar settings*/

#topbar {
	float: top;
	height: 20px;
	background-color: #5094f9;
	clear: both;
	padding-left: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:hover, #topbar a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#topbar ul {
	list-style: none;
	margin: 0;
	padding-top: 2px;
}

#topbar li {
	display: inline;
	margin-right: 160px;
}

/*Main Section two columns under top section*/

#wrapper{
	padding: 10px 10px 10px 0px;
	width: 100%;
	height: 100%;
}

#sideColumn {
	float:left;
	width:155px;
	height: 78%;
	background-color: #5094F9;
	padding-top: 50px;
	padding-left:10px; 
	padding-bottom:10px;
	pading-right: 10px;
	margin-right: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	line-height: 20px;
}

.category {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 5px;
}

#sideColumn a:link, #sideColumn a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn a:hover, #sideColumn a:active {
	background-color: #FFFFFF;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#sideColumn ul {
	list-style: none;
	padding: 15px 0px 15px 10px;
	margin: 0px;
}

#mainColumn {
	padding: 0px;
}

/*footer*/

.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: 9px;
	color: #999999;
}

/*text*/

.large {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #5094F9;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

Here is the home.css: Code:

/*home page*/

#home {
	margin: auto;
}

#home img {
	margin: 5px auto 5px auto;
}

#home p, .large {
	margin: auto 40px auto 40px;
}

#home a:link, #home a:visited {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #5094F9;
	font-size: 12px;
	font-weight: bold;
}

#home a:hover, #home a:active {
	background-color: inherit;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #990099;
	font-size: 12px;
	font-weight: bold;
}

#scroll {
	width: 560px;
	padding: 5px;
	background-color: inherit;
	border: 1px solid #5094F9;
	margin-bottom: 5px;
}

Any help or suggestions are greatly appreciated.

Hi there and thanks for reading & helping! I am new to this site, but here is my question:

I need to build about a 20 page website. I have been told I should do the "layout" for each page using CSS. Is it possible for each page to "link" to one CSS file for layout instructions? I have found suitable CSS layout templates but am unsure how to link each page to the external CSS file for a basic "header, 2 column, footer" layout, or if it is even possible?

i would like to take this and put it on my css homepage but it wont let me do it.
[url=myurl]forums[/url ] <-- just without the space between url ] can u plz help me.

I am trying to retrieve the color and background attributes of a CSS class defined in a .css external file. I would like to retrieve the attributes in a JavaScript function, given the class name.

I am trying to invert the colors of a table cell background and hyperlink text.

--begin style sheet--
table.submenu {
background:#66CCFF;
position:absolute;
visibility:hidden;
font:8pt Arial;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
}
a.menulink:link,a.menulink:visited,a.menulink:active {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}
--end style sheet-


--begin javascript--
function invertmenu(elmntID,elmntClass) {
//the first two lines of code do not work
var textColor = elmntClass.style.color;
var backColor = elmntClass.style.background;

document.all[elmntID + "link"].style.color = backColor;
document.all[elmntID].style.background = textColor;
}
--end javascript--


--begin html code--
<tr><td class="submenu" id="techdept1" onmouseover="invertmenu('techdept1','submenu')" onmouseout="invertmenu('techdept1','submenu')"><a href="t40/default.asp" class="menulink" id="techdept1link">T-40</a></td></tr>
--end html code--


thanks for your help!

- tim

I was working on making 2 different link menu's one that dropped down and one that was stationary underneath it. On my computer it looks fine but on some computers the bottom link is partially underneath the top one. and the opacity filter's do not show up especially on mac's.

Was wondering if anyone could help.

Heres the website link, and then the code.
http://www24.brinkster.com/mattphat/test2.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HEAD>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
</HEAD>
<style type="text/css">  
* {
	margin: 0;
	padding: 0;
}



.menu {
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
width:780px;
height:35px;
background:#F0ECEB url(../meeting.jpg) 0 20px no-repeat;
position:relative; 
margin:0 0 8px 0;
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;
}
/* get rid of the default padding - margin and bullets */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* make menu horizontal */
.menu ul li {
float:left;
position:relative;
}
/* set up the default top level links */
.menu ul li a, .menu ul li a:visited {
display:block; 
text-decoration:none; 
color:#000; 
width:116px; 
height:1.5em;
font-weight:bold;
color:#888; 
border-bottom:8px solid #888;
border-top:1px solid #888;
border-left:1px solid #888;
border-right:1px solid #888;
background:#F0ECEB; 
padding-left:10px; 
line-height:1.5em;
margin-right:2px;
}
/* hack for IE5.5 to correct the faulty box model */
* html .menu ul li a, .menu ul li a:visited {
width:116px;
w\idth:116px;
}
/* hide the drop down menu */
.menu ul li ul {
display: none;
}
/* remove all table style so that it does not interfere with the menu */
.menu table {
margin:-1px; 
border-collapse:collapse;
font-size:1em;
}

/* first line for IE7 and non-IE browsers, second line for IE5.5 and IE6 */

/* style the top level hover */
.menu ul li:hover a,
.menu ul li a:hover {
color:#000; 
border-bottom:8px solid #EE3233;
}
/* make the drop down menu show and correctly position it */
.menu ul li:hover ul,
.menu ul li a:hover ul {
display:block; 
position:absolute; 
top:1.2em;
margin-top:11px;
left:0; 
width:116px;
border:1px solid #888;
border-top:0;
background:transparent;
}
/* style the drop down links with no hover */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {
display:block; 
background:transparent url(../../opacity/opaque.png); 
color:#000; 
border:0;
margin:0;
color:#333;
font-weight:normal; 
font-size:0.9em;
height:auto; 
line-height:1em; 
padding:5px; 
width:116px
}
/* style the drop down menu links when hovered */
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {
background:#888; 
color:#fff;
}

/* special styling for IE5.5 and IE6 - transparency is non validating */
.menu ul li a:hover ul {
background:transparent filter:alpha(opacity=30);
	-moz-opacity:0.3;
	-khtml-opacity: 0.3;
	opacity: 0.3;

margin-top:10px; /* for IE5.5 faulty box model */
marg\in-top:11px; /* for IE6 */
}
/* IE5.5 hack for faulty box model in drop down menu */
.menu ul li a:hover ul li a {
background:#ddd;
width:116px; /* for IE5.5 faulty box model */
width:116px; /* for IE6 */
}




#nav {
		float: left;
		width: 780px;
                height: 20px;
		margin-top: 0;
		padding: 0;
		list-style: none;
		background: #ccc;
		border-bottom: 1px solid #999;
		}
	
#nav li { 
		float: left;
		margin: 0;
		padding: 0;
		}
	
#nav a {
		float: left;
		display: block;
		padding: 0px 10px 0px 5px;
		text-decoration: none;
		font-weight: bold;
		font-size: 85%;
		color: #666;
		background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
		}
#nav  b {
                float: left;
		display: block;
		padding: 0px 10px 0px 5px;
		text-decoation: none;
		font-weight: bold;
		font-size: 95%;
		color: #EE3233;
		background: #ccc url(http://www24.brinkster.com/mattphat/YMCA/nav_slant.gif) no-repeat top right;
                }
#nav #nav-1 a {
		padding-left: 10px;
                padding-right: 5px;
		}
	
#nav a:hover {
		color: #000;
		}	

</style>



<BODY> 
<div id="wrap 2">
<div id="wrap">




<div class="menu">

<ul>
<li><a class="drop" href="http://www24.brinkster.com/mattphat/ymca3.html">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->

<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/hoursofoperation.html" title="Hours of Operation">Hours of Operation</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/membershiprates.html" title="Membership Rates">Membership Rates</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/yassurance.html" title="Y-Assurance">Y-Assurnace</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/employment.html" title="Employment">Employment</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/contactus.html" title="Contact Us">Contact us</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>


<li><a href="http://www24.brinkster.com/mattphat/ymcatorrington.html">Torrington
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/tfacility.html" title="TFacility">Facility Schedule</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tchildcare.html" title="TChildcare">Childcare</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tlasers.html" title="Lasers">Lasers</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tcamp.html" title="TORYMCA">TORYMCA</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/tyhouse.html" title="Y-House">Y-House</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://www24.brinkster.com/mattphat/ymcawinsted.html">Winsted
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/wfacility.html" title="Facility Schedule">Facility Schedule</a></li>	
        <li><a href="http://www24.brinkster.com/mattphat/wchildcare.html" title="Childcare">Childcare</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/wcamp.html" title="Camp Rising StarCamp Rising Star</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/WYSB.html" title="WYSB">WYSB - Winchester Youth Service Bureau</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/wliteracy.html" title="Literacy">Literacy</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/wvolleyball.html" title="Y Volleball Juniors">Y Volleball Juniors</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">Cannan
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/cfacility.html" title="Facility Schedule">Facility Schedule</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/cchildcare.html" title="Childcare">Childcare</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>

<li><a href="http://www24.brinkster.com/mattphat/ymcagiving.html">Giving
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="http://www24.brinkster.com/mattphat/strongkids.html" title="2009 Strong Kids Campaign">2009 Strong Kids Campaign</a></li>
	<li><a href="http://www24.brinkster.com/mattphat/givingvol.html" title="Volunteering">Volunteering</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->
</li>



<li><a href="http://www24.brinkster.com/mattphat/ymcacannan.html">About Us
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->


<table><tr><td>

	<ul>
	<li><a href="../menu/zero_dollars.html" title="?">?</a></li>
	<li><a href="../menu/embed.html" title="?">?</a></li>
	</ul>

</td></tr></table>

<!--[if lte IE 6]>
</a>
<![endif]-->

</li>
</div>



<ul id="nav">
	<li id="nav-1"><b>Fall 2009 Programs&nbsp;&nbsp;&nbsp;&nbsp;</b></li>
	<li id="nav-2"><a href="http://www24.brinkster.com/mattphat/youthaquatics.html">Youth Aquatics&nbsp;&nbsp;</a></li>
	<li id="nav-3"><a href="http://www24.brinkster.com/mattphat/aquatics.html">Aquatics&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/wellness.html">Wellness&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/seniors.html">Seniors&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/youthsports.html">Youth Sports&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/preschoolPE.html">Preschool PE&nbsp;&nbsp;</a></li>
	<li id="nav-4"><a href="http://www24.brinkster.com/mattphat/Specialty.html">Specialty&nbsp;&nbsp;</a></li>
</ul>

</ul>






</div>
</div>
</BODY>
</HTML>

..

Hi,

The following design http://www.cmsguides.com is not working in IE. Because of the google leader board it wraps the content div to underneath the right column. However this works in Firefox.

Can anyone suggest how I can fix this?

Daniel

Hello. I am currently trying to learn CSS. I have experience in HTML, PHP/mySQL, and some .NET(ASP.NET & C#). I am currently working on a web design project. I know how beneficial CSS can be. I am understanding most of the concepts. I am trying to divide my page up into a parent main page. For example, there is a background color(style). On top of that is my parent main page section. It is similar to a piece of paper on top of a larger(darker) piece of paper. Then within that main page I am going to have about 3-4 separate boxes, which will make up different sections(news, departments, etc). The problem I am having is I have everthing setup with 1 box within the main page. However, I put the other box in the same nested <div class = "page"> tag and I can get it where I want in terms of left, right, and bottom positioning for margins. However, I can not get the 2 boxes to be on the same row. There is space on my page that I cannot use. With my prior experience I know that the solution to this problem was using nested tables. However, from my understanding I thought I could refrain from using tables and use some CSS techniques instead. Please give me any input you might have or any questions that might seem confusing. I might be able to post up a site so a person could see what I am trying to do.

Hi, i've just started using css and have noticed a small problem in my code - i get a white bar above my header, but i'm not sure how to get rid of it. It only appers in firefox and not ie.

my code is

index.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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Computer Aided Cookery</title>
<link href="wecook.css" rel="stylesheet" type="text/css" />
</head>

<body>
 <!-- container -->
 <div id="container">
   <!-- start wrapper -->
   <div id = "wrapper">
     <!-- start header -->
     <div id = "header">
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <h5> BANNER GOES HERE</h5>
	  <!-- start nav -->
      <div id="nav">
        <ul>
	      <li><a href="#">Home</a></li>
	      <li><a href="#">About Us</a></li>
	      <li><a href="#">Search</a></li>
	      <li><a href="#">Contact Us</a></li>
	    </ul>
      <!-- end nav -->
      </div> 
     <!--end header --> 
     </div>
   <!-- end wrapper -->
   </div>
   <h4> Copyright xyz.co.uk. 2006-2007 All rights reserved </h4>
  <!-- end container -->
 </div>

</body>
</html>

css file

Code:

/* general html element formatting */

html, body, table  {
  font-family: verdana, arial, sans-serif;
  font-size: 7pt;
  color: #000000;
  margin: 0;
  padding: 0;
}

body  {
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6  {
  margin: 10px 10px 10px 0px;
  text-align: center;
}

h1  {
  font-size: 150%;
  margin-top: 0px;
}

h2  {
font-size: 130%;
}

h3  {
font-size: 110%;
}

h4  {
font-size: 100%;
}


h5  {
font-size: 100%;
color: #FFFFFF;

}


#container {
	
	background-image: url(images/background_gradient2.jpg);
	border: 1px solid #000000;	
}

#wrapper {
	width: 760px;
	height: 600px;
	background-color:#FFFFFF;
	margin:10px auto;
	border: 1px solid #000000;
	text-align: left;
}

#header {
    width: 760px;
    background: #242424;
}

#nav {
	border-bottom: 1px solid #000000;
}

#nav ul {
	padding: 0;
	margin: 0;
	background-color:#242424; 
}

#nav ul li {
	display: inline;
	padding: 0;
	margin: 0;
}

#nav ul li a {
	font-size: 120%;
	color: #FFFFFF;
	background-color:#778899;
	text-decoration: none;
	padding: 0px 25px 0px 25px;
	border-right: 0px solid #000000;
	text-align: center;
	width: 9em;
}

#nav ul li a:hover, #nav ul li a:focus {
	background-color: #990000;
}

please find attached a screenshot in firefox. Any help is appreciated.

thanks!

The page is http://cannons.dsl.xmission.com/index.html I am having problems making the footer go to the bottom what do I need to change to make it work?

Thanks

I'm trying to get this layout to work, but just can't seem to. I'd like to be able to do this in tableless fashion but if I have to use tables I'll do so.

Basically, the header and the main content areas need to be centered and a fixed width at all times. however, there are 2 bars that need to be fluid and positioned in relation to the header and content areas.

I couldn't think of a way to explain it that it would make sense, so I've attached an image that represents what I'm talking about.

I'm anxious to hear whether this can be acheived or not.

Thanks!

-B