CSS - Not Aligning Correctly

I can hardly believe my eyes. Maybe I'm doing something wrong...

I have a div with 5px borders and 5px padding on each side. My php does a browser detect, and pulls the appropriate css file. In the IE stylesheet, I have the div's width set to 820px (800px + 5px + 5px +5px + 5px = 820px) as described as part of the Tan Box Hack (which wasn't working right for some reason). In the Mozilla stylesheet, I have the width set to 800px, because, well, that's how wide it's supposed to be.

Now, when I open IE6 and Firefox, and send them both to the page, IE renders the box somewhat larger than the box in FF. What's even stranger is, when I set the width in the IE stylesheet to 800px, it renders correctly, matching the width rendered by FF.

Any thoughts on this? I can post my code if you really wanna see it, but I figured you'd all understand what I'm trying to describe...

After browsing through w3schools and learning most of what css has to offer I for some reason can't figure out a way to align items using css.

I was just wondering if someone could help me with the correct tag.

Hi I have an issue aligning some links. i have it perfect in FF but it is not the same in IE.

http://www.sun-awnings-direct.co.uk/the-carino-p-29.html

It is the white breadcruumb trail in question. Can anyone advise what IE is doing differently and how I can solve it?

Thanks a lot

www.devwebsites.com/index.php is my site. in order to view this problem you must register at www.devwebsites.com/register.php
Once you do go back to the home page and you will see the ul out of the login box. Any help is greatly appreciated. Tell me what I should do to fix it please.

CSS LINK

http://www.devwebsites.com/estilos.css

Hi everyone,
I am having trouble aligning my content to the edge of the table somehow it shows 20pixels down and I cann't figuere out how to bring it up. Any help will be greatly appreciate. thanks
Code:

<style>
ul { list-style-type: none; margin: 1.0em 0 0 0px; padding: 0; position:relative; overflow: visible; height: auto; text-decoration: none; color: #33FF00;}
ul li { text-decoration: none; width: 230px; color: #000; }
ul li a, ul li a:visited {height: 1.2em; width: 200px; display: block; text-decoration: none; background: blue; margin: 0.1em 0 0 0; text-indent: 10px; padding: 3px; color: #000;}
ul li a:hover { height: 1.2em; display: block; background-color:#FF0000; color: #fff000;}
ul li a.currentpage, ul li { height: 1.2em; text-decoration: none; background: #00ffff; padding: 3px; color: #fff;}
</style>
<table width="234" border="1">
  <tr>
    <td width="230" height="85">
	<ul><li><a href="">HOME</a></li>
        <li><a href="">LINK TWO</a></li>
    </ul>
	</td>
  </tr>
  <tr><td></td></tr>
</table>

I've been working will many css hacks. I just can't seem to get anything to work with the "first child"

posting the full css doc. Hopefully someone can help me.
PHP Code:
.gridContainer {

    padding:20px;

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorstr='#003300', endColorstr='#006600');
    /*    background-color: #006600;*/
    background-image: -webkit-gradient(linear, left top, left bottom, from(#003300), to(#007700)); 
    background-image: -webkit-linear-gradient(top, #003300, #007700); 
    background-image:    -moz-linear-gradient(top, #003300, #007700); 
    background-image:     -ms-linear-gradient(top, #003300 0%, #007700 100%); 
    background-image:      -o-linear-gradient(top, #003300, #007700); 
    background-image:         linear-gradient(top, #003300, #007700); 

    /* Grid Shadow */
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
}

/* Font Family, Size and Color */
.gridContainer, .grid, .gridHeaderRow, .gridContainer a, .gridContainer input {
    font-family:arial;
    font-size:10px;
    font-weight:bold;
    color:#fff;
}

.grid {
    border-spacing:0px;
    border-collapse:collapse;
    /* if you want cell separation
    border-spacing:1px;
    border-collapse:separate;
    */

    background:#005501;
}


/*********************************************************************************/
/*********************************************************************************/
/*****************************      END COLORS       *****************************/
/*********************************************************************************/
/*********************************************************************************/


/* if you want to turn off animations for speed reasons turns these off */
.gridContainer tr, .gridContainer td, .gridContainer th, .gridContext div {
    /*
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    */
}

/* padding of the cells */
.grid td, .gridHeaderRow th {
    padding:0px;
    border-left:1px solid #636470;
    padding-left:6px;
}
.grid td {
    border-left-color:transparent;
}

.grid td:first-child, .gridHeaderRow th:first-child {
    padding-left:12px;
}

.grid td {
    padding-top:5px;
    padding-bottom:5px;
}

/* ODD ROWS */
.grid tr:nth-child(2n) {

}
/* EVEN ROWS */
.grid tr:nth-child(2n+1) {

}

/* this can't inherit the color because its fixed to the bottom of the page */
.gridPager.fixed {
    background:#222;
}

/* Row Highlight */
.gridWrapper tr:hover, .gridContainer th:hover,  .gridWrapper tr:hover input, .gridWrapper tr:hover a{
    color:#ffe;
    background-color: #005500;
}

/* Current Cell Highlight */
.grid td:hover {
    background-color: #008800;
}


/* Cell Borders */
.grid td {

}

.gridHeaderRow {    
    border-collapse:collapse;
}


/* column hilte */
.grid td.hilite {
    background-color:#2A8ADD;
    color:#000;
}

/* stuck row */
.stuckRow td{
    padding:8px;
    background:#003300;
    color:#fff;
}
/* right click menu main box */
.gridContext {
    background-color:white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:3px 3px 15px #000;
    -webkit-box-shadow:3px 3px 15px #000;
    box-shadow:3px 3px 15px #000;
}
/* right click menu each item */
.gridContext div {
    color:black;
    font-size:12px;
    padding:6px 15px;
}
/* right click menu hover */
.gridContext div:hover {
    background-color:#4071ee;
    color:white;
}
/* editable cell */
.editableInput[type="text"] {

    border-width:0px;
    /*border-bottom:1px dashed #ccc;*/
}

textarea.editableInput {

}

/* title bar */
.gridTitle {
    padding:10px;
    font-size:14px;


}

/* structure for entire grid */
.gridContainer {
    margin-bottom:10px;
    overflow:hidden;
    position:relative;
    border-collapse:collapse;
}

/* minimum shown before scroll bar apppears */
.gridWrapper {
    max-height:500px;
    overflow-x:hidden;
}
   

.gridHeaderRow tr:first-child {
    position: relative;


    background-image:     -ms-linear-gradient(top, #006600, #002200);

    background: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); 
    background-image: -webkit-linear-gradient(top, #006600, #002200); 
    background-image:    -moz-linear-gradient(top, #006600, #002200); 

    background-image:      -o-linear-gradient(top, #006600, #002200); 
    background-image:         linear-gradient(top, #006600, #002200); 

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', GradientType=0, startColorstr='#006600', endColorstr='#002200');
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=0, startColorStr=#006600,EndColorStr=#002200)";
}

/* the header row cells */
.gridHeaderRow th {
    width:150px;
    cursor:pointer;
    padding-top:12px;
    padding-bottom:12px;

}

.gridHeaderRow th:first-child {
    border-left:0px;
}
.gridHeaderRow th:last-child {
    border-right:0px;
}

/* expand the inner components to meet the size of the container */
.grid, .gridHeaderRow {
    width: 100%;
}

/* all input fields */
.gridContainer input, textarea {
    background-color:rgba(255,255,215,.8);
    background-color: #CCDCAC;
    border:1px solid rgba(255,255,255,.2);
    outline:0px;
    height:2em;
    margin-top:-2px;
    -moz-border-radius:3px;
    border-radius:3px;   
    -webkit-box-shadow: inset 0px 2px 5px #111111;
    -moz-box-shadow: inset 0px 2px 5px #111111;
    border:0px;
    color: #000;
}

/* no border left on first cell */
.grid td:first-child {
    border-left:0px;
}
/* no border right on last cell */
.grid td:last-child {
    border-right:0px;
}
/* select drop down boxes */
.grid td select {
    width:95%;
    border: 1px solid rgba(255,255,255,.1);
    outline:0px;
}
/* the pager */
.gridPager {
    width:auto;
    height:25px;
    overflow:hidden;
    padding:10px 0px 10px 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;

    background-color: rgba(0,0,0,.2);
    background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,.2))); 
    background-image: -webkit-linear-gradient(top, transparent, rgba(0,0,0,.1)); 
    background-image:    -moz-linear-gradient(top, transparent, rgba(0,0,0,.2)); 
    background-image:     -ms-linear-gradient(top, transparent, rgba(0,0,0,.2)); 
    background-image:      -o-linear-gradient(top, transparent, rgba(0,0,0,.2)); 
    background-image:         linear-gradient(top, transparent, rgba(0,0,0,.2));

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003300', endColorstr='#006600');
}
/* when the pager is fixed */
.gridPager.fixed {
    position:fixed;
    bottom:0;
    z-index:999;
    width:100%;
}
/* the last button in the pager when its fixed */
.gridPager.fixed > div:last-child {
    position: relative;
    left:-20px;
}
/* every div inside the pager */
.gridPager > div {
    margin-right:16px;
    float:left;
}

/* the text string inside the pager */
.gridTotal {
    padding:5px;
}
/* button styles */
.gridButton {
    padding:5px;
    -moz-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
    text-align:center;
    font-size:11px;

    background-color: #006600;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#006600), to(#002200)); 
    background-image: -webkit-linear-gradient(top, #006600, #002200); 
    background-image:    -moz-linear-gradient(top, #006600, #002200); 
    background-image:     -ms-linear-gradient(top, #006600 0%, #002200 100%); 
    background-image:      -o-linear-gradient(top, #006600, #002200); 
    background-image:         linear-gradient(top, #006600, #002200);

    /* For Microsoft IE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#002200', endColorstr='#006600');

    -webkit-box-shadow:1px 1px 5px #222;
    box-shadow:1px 1px 5px #222;

}

.gridButton:active {
    -webkit-box-shadow:-1px -1px 4px black;
    -moz-box-shadow:-1px -1px 4px black;    
}

/* buttons in the title bar */
.gridTitle .gridButton {
    margin-top:-3px;
    margin-right:6px;
    float:right;
}

/* save button in the pager */
.gridPager .gridSave {
    float:right !important;
    display:none;
}
/* refresh button is tinier */
.gridRefresh {
    font-size:10px;
}

/* the div inside of each th that will chagne size */
.colResizer {
    background-color:transparent;
    position:relative;
    height:inherit;
}
/* the handle on each th that will grab to resize */
.colHandle {
    height:100%;
    width:20px;
    background-color:transparent;
    position:absolute;
    right:0px;
    top:0px;
}
/* the bottom right corner div that allows you to resize */
.gridHandle {
    width:10px;
    height:10px;
    cursor:se-resize;
    position:absolute;
    bottom:0px;
    right:0px;
    background-color:rgba(0,0,0,.5);
}

/* the right click menu */
.gridContext {
    position:fixed;
    width:200px;
    padding:2px;
    z-index:99999;
}
/* each option in the right click menu */
.gridContext div {
    cursor:pointer;
}
/* the close button in the right click  menu */
.closeContext {
    margin:0px !important;
    padding:0px !important;
    position:absolute;
    top:3px;
    right:3px;
    z-index:98;
    font-size:11px !important;
}
/* each input box inside the table inherits its parent styles */
.editableInput {
    width:95%;
    background:transparent;
    color:inherit;
    font-weight:inherit;
    font-size:inherit;
    font-family:inherit;
    margin:0px;
}
/* clickable nRows */
.nRows {
    cursor:pointer;
}
.grid a {
    text-decoration:underline;
} 

I'm having some trouble around the bottom of one of my pages, where the CSS is not placing images correctly the first time the page loads. Frequently the footer is not attached to the bottom as it should be, but floating some varying number of pixels off the bottom. If I hit 'refresh' everything snaps into place as it should, but for some reason the first time it isn't working right.

Here's the page I'm referring to:
http://www.auroratheatre.org/show.php?prod_id=23&ref=seas
(you can change that prod_id number to see the page with different queries)

The photos are all pulled from a MySQL query, and the code to display them goes something like this:

PHP Code:
<html>
<body>
<div id="wrapper">
   <div id="content">
      <div id="col"> .... </div>
      <div id="main">
      ...
      <h1>Cast</h1>
      <div id="cast">
          <ul>
             <?php do { ?>
             <li><img src="images/headshots/<?=$row_bios['headshot']?>" /></li>
             <?php } while ($row_bios = mysql_fetch_assoc($bios)); ?>
           </ul>
      </div>
      <div class="clear"></div>
      <ul style="padding-top: 10px">
         <li><a href="show_bios.php?prod_id=<?=$prod_id?>">read all the bios here</a></li>
      </ul>
      <div class="clear"></div>
    </div>

    <div id="photocol">
    <img src="images/rightpics/<?=$rightpic?>" width="217" height="470" />
    </div>
  </div>
<div class="clear"></div>
<div id="footer">...</div>
</div>
</body>
</html> 





and the relevant CSS is he
Code:

html, body, #wrapper {
	min-height: 100%;
	width: 100%;
	height: 100%;
	
}

body {
	font-family: Helvetica, Verdana, Arial, sans-serif;
	font-size: 80%;
	color:#000;
	background-color:#F8ED97;
	margin: 0 auto;
}
#wrapper {
	padding: 0px;
	background-image:url(../images/back.gif);
	background-position:center;
	background-repeat:repeat-y;
	position: absolute;
	text-align: center;
}

html>body, html>body #wrapper {
	height: auto;
}
#content {
	width: 774px;
	margin: 0px auto;
	text-align: center;
	margin-bottom: 30px;
}
#col {
	width: 130px;
	background-color: #900;
	float: left;
}
#main {
	width: 403px;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 30px;
	text-align: left;
}
#photocol {
	width: 220px;
	float: left;
}
#footer {
	width: 100%;
	background-color:#000;
	position: absolute;
	bottom: -2px;
	left: 0px;
	text-align: center;
}
.clear {
	clear: both;
}
#cast ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#cast li {
	display: block;
	width: 100px;
	float: left;
	text-align: center;
	line-height: 70%;
}

This happens in both IE and FF - anyone have any idea what's going on, and how I could get it to load correctly the first time?
Thanks,
Daniel

I have a backround coded in the Div I have set up for my navigation...when I call an image in (button image) into the foreground of my Div, the background moves up so only part of it is viewable.

This is my html:

Code:

<div style="position:static;"><img src="images/hdr_regular.jpg" height="29" width="320" border="0" align="left" alt=""/></div>
<div style="position:static; background-image:url(images/nav_bg.jpg); background-repeat:repeat-x;"><img src="images/nav_logout_btn_grey.jpg" height="42" width="87" border="0"  /></div>

This is my css:

Code:

body, #wrapper
{ width: auto; min-width: 0px; min-height:100%; font-family:Arial,Helvetica,sans-serif; margin: 0; padding:0; overflow:hidden;
}
#wrapper_hdr  {position:static; width:auto; min-width:0px; min-height:100%; 
}
#wrapper_navigation { position:static; width:auto; min-width:0px; height:42px; background-image:url(../images/nav_bg.jpg); background-repeat:repeat-x;
}
#wrapper_content { position:static;width:auto; min-width:0px; background-image:url(../images/bg.jpg); background-repeat:repeat-x; padding:8px; padding-bottom:100px;
}
#wrapper_ftr { width:auto; min-width:0px; white-space:100%; height:80px; background-color: #F4F4F4; padding:2px; bottom:0; left:0;
}

any help would be greatly appreciated.

Thanks!

Hi There,

Here is my HTML, and below is my css, it displays as i wanted in IE, but obviosly Mozilla is the corrct browser to use, so what am i missing here?

This is the link you can reference, http://cies.loadedtech.com.au/Default.aspx?tabid=547 If you look at it in IE it is fine, but Mozilla has this margin at the top...PLEASE HELP.

HTML:
Code:

<body>
<div id="mainSiteHold">

	<div id="contentLeft"><p>&nbsp;</p></div>
	
	<div id="contentMid"><p>&nbsp;</p></div>
	
	<div id="contentRight"><p>&nbsp;</p></div>

</div>
</body>

CSS:
Code:

body { margin:0px; padding:0px; background-color:#ffffff; }

#mainSiteHold { position:relative; width:934px; margin-top:0px; margin-left:auto; margin-right:auto; margin-bottom:1em; text-align:left; }

#contentLeft { float:left; position:relative; top:0px; width:180px; background-color: red; }

#contentMid { float:left; position:relative; top:0px; width:709px; background-color: blue; }

#contentRight { float:left; position:relative; top:0px;width:45px; background-color: green; }

Thanks

<div id="page_footer"><img src="/site_images/pre_load/mhs_mini_logo.gif" width="41" height="23" alt="Millennium Hygiene Service Small Logo" align="right"></div>

When I do this my image aligns to the right but it wont go all the way to the right edge of the div...it just sits 3 or 4 pixels from the right...help!!

I have this site http://cahedev.nmsu.edu.

If I navigate this site with Firefox, Opera or any MacOs browser, things are fine. It looks good.

Then enter Microsoft, IE forgets that there is a css page needing to be viewed with the page.

Any ideas?

Those asking for clarification, please visit the site with IE and you can see better than me trying to explain it.

I was reading through some articles here about dropdowns and have found that the Son of Suckerfish menus were a good bet.

When it rolls over it displays it correctly in IE by putting the dropdown under the link, but in Firefox it puts it smack over the top of it so you cannot read the original link.

It worked in both browsers untill I added the main links to what they in the code below to include the pics. I had to put them in divs to align the text next to the icon correctly (verticle mid align next to img?? I jsut set a top margin to push it - is this best?).

Heres a link to show you:

http://skyyfinancial.com/demo/menutest2.php

I put it all together and my list looks like this:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<div>
<ul id="nav">
	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Hard Money Loan General </div></a>
		
	</li>

	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Real Estate Leasing General </div></a>
		<ul>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Lease to Own</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Apartment</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Commercial</div></a></li>
		</ul>
	</li>
</ul>
</div></td>
  </tr>
  <tr>
    <td><div>
<ul id="nav2">
	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Home Loans General</div></a>
		<ul>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Purchase</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Refinance</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Construction</div></a></li>
			<li><a href="#"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/PDF-icon.gif" width="35" height="35" /></div>
			<div id="link" style="float:left; margin-top:12px;">Second Mortgage</div></a></li>
		</ul>
	</li>

	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Broker Application</div></a>
		
	</li>

	<!-- etc. -->

</ul>
</div></td>
  </tr>
  <tr>
    <td><div>
<ul id="nav3">
	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Commercial Lending General </div></a>
	
	</li>

	<li><a href="#" class="headersm"><div id="pdflogo" style="float:left; margin-right:15px;"><img src="images/adobePDF.gif" width="40" height="40" border="0" /></div>
			<div id="link" style="float:left; margin-top:12px;">Financial Analysis</div></a>
		
	</li>

	<!-- etc. -->

</ul>
</div></td>
  </tr>
</table>

As of right now it works as it should and I only have the one serious issue with it overlapping. Any help on the rest of my questions would be great as well.


Other questions I had:

Because I had to split them up, I had create a new id for each in IE or it wouldnt work. Only the first one would work. I renamed them and duplicated the code over to the new names ( so theres 3x as much code). I think this could be a javascript issue, but I am not positive. I put my css and javascript at the bottom of this post. I can make a new thread in javascript forum if someone can tell me if that is the problem. ( I looked at it and it seems maybe it needs some type of loop? Not positive )


Lastly, in order to list the lists under eachother, i had split them up into a div per row inside of a table. Otherwise they would just continue across the page. Anyway better of doing this?

css:
Code:

#menu, #menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-family:Arial, Helvetica, sans-serif; 
	font-size:14px; color:#636363; 
	font-weight:bold;
}

#menu a {
	display: block;
	width: 275px;
}

#menu li {
	float: left;
	width: 275px;
}

#menu li ul {


	
	background-color:#FFFFFF;
	position: absolute;
	width: 200px;
	left: -999em;
}

#menu li:hover ul {
	left: auto;
}
#menu li:hover ul, #menu li.sfhover ul {
	left: auto;
}

Javascript
Code:

sfHover = function() {
	var sfEls = document.getElementById("menu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Thanks for the help

Alright, I've taken it upon myself to port our guild website from 100% tables to mostly-css. However, once I was finished doing so; I had realized that a huge oversight was made. This oversight being Internet Explorer 6.0. The page displaying perfectly in IE7/Firefox.

Site: www.measureoffaith.net
Stylesheet: www.measureoffaith.net/style.css

Don't worry, I haven't incorporate any PHP yet so WYSIWYG as far as coding goes. In the stylesheet, I seperated the forum CSS from the main site CSS. All subsequent pages are coded using the same CSS stylesheet.

Any help would be greatly appreciated. Guidance as where to even start would also be amazing. It's easy to start from scratch for cross-browser functionality & backwards compatibility but at this point it seems overwhelming with all the bugs I have to fix as well.

Thanks so much.

index.html w/ stripped content:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      Measure of Faith on Aerie Peak
    </title>

<SCRIPT>
<!--
function F_loadRollover(){} function F_roll(){}
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.2" SRC="rollover.js"></SCRIPT>

    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div id="banner">

    </div>
    <div id="container">
      <div id="navigation">
      <!-- Start of Navigation Bar (NavigationBar2) -->
        <table id="NavigationBar2" border="0" cellspacing="0"
        cellpadding="0" nof=
        "NB_FYHPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120NOF=NB_F  YVPNY120NOF=NB_FYVPNY120NOF=NB_FYVPNY120"
        width="140">
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton1) -->
              <a href="#" onmouseover=
              "F_roll('NavigationButton1',1)" onmouseout=
              "F_roll('NavigationButton1',0)"><img id=
              "NavigationButton1" name="NavigationButton1"
              height="30" width="140" src=
              "images/Home_Hbutton_on2.gif" onload=
              "F_loadRollover(this,'images/Home_HRbutton_on2.gif',0)"
              border="0" alt="Home" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton2) -->
              <a href=
              "/eqdkp/viewnews.php"
              onmouseover="F_roll('NavigationButton2',1)"
              onmouseout="F_roll('NavigationButton2',0)"><img id=
              "NavigationButton2" name="NavigationButton2"
              height="30" width="140" src=
              "images/Raid_News_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Raid_News_NRbutton_on2.gif.bak',0)"
              border="0" alt="Raid News" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton3) -->
              <a href="charter.html" onmouseover=
              "F_roll('NavigationButton3',1)" onmouseout=
              "F_roll('NavigationButton3',0)"><img id=
              "NavigationButton3" name="NavigationButton3"
              height="30" width="140" src=
              "images/Charter_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Charter_NRbutton_on2.gif.bak',0)"
              border="0" alt="Charter" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton4) -->
              <a href=
              "roster.html"
              onmouseover="F_roll('NavigationButton4',1)"
              onmouseout="F_roll('NavigationButton4',0)"><img id=
              "NavigationButton4" name="NavigationButton4"
              height="30" width="140" src=
              "images/Roster_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Roster_NRbutton_on2.gif.bak',0)"
              border="0" alt="Roster" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton5) -->
              <a href=
              "/eqdkp/listmembers.php"
              onmouseover="F_roll('NavigationButton5',1)"
              onmouseout="F_roll('NavigationButton5',0)"><img id=
              "NavigationButton5" name="NavigationButton5"
              height="30" width="140" src=
              "images/DKP_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/DKP_NRbutton_on2.gif.bak',0)"
              border="0" alt="DKP" /></a>
            </td>
          </tr>
          <tr valign="top" align="left">
            <td class="nospaces" width="140" height="30">
              <!-- Start of Navigation Button (NavigationButton6) -->
              <a href="/phpBB2/index.php"
              onmouseover="F_roll('NavigationButton6',1)"
              onmouseout="F_roll('NavigationButton6',0)"><img id=
              "NavigationButton6" name="NavigationButton6"
              height="30" width="140" src=
              "images/Forums_Nbutton_off2.gif" onload=
              "F_loadRollover(this,'images/Forums_NRbutton_on2.gif.bak',0)"
              border="0" alt="Forums" /></a>
            </td>
          </tr>
        </table>
      </div>

      <div id="content">
        <div class="newspost"><div class="wraptitle">
				<p class="subtitle">- I... AM... UNLEASHED!</p>
				<p class="thetitle">MAGTHERIDON DOWN</p></div>
          <div class="newsdate">
            28.04.2007 by <img src="images/icons/mar.png" />
          </div>
          <div class="newscontent">
            Magtheridon proved to be no match to the professional
            button clicking skills of MoF. Wiping a few times in
            order to fine tune the button clicking, we emerged
            with victorious with zero deaths and some bad loot.
          </div>
					<img src="images/news/magdown.jpg" summary="Magetheridon Down!" />
        </div>

...clipped content...

      </div><div style="clear: both;">
    </div>
    <div id="footer">
      &nbsp;
    </div>
  </body>
</html>

style.css: Code:

html,body { height: 100%; }

body{ 
 background: #000000 url('background-image.jpg') repeat-y;
 margin: 0;
 height: 100%;
}

.newspost{
width: 100%;
padding: 0;
text-align: center;
left: 50%;
}

.wraptitle{
float: left;
height: 79px;
}

p.subtitle{
font: bold 8pt/11pt trebuchet ms, tahoma;
color: #555555;
text-align: left;
border: 0;
padding-top: 35px;
margin: 0;
}

p.thetitle{
font: bold 11pt/11pt trebuchet ms, tahoma;
color: #000000;
text-align: left;
border: 0;
padding: 0;
margin: 0;
}

.newsdate{
font: 8pt/13pt trebuchet ms;
text-align: right;
float: right;
}

.newscontent{
font: 8pt/13pt tahoma;
text-align: justify;
width: 785px;
color: #555555;
clear: both;
background-color: #dedede;
border: thin solid #cdcdcd;
}

p.newsvideo{
font: 8pt/13pt tahoma;
width: 785px;
text-align: center;
border: 0;
padding: 0;
margin: 0;
}


a:link{
 text-decoration: none;
}

a:hover{
 text-decoration: underline;
}

a:visited{
 text-decoration: none;
}

a:active{
 text-decoration: none;
}

#banner{
 background-image: url('header-one.jpg');
 height: 200px;
 width: 943px;
 padding: 0;
}

h5.styling{
 color: #555555;
 font-family: trebuchet ms, tahoma;
 border: 0;
 padding: 8px; 
 margin: 0;
}

p.styling{
 color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 8px; 
 margin: 0;             
 text-align:justify;
}

td.styling{
 font-color: #555555;
 font: 8pt/11pt trebuchet ms, tahoma;
 font-size: 12px;
 border: 0;
 padding: 0; 
 margin: 0;             
 text-align:justify;
}

html > body #navigation{
 background-image: url('left-runner.jpg');
 font-size: 0;
 float: left;
 width: 140px;
 min-height: 100%;
 padding: 0 0 0 4px;
 line-height: 0;
 border: 0;
 margin: 0;
}

html > body #content{
 background: #EDF2F5;
 float: right;
 width: 796px;
 min-height: 100%;
 padding: 0;
 border: 0;
 margin: 0;
}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {
    display:inline-block;
}
.clearfix {
    display:block;
}
* html .clearfix {
    height:1px;
}


#container{
 width: 940px;
 height: 100%;
 margin: 0;
 padding: 0;
 border: 0;
}

#footer{
 background-image: url('bottom-frame.jpg');
 width: 943px;
 height: 47px;
}

I tried to find this answer by doing a search, but maybe I'm asking the search engine wrong.

I'm creating an online shopping environment for my cousin. It's mostly done, but...it isn't displaying right in Safari...and Netscape. But mostly I care about Safari.

Here is the link:
http://gregsgoods.com/seestore.php

In IE7 is displays correctly. In Safari the second column or main section is displaying below the sidebar area. I'm not sure how to fix it.

Here is the CSS code:
Code:

html {min-height: 100%;}

* {
	margin: 0;
	padding: 0;
}

a {
color: #005B9C;
}

a:hover {
color: #0B2444
}

img {
border: 0;
}

body {
	background: #E2E7EF url(/gregsgoodbackground.gif) repeat-x left top;
	color: #ccc;
	font: normal 62.5% Tahoma,sans-serif;
}

p,ul {padding-bottom: 1.2em;}

li {list-style: none;}

h1 {
	font: normal 1.8em Tahoma,sans-serif;
	margin-bottom: 4px;
	color: #005B9C;
	margin: 0 0 7px 0;
}

h2 {
	font: normal 1.3em Tahoma,sans-serif;
	margin-bottom: 1px;
	color: #005B9C;
	margin: 0;
}


.clearer {clear: both;}

.left {float: left;}

.right {float: right;}

.container {
	position: absolute;
	left:50px; 
	top:188px;
	background-color: #FFF;
	font-size: 1.2em;
	margin: 0 auto;
	padding: 0 8px 8px;
	width: 780px;
}


.top {
	padding: 8px 8px 0;
}


.header {
	position: absolute;
	left:50px; 
	top:10px;
	background-color: #fff;
	font-size: 1.2em;
	height: 173px;
	margin: 0 auto;
	padding: 8px 8px 5px;
	width: 780px;
}
.header .left, .header .right {
	background-color: #000033;
	color: #fff;
	color: #FFF;
	height: 163px;	

}
.header .left {
	background: transparent url(/img/Top.jpg) top left repeat-x;
	border: 1px solid #7795BD;
	font: normal 2.8em "Trebuchet MS",sans-serif;
	line-height: 163px;
	width: 777px;
	text-align: left;	
	
}

.header .right div {
	padding-left: 16px;
	padding-top: 16px;
	font: normal 1.6em "Trebuchet MS",sans-serif;
}




.navigation {	
	background: #D9E1E5 url(/img/nav.jpg);
	border: 1px solid #7795BD;
	height: 23px;
}
.navigation a {
	background: transparent url(/img/nav.jpg) left top repeat-x;
	border-right: 1px solid #7795BD;
	color: #fff;
	display: block;
	float: left;
	font-size: 12px;
	font-family: Arial;
	font-weight: bold;
	line-height: 23px;
	text-decoration: none;
	padding: 0 18px;
}
.navigation a:hover {
background: transparent url(/img/nav.jpg) left bottom; 
color: #f1f1f1;
}


.main {
	border-top: 8px solid #FFF;
	background: url(/img/bgmain.jpg) repeat-y;
}


.sidenav {
        float: left;
	margin: 5px;
	width: 195px;
}
.sidenav h2 {
	color: #333300;
	font-size: 1em;
	font-weight: bold;
	line-height: 30px;
	margin: 5;
	padding-left: 12px;
}
.sidenav ul {
	padding: 0;
	border-top: 1px solid #e4e4e4;
}
.sidenav li {border-bottom: 1px solid #e4e4e4;}
.sidenav li a {
	font-size: 1.1em;
	color: #333300;
	display: block;
	padding: 8px 0 8px 5%;
	text-decoration: none;
	width: 95%;
}
.sidenav li a:hover {
	background-color: #ebebeb;
	color: #654;	
}

/* content */
.content {
        float: right;
	margin: 5px;
	padding: 0 16px;
	width: 536px;
}
.content {
	color: #666;
	font-size: 1.0em;
	margin-bottom: 6px;
}


.content .imgright {
padding: 5px;
border: 1px solid #666;
margin-left: 4px;
float: right;
}



.footer {
	background: url(/img/bluefooter.jpg) repeat-x;
	color: #FFF;
	font: bold 1em sans-serif;
	line-height: 39px;
	text-align: center;
}
.footer a,.footer a:hover {color: #FFF;}