[_net]

Hiya

Okay, something has been bugging me horrible lately and its begining to confuse me.
My issue is concerning my website display on FireFox and Internet Explorer.
Ok, I have this page. Memberslist.php. When i view this page on Firefox, its perfect, its good works nice and is nicely aligned and everything.
But, when i view it on Internet Explorer; the header is shown(banner and top navigation)...the content is still in the same area but everything else in the page is miss aligned (The left navigation is all the way down there).

My website template is simple; there is a header.html and a footer.php
and here is how it's set;

PHP Code:

include("header.html");



/* My Page Content Which is one simple html table */



include("footer.html"); 

So i thought it was because of the page content that it was screwing me up like that, so i took off everything on the page and instead put a simple Text paragraph. It was good, it work well. So i erased the text and made a new test table. Then it got screwed up agian. Its really annoying. Does anyone know any problems with this.

****ing IE. why can't they just be more like Firefox. Disgusting ****.

[UnrealEd]

hmmmm, sounds familiar

we all had, and have, those problems. Would you mind posting your css and html code? that's gonna help us solve your problem

[_net]

My html code for the page itself is:

HTML Code:

<table id='memberslist' width='900'><tr>
<td bgcolor='#51A8FF' width=20>ID</td>
<td bgcolor=#51A8FF width=70>Username</td>
<td bgcolor=#51A8FF width=80>Character</td>
<td bgcolor=#51A8FF width=65>Location</td>
<td bgcolor=#51A8FF width=85>Position</td>
<td bgcolor=#51A8FF width=90>Last Visit</td>
<td bgcolor=#51A8FF width=100>Actions</td>
</tr>

<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>

<!-- The Css Memberslist is the followings: --->
#memberslist { 
    font-family: verdana;
}
 
<!--- Site CSS is this: --->
@charset "iso-8859-1";
 
.clear
{
    clear: both;
    padding-bottom: 1px;    
    margin-bottom: -1px;    
}
.hide, .divider
{
    display: none;
}
.inside
{
    padding: 0 1em;
}
 
.newstitle {
    border: 1px #CC3300 solid;
    background-color: #6699FF;
    margin: 2px;
    padding-top: 15px;
    font-weight: bold;
    text-align: center;
    color: #000000;
}
 
 
ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
    margin-top: 14px;
    margin-bottom: 14px;
    padding-top: 0;
    padding-bottom: 0;
}
h1
{
    font-size: 220%;
}
h2
{
    font-size: 190%;
}
h3
{
    font-size: 160%;
}
h4
{
    font-size: 130%;
}
h5
{
    font-size: 100%;
}
h6
{
    font-size: 70%;
}
 
/* alter some HTML elements' default style
 */
a, a:link, a:visited, a:active
{
    text-decoration: none;
}
a:hover
{
    text-decoration: none;
}
a img
{
    border-width: 0;
}
code
{
    font-family: "Courier New", Courier, monospace;
}
label {
    display: block;
    width: 150px;
    float: left;
    /* margin-bottom: 10px; */
}
 
table
{
    font-size: 100%;
}
td, th
{
    vertical-align: top;
}
span.strike
{
    text-decoration: line-through;
}
 
br { clear: left; }
body
{
    padding: 70px 0 20px 0;
    margin: 0 3%;
    min-width: 35em;    
    background-color: #fff;
    color: #000;
    font-size: 100.1%;
}
#editprofile {
    background-color: #FFF0D9; border: 1px solid #F4C535;
    padding: 25px;
    font-family: Verdana, Tahoma, "Comic Sans MS", sans-serif;
}
#editprofile h1 { font-family: inherit; text-align: center; font-size: 10px; font-size: large; }
#editprofilepass {
    background-color: #C6F0D0;
    border-color: #84DF98;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
 
#editprofilepass input {
    margin-top: 2px;
}
#pageWrapper
{
    border: solid 1px #000;
    border-width: 1px;
    margin: 0 10px 0 40px;  /* set side margins here 'cause IE doesn't like it set
                   on the body element */
    width: auto;
    background-color: #ccc;
    color: #000;
}
#outerColumnContainer
{
    /* reserves space for the left and right columns. you can use either
     * padding, margins, or borders, depending on your needs. however you 
     * can use the border method to create a background color for both left
     * and right columns
     */
    padding: 0 0 0 135px;
}
#innerColumnContainer
{
    width: 100%;
    z-index: 1;
}
#middleColumn
{
    float: right;
    margin: 0 0 0 -1px;
    width: 100%;
    z-index: 1;
}
#masthead
{
    background-color: #ddd;
    color: #000;
    border: solid 1px #000;
    left: auto;
    margin: 0 10px -25px 30px;
    padding: 0 10px;
    position: relative;
    text-align: center;
    top: -25px;
    width: auto;
    /* \*/
        position: static;
        margin-top: -25px;
        margin-bottom: 0;
        top: auto;
 
}
#masthead h1
{
    font-size: 150%;
    left: auto;
    margin: 0 0 -1em 0;
    padding: 0;
    position: relative;
    text-align: right;
    top: -1em;
    width: 100%;
}
#masthead h2
{
    color: #000;
    font-size: 400%;
    line-height: 1em;
    margin: 0 0 -0.14em 0;
    padding: 0;
    text-align: center;
}
#content
{
    background-color: #eee;
    color: #000;
    border: solid 1px #333;
    margin: 15px 10px 0 0;
    padding: 0 10px 0 40px;
}
#content h3.pageTitle
{
    border: solid 1px #000;
    border-width: 0 0 1px 0;
    font-size: 200%;
    margin: 0;
    padding: 10px 15px;
}
#contentColumnContainer
{
    margin: 10px 30% 10px 70px;
    width: auto; height: 500px;
    border: solid 1px #000;
}
#innerContent
{
    float: left;
    margin: 0 -1px 0 0;
    width: 100%;
}
#rightColumn
{
 
    float: right;
    width: 42.85%;
    margin: 0 -42.85% 0 1px;
}
#leftColumn
{
    float: left;
    left: auto;  /* reset v4 css */
    margin: -50px -24px 0 -155px;
    position: relative; /* reset v4 css */
    top: auto;    /* reset v4 css */
    width: 180px;
    z-index: 4;
}
#leftColumn .inside
{
    padding: 0;
}
#cornerLogo
{
    width: 180px;
    height: 171px;
    margin: 0 -11px;
    overflow: visible;
    position: relative;
    z-index: 10;
}
#cornerLogo .placeHolder
{
    width: 200px;
    height: 100%;
    border: solid 1px #000;
    background-color: #ddd;
    color: #000;
 
    position: absolute;
    top: auto;
    left: 0;
}
#cornerLogo .placeHolder p
{
    text-align: center;
}
#loginbox {
    width: 100px;
     margin-left: 5px; 
     margin-top: 5px;
    background-color: #30615B; color: #FFFFFF;
    border: 1px solid #6C9;
}
    
.leftBlock
{
    background-color: #ddd;
    border: solid 1px #000;
    margin: 25px 0;
    padding: 0 5px;
    z-index: 9;
    min-width: 0;
    font-weight: normal;
}
.leftBlock .vnav
{
    margin: -1px 0 5px 0;
}
.leftBlock h3
{
    background-color: #ddd;
    color: #000;
    border: solid 1px #000;
    font-size: 120%;
    margin: -10px 0 0 0;
    padding: 2px 6px;
}
#mainMenu
{
    margin-top: -15px;
}
#mainMenu .vnav
{
    margin-top: 23px;
}
.leftTextBlock
{
    font-size: 88%;
    padding: 0 7px;
}
.leftTextBlock p
{
    margin: 5px 0;
}
#footer
{
    clear: right;
    padding: 10px 24px 10px 34px;
}
#footer p
{
    padding: 0;
    margin: 0;
}
 
 
/* vertical navigation stuff. mostly exactly as seen in the vnav.css styleheet
 */
.newsHeader {
    background-color: #cdc;
    color: #000;
    border: solid 1px #000;
    margin: 25px 0;
    padding: 0 60px 10px;
    z-index: 9;
    min-width: 0;
    font-weight: normal;
}
#newsmenu
{
    margin-top: 15px;
}
.vnav
{
    margin: 10px 0;
}
.vnav ul, .vnav ul li
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: block;
}
.vnav ul
{
    border: solid 1px #000;
    border-bottom-width: 0;
}
.vnav ul li
{
    border-bottom: solid 1px #000;
}
.vnav ul li, .vnav ul li a
{
    margin: 0;
    padding: 0;
    line-height: normal;
    display: block;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.vnav ul li a
{
    display: block;
    padding: 2px 5px 3px 5px;
    min-width: 0;   /* hack to force hasLayout in IE7 */
}
.vnav ul li a, .vnav ul li a:link, .vnav ul li a:visited, .vnav ul li a:active, .vnav ul li a:hover
{
    text-decoration: none;
    cursor: pointer;
}
.vnav h3
{
    margin-bottom: 0;
    padding-bottom: 0;
    font-size: 126%;
}
 
.hnav
{
    border: solid 1px #000;
    margin: 0;
    padding: 3px 0 4px 0;
    white-space: nowrap;
}
.hnav ul span.divider
{
    display: none;
}
* html .HNAV
{
    padding: 0; 
}
.hnav ul
{
    text-align: center;
    list-style-type: none;
    line-height: normal;
    margin: 0;
    padding: 0;
}
.hnav ul li
{
    display: inline;
    white-space: nowrap;
    margin: 0;
}
.hnav ul li a, .hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
    margin: 0 -1px 0 0;
    padding: 3px 10px 4px 10px;
    border-left: solid 1px #000;
    border-right: solid 1px #000;
    cursor: pointer;
}
.hnav ul li a, .hnav ul li a:link, .hnav ul li a:visited, .hnav ul li a:active, .hnav ul li a:hover
{
    text-decoration: none;
}
 
 
.bottomBorderOnly
{
    border-width: 0 0 1px 0;
}
 
 
* html #masthead,
* html #pminbox,
* html #memberslist,
* html #masthead h2,
* html #leftColumn,
       .leftBlock h3, 
* html #rightColumn
{
    position: relative;
}
* html #innerColumnContainer
{
    /* \*/
        position: relative;
}
* html #masthead,
* html #content,
* html #contentColumnContainer,
* html .vnav,
* html .vnav ul li a/**/,
* html .hnav, 
* html .hnav ul li a,
* html .leftBlock,
* html .leftBlock h3
* html .newstitle
{
    /* \*/
        height: 0.01%;
    /* the empty comment in the .vnav ul li a selector is to keep that 
     * particular selector from being processed by IE5.0/Win
     */
    min-width: 0;
}
* html div,
{
    overflow: visible;
}
* html body
{
    word-wrap: break-word;
} 

Here is my header file

HTML Code:

<div class="hnav bottomBorderOnly">
	<ul class="nshnav"
		><li><a href="index.php">Main</a><span class="divider"> : </span></li>
		<li><a href="goto.php?mod=viewprofile">View Profile</a><span class="divider"> : </span></li>
		<li><a href="goto.php?id=news">Updates</a><span class="divider"> : </span></li>
  </ul>

	<hr class="hide">
</div>

<?php 
} 
?>

							<div id="contentColumnContainer" style="border: 0; height: auto; position:relative;">

and footer:

HTML Code:

<div class="clear"></div>
							</div>

<!-- Footer Stuff. like GCX Links.   --->
						</div>
					</div>

I have a bit more in the header (which is the title and all), and same for footer i have the footer notes but thats about it.

[staticfire]

I haven't got a clue if this will make a difference but instead of include you could use require. Like this:

PHP Code:

require 'header.html';



require 'footer.html'; 

I don't think it makes a difference but it's worth a try.

[Nico]

The only difference between include() and require() is the error they produce on failure.

[staticfire]

I didn't think it would

[job0107]

From what you are saying about erasing the table and entering just plain text and then everything looked good, but when erasing the text and putting the table in again caused everything to screw-up; I would suggest putting the table inside a <div> or <span> or <p> and see if that causes the table to be treated like plain text. Also the combined width of the <td>'s do not add up to the width of the <table>. I would suggest removing the width in the <table> element and let the <td>'s dictate the width. And if the table must take up 900px in width, make the width of an outer <div> or <span> 900px and position the table in it.

[Vicious]

In the HTML of your table, I see 2 rows:
the first one has 7 cells
the last one has only 5 cells

Perhaps that is the reason?

If that doesn't help, please post the link to the page, so I can see. I don't feel like compiling a PHP page from what you have posted in your 2nd post.