CSS - Issues With Alphaimageloader Not Working Correctly.

Some reason, the body/html/whatever the hell IE uses as its root, doesn't auto-expand past 100%, meaning vertical scrolling can't occur. What could be going wrong here?

Attached is html and css, the relevant css is at top, and is readable, the unreadable css isn't relevant

Hello I'm a photographer trying to code my site myself, I'm a control freak and trying to learn css but coding is not my thing.
I have two different rollover effects on my page but only one part is working.
The links on the right of photo function correctly when I hover over them, but the links on top don't change as they should. a link to my css file
Can anyone help me on this? I believe i have the order correct (a:hover follows link and visited) but i'm sure it's an easy fix. Sadly, not for me. Thanks for any help

here is my site: chrisziebarth dot com/test
My css file is located in /style.css

Hi,

First, I'm using the javascript/tutorial from http://www.htmldog.com/articles/suckerfish/dropdowns/

Visit http://serve5.net/xcage/nav/ . The spacing inbetween each image is fine, it's how I want it to be. However, view it in Mozilla first then in IE. Notice something? In Mozilla it does what it's supposed to correctly - have the 'main' background turn blue, and the sub-menu background turn green. However, in IE, this makes BOTH the 'main' and sub-menu background green, instead of keeping the main one blue. I have tried for the past 15 minutes trying to figure this out, but came up empty.

I believe it's a problem in the javascript hover code, located in sfhover.js.... since that's what controls IE's hover and it works fine in Mozilla

Could you look at the code and tell me whats wrong?

http://serve5.net/xcage/nav/
http://serve5.net/xcage/nav/styles/xcage.css
http://serve5.net/xcage/nav/scripts/sfhover.js
Thanks.

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

Hey,

I came across this forum and hopefully somebody can help me.

Here is my website: http://www.jmuelectricmotorcycle.tk

When the page is in firefox, If you page zoom out, the navbar goes under the content instead of staying on the right. I think it has something to do with padding and the sidebar not having enough room so it drops down. When I set the content to 1005 instead of 1000, it works, but there's a giant 5 pixel gap between my side bar and my content container.

Also, does anybody know how to style called data from ssi.php in SMF forums? I want my login boxes to look like my main page.

Thanks. Here is my css:

Code:

html {
	font: normal 12px verdana, arial;
        background-color: #000
}

body {
text-align: center
}

#fw-container {
margin: 0 auto;
width: 1000px;
text-align: left
}

.hasSidebar #fw-container {
	width: 1000px;
}

a, 
a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* --- Header --- */

#fw-head {
	position: relative;
	height: 196px;
	background: #242424;
}

#fw-title {
	font: bold 26px verdana;
	letter-spacing: -1px;
	position: absolute;
	top: 20px;
	left: 20px;
	padding: 0;
	margin: 0;
	z-index: 10;
}

#fw-title a, 
#fw-title a:visited, 
#fw-title a:hover {
	color: #fff;
}

.fw-logo {
	width: 760px;
	height: 196px;
	position: absolute;
}

.hasSidebar .fw-logo {
	width: 1000px;
}

/* --- Navigation --- */

#fw-mainnavwrap {
	background: #242424;
	padding: 10px 20px;
	font-family: arial;
	font-weight: normal;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

#fw-mainnavwrap ul {
	margin: 0;
	padding: 0;
	background: transparent;
	list-style-type: none;
}

#fw-mainnavwrap li {
	margin: 0px 15px 0px 0px;
	display: inline;
}

/* --- Content --- */


#fw-bigcontain {
	width: 760px;
	float: left;
}

.fw-paragraph {
	background: #242424 url('../Waveform/img/bg-p.gif') repeat-x top left;
	border-bottom: 1px solid #000;
	padding: 15px 20px 10px;
	overflow: hidden;
}

.fw-title {
	margin: 0px 0px 10px;
	font: 18px verdana;
	color: #fff;
}

.fw-text {
	margin-bottom: 10px;
}

/* --- Sidebar stuff --- */

.hasSidebar #fw-sidebar {
	width: 239px;
	float: right;
	font-size: 12px;
	clear: right;
	border-left: 1px solid #000;
}

#fw-sidebar .fw-title a,
#fw-sidebar .fw-title a:visited,
#fw-sidebar .fw-title a:hover {
	color: #fff;
	text-decoration: none;
}

#fw-sidebar .fw-title {
	font-size: 1.3em;
	font-weight: normal;
}

/* --- Footer --- */


#fw-footer {	
	font: normal 10px verdana, sans-serif;
	background: #242424;
	margin: 0px;
	padding: 11px 0px 1px;
	color: #999;
	clear: both;
	width: 760px;
}

.fw-footertext {
	background: #161616;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin: 0px;
	padding: 6px 0px 6px 20px;
}

hello all,
my site is at waxmuseumplus dot ie
css file is on the top level called layout.css

I've put my site up and it works fine except that sometimes when you go to another page and comeback to the homepage the swf files don't position correctly. The real bizarre thing is that if you reload the page (maybe not on the first try but maybe the second try) it appears fine again.

there are 6 swf files at the bottom right corner of the blue boxes across the page. They create the page curl animation at the bottom right. 9 out of 10 times they all load in position correctly but sometimes they don't. They appear further down the page.

I think the fix is in the "a" link which i've wrapped around the div pagecurl and div textabove. I had this original set to 100% height. But i have now given it a 150px height. This doesn't fix anything though?

The problem is that it is intermittent. Of course it looks fine my FF3 and when i test on others but when the client checks she sees errors.

Please help I'm tearing my hair out and the site is already live!

Surprise, surprise.

I'm using a very simple example of a tabbed interface. Each tab is its own div with a border and a bgcolor. As you will see, IE is displaying the tabs such that they hang 1px over their background container while FF displays as expected.

I'm thinking it has something to do with the float but can't seem to figure it out.

Any ideas?

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>Untitled Document</title>
<style type="text/css">
.hdr	{
	background-color: #ccc;
}

.tab	{
	padding: 0px 5px;
	background-color: #666;
	border: 1px solid #000;
	border-bottom: none;
	color: #fff;
	float: left;
}

.tab.active	{
	background-color: #fff;
	color: #000;
	margin: 0px 3px 0px 3px;
}
</style>
</head>

<body>

<div class="hdr">
	<div class="tab active">tab 1</div>
	<div class="tab">tab 2</div>
	<br style="clear: both" />
</div>
</body>
</html>

Can anyone tell me why the navigation does not align with the logo on the left? I would like the bottom of each element to be along the same line. I can't figure out what is pushing it up.

Thanks

Hello Gang!

First off, thank you for taking your time to help a noob.

Here is my problem:

With what I think is the same coding, the page is displaying two different ways. (see image). The left-hand column is made by using <?php include("news.htm"); ?> so I know for sure there are no differences between the pages (at least is that section).

Can anyone spot why the pages render 2 different ways?

LINK 1
LINK 2

Thank you for your time.

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;
} 

<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!!

Hi guys,

I finally re-jigged all my CSS somewhat along with my site laoy, i now have 3 columns, one of which displays under the other two :S

any ideas on what i've done here?

the page in question is:

http://wakefieldfhs.co.uk:8180/uPhoto/signup.jsp

Thanks

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!

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;}