Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.
Register

IE 8, Google chrome and FF not centering my page!

Latest Post

Faint

Member

13
My layout isn't centered in those three browsers. The header is centered perfectly but the content is located at the left. IE 7 shows everything fine.

Code: 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<SCRIPT type="text/javascript" LANGUAGE="JavaScript">

<!-- Begin

function popUp(URL) {

day = new Date();

id = day.getTime();

eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=350');");

}

// End -->

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Fusionzone.nl - De nummer 1 hits!</title>

<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />

 

<style type="text/css">

.style1 {

    margin: auto;

    text-align: center;

}

.style2 {

    text-decoration: none;

}

.style3 {

    text-decoration: underline;

}

.style4 {

    font-size: xx-small;

}

    

    * {

    margin: 0;

    padding: 0;

    }

 

#content {

margin-left:auto;

margin-right:auto;

}   

 

.style5 {

    text-align: left;

}

    

.style6 {

    color: #000000;

}

    

.style7 {

    padding: 5px;

    background-color: #FFD35A;

    background-image: url('images/recenthit-bg.png');

    background-position: 50% bottom;

    background-repeat: repeat-x;

    text-align: left;

}

.style8 {

    color: #FFFFFF;

    font-size: x-small;

    text-align: left;

}

</style>

 

</head>

<? include 'sys/info.php'; ?>

 

<div id="content" class="style1">

    <img height="272" src="images/hderimg.png" width="770"><table align="center" cellpadding="0" cellspacing="0" class="nav footer" style="width: 770px; height: 25px;">

    <tr>

                <td style="width: 770px; height: 2px;" align="center">

                <marquee>Laatste nieuws: <? echo $topmar ?></marquee></td>

    </tr>

    </table><table align="center" cellpadding="0" cellspacing="0" class="nav footer" style="width: 770px; height: 25px;">

    <tr>

                <td style="width: 770px; height: 24px;">

                <a class="style2" href="index.php">HOME</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="style3">PROGRAMMA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

                <a href="tunein.html">S<span class="style3">HOWS</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                <span class="style3">STAFF&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="contact.php"><span class="style3">CONTACT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

                <span class="style3">NIEUWS</td>

    </tr>

    </table>

 

<table style="width: 770px" align="center" cellpadding="0" cellspacing="0" class="contstyle">

    <tr>

        <td>

        <center><table style="width: 100%" align="center">

            <tr>

                <td style="width: 228px">

                <table align="center" cellpadding="5" cellspacing="0" style="width: 228px">

                    <tr class="topchart-bg">

                        <td style="height: 29px" class="style8">&nbsp;&nbsp;

                        <strong>

                        Populaire hits:</strong></td>

                    </tr>

 

                    <tr class="topchart">

                        <td style="height: 66px" class="style7" valign="top">

                        <div class="style5">

                            <strong>

                             <img height="70" src="http://www.bbc.co.uk/radio1/media/images/artists/calvinharris/090409_calvin_cd_single.jpg" width="70" class="cover-padding" style="float: left" /><div class="align">

                            </div>

                            Calvin 

                            Harris</strong><br />

                            I&#39;m Not Alone<br />

                            <a href="http://www.calvinharris.tv/">

                            [url=http://www.calvinharris.tv]http://www.calvinharris.tv[/url]</a><br>

                            <br>

                            <br>

                            <br>

                        </div>

                        </td>

                    </tr>

                    <tr class="topchart">

                        <td style="height: 66px" valign="top" class="style5">

                        <div class="style7">

                            <strong>

                            <img height="70" src="http://www.bbc.co.uk/radio1/media/images/artists/laroux/090320_cd_inforthekill_70.jpg" width="70" class="cover-padding" style="float: left" /><div class="align">

                            </div>

                            La 

                            Roux</strong><br />

                            In For The Kill<br />

                            <a href="http://www.laroux.co.uk/">www.laroux.co.uk</a><br>

                            <br>

                            <br>

                            <br>

                        </div>

                        </td>

                    </tr>

                    <tr class="topchart">

                        <td style="height: 66px" class="style5">

                            <div class="style7">                            <strong>

                            <img height="70" src="http://www.bbc.co.uk/radio1/media/images/artists/ladygaga/090227_cd_poker_70.jpg" width="70" class="cover-padding" style="float: left" /><div class="align">

                                </div>

                                Lady 

                            Gaga</strong><br />

                            Poker Face<br />

                            <a href="http://www.ladygaga.com/">www.ladygaga.com</a><br>

                            <br>

                            <br>

                            <br>

                        </div>

 

                        </td>

                    </tr>

                    <tr class="topchart">

                        <td style="height: 66px" class="style5">

                            <div class="style7">

                            <strong>

                            <img height="70" src="http://www.bbc.co.uk/radio1/media/images/artists/a_r_rahman/090430_arrahman_cd.jpg" width="70" class="cover-padding" style="float: left" /><div class="align">

                            </div>

                            AR 

                            Rahman Ft Pussycat Dolls</strong><br />

                            Jai Ho (You Are My Destiny)<br />

                            <a href="http://www.arrahman.com/v2/">

                            [url=http://www.arrahman.com]http://www.arrahman.com[/url]</a><br>

                            <br>

                            <br>

                        </div>  

                        </td>

                    </tr>

                    <tr class="topchart">

                        <td style="height: 66px" class="style5">

                            <div class="style7">

                            <div class="style5">

                            <strong>

                            <img height="70" src="http://www.bbc.co.uk/radio1/media/images/artists/ciara/090409_ciara_cd_single.jpg" width="70" class="cover-padding" style="float: left" /><div class="align">

                                </div>

                                Ciara 

                            Ft Justin Timberlake</strong><br />

                            Love Sex Magic<br />

                            <a href="http://www.ciaraworld.com/">

                            [url=http://www.ciaraworld.com]http://www.ciaraworld.com[/url]</a><br>

                            <br>

                            <br>

                            <br>

                            </div>

                        <div>

                        </td>

                    </tr>

                    </table>

                </td>

                </center>

                <td style="height: 100%" valign="top">

                <table cellpadding="5" cellspacing="0" style="width: 100%">

                    <tr class="center">

                        <td style="height: 29px" class="topchart-font topchart-bg">

                        <strong>Content:</strong></td>

                    </tr>

                    <tr class="blank-background">

                        <td class="style5"><span class="style4"><strong>&nbsp;Welkom bij Fusion FM!</strong> Dit is 

                        onze website. Luister direct mee met &nbsp;onze uitzendingen 

                        door middel van onze webplayer.<strong> </strong>Mis 

                        onze &nbsp;uitzendingen niet!<strong><br>

                        &nbsp;<img height="7" src="images/dot_line.gif" width="288" /><br>

&nbsp; Radio informatie:<br>

&nbsp;<iframe name="I1" id="I1" style="width: 287px" src="stats/radio_stats.php" scrolling="no" border="0" frameborder="0">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>

                        <br>

                        </strong></td>

                    </tr>

                    </table>

                </td>

                <td valign="top" style="width: 228px">

                <table cellpadding="0" cellspacing="0" style="width: 100%">

                    <tr>

                        <td style="height: 29px" class="topchart-font topchart-bg">

                        <strong>Shout en request:</strong></td>

 

                    </tr>

                    <tr class="topcontent">

                        <td valign="top">

                        <table cellpadding="5" cellspacing="0" style="width: 100%">

                            <tr>

                                <td>&nbsp;Heb jij iets te zeggen tegen onze DJ? 

                                Wil je een &nbsp;verzoekje in sturen? Of wil je ons 

                                gewoon &nbsp;vertellen wat jij van ons vindt?

                                <img height="36" src="images/woofericon.png" style="float: left" width="31" />Dat 

                                kan hier! Stuur &nbsp;een verzoekje of een shout naar 

                                de DJ. De DJ bekijkt hem en leest hem misschien wel 

                                voor live in de uitzending! &nbsp;Het is niet 

                                ingewikkeld en je bent er geen tijd aan &nbsp;kwijt. 

                                Wil je een shout of request versturen? <br>

                                &nbsp;Klik dan <strong>

                                <a href="javascript&#058;popUp('djpanel/request.php')">

                                <span class="style6">hier</a></strong>.<br>

                                </td>

                            </tr>

                        </table>

                        </td>

                    </tr>

                    </table>

                <table cellpadding="5" cellspacing="0" style="width: 100%">

                    <tr>

                        <td style="height: 29px" class="topchart-font topchart-bg">

                        <strong>Tune in:</strong></td>

                    </tr>

                    <tr class="topcontent">

                        <td>&nbsp;Onze radio zoumeteen moeten starten. Is dit niet &nbsp;het 

                        geval, dan kan het zijn dat er momenteel geen &nbsp;DJ online 

                        is.

                        <img height="28" src="images/waves.png" style="float: left" width="28" /> 

                        Weet je zeker dat er een DJ online is maar je hoort toch 

                        geen muziek? Dan kan het liggen aan onze website of aan 

                        jouw computer. Probeer het dan later nog eens. &nbsp;Werkt hij 

                        nog steeds niet? Neem dan contact op &nbsp;met een 

                        administrator.<br>

                        <br>

                        <center><img alt="" src="images/dots.png" width="100" height="1"><br><br>

                        </center>

                        <center>

        <object classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" name="player" border="1px" standby="Loading" align="center" style="width: 163px; height: 34px;">

    <param name="URL" ref value="http://<? echo "$ip";?>:<? echo "$port";?>/">

    <param name="rate" value="1">

    <param name="balance" value="0">

 

    <param name="currentPosition" value="280309411">

    <param name="defaultFrame" value>

    <param name="playCount" value="1">

    <param name="autoStart" value="-1">

    <param name="currentMarker" value="0">

    <param name="invokeURLs" value="-1">

    <param name="baseURL" value>

    <param name="volume" value="50">

    <param name="mute" value="0">

 

    <param name="uiMode" value="mini">

    <param name="stretchToFit" value="0">

    <param name="windowlessVideo" value="0">

    <param name="enabled" value="-1">

    <param name="enableContextMenu" value="-1">

    <param name="fullScreen" value="0">

    <param name="SAMIStyle" value>

    <param name="SAMILang" value>

    <param name="SAMIFilename" value>

 

    <param name="captioningID" value>

    <param name="enableErrorDialogs" value="0">

    <param name="_cx" value="3969">

    <param name="_cy" value="926">

  </object><br>

        <br>

                        </center>

                        </td>

                    </tr>

                </table>

                <br />

                </td>

            </tr>

            </table>

        </td>

    </tr>

</table>

 

<table style="width: 770px" align="center" cellpadding="0" cellspacing="0" class="contstyle footer">

    <tr>

        <td>Copyright 2009 - Fusionzone.nl | Alle rechten voorbehouden.| Layout 

        gemaakt door Innovati0n.</td>

    </tr>

</table>

 

</body>

 

</div>

</html>

 
And CSS:
Code: 
 

/* BODY STYLE */

 

body,td {

    font-family: Tahoma,Arial,Helvetica,sans-serif;

    font-size: 10px;

}

body {

    background-image: url('../images/background.png');

    margin: 0px;

    margin-top: 4px;

    margin-bottom: 4px;

    background-color: #000000;

    background-repeat: repeat-x;

}

input,select,textarea {

    font-family: Tahoma,Arial,Helvetica,sans-serif;

    font-size: 10px;

}

a,a:link,a:active,a:visited

{

    color: #FFFFFF;

    text-decoration: none;

    font-weight: bold;

    text-decoration: underline;

}

a:hover {

    color: #C78800;

    text-decoration: none;

}

 

/* MAIN STYLE */

 

.contstyle {

    border: 1px solid #898989;

    background-color: #262626;

    margin-top: 5px

}

.footer {

    font-weight: bold;

    text-align: center;

    padding-top: 5px;

    padding-bottom: 5px;

    color: #FFFFFF;

}

.topchart {

    padding: 5px;

    background-color: #FFD35A;

    background-image: url('../images/recenthit-bg.png');

    background-position: bottom;

    background-repeat: repeat-x;

}

.topchart-bg {

    background-image: url('../images/head-bg.png');

    background-repeat: no-repeat;

    padding-right: 10px;

    padding-left: 10px;

    color: #FFFFFF;

    font-size: small;

}

.topchart-font {

    color: #FFFFFF;

    font-size: x-small;

}

.cover-padding {

    padding-right: 5px;

}

.side-content {

    background-image: url('../images/side-bg.png');

    background-repeat: no-repeat;

    padding-right: 10px;

    padding-left: 10px;

    color: #FFFFFF;

    font-size: small;

}

.topcontent {

    background-color: #FFFFFF;

    background-image: url('../images/featured-topartifact.png');

    background-position: top;

    background-repeat: no-repeat;

}

.center {

    background-position: right;

    background-image: url('../images/mid-bg.png');

    background-repeat: no-repeat;

    padding-right: 10px;

    padding-left: 10px;

    color: #FFFFFF;

    font-size: small;

    background-color: #6580A0;

}

.blank-background {

    background-color: #FFFFFF;

}

.nav {

    border: 1px solid #898989;

    background-color: #262626;

    margin-top: 5px;

    padding-right: 10px;

    padding-left: 10px;

    color: #FFFFFF;

    font-size: small;

}

.align {

    text-align: center;

}

 

It's dutch but don't mind that.
If you want to see the page in action:

http://www.fusionzone.nl
 

Tohsaka

Sponsor

144
You know, it's aligned in Safari and Firefox for me, and it looks right in both. It might be due to an infection on your side?
 

Faint

Member

13
It wasn't. I already fixed it. I declared the width of the main table and the footer and set margin-left and right on auto. And it was fixed. This topic can be locked. Thank you for your support anyways.
 
You must log in or register to reply here.

Share this page

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

RPG Maker

  • Support & Help
    •
  • Tutorials
    •
  • Plugins - MZ, MV
    •
  • Scripts - Ace, VX, XP
    •
  • Resources
    •

    Content

  • Our Games
    •
  • Games in Development
    •  Emoji by Twemoji.
    Top