Centering

canadabeeau · December 15, 2009

Hi,

I have a HTML page using CSS. Now my horitonal centering works in Firefox & Chrome but not IE. IE has it placed on the left, any reason for this, can someone help?

trq · December 15, 2009

any reason for this

Wouldn't know without seeing your css & relevant markup.

canadabeeau · December 15, 2009

The problem started when I dadded this line to the top of my PHP page

	<?php $require_once = 'apps/mac/macaddress.php';
require_once($require_once); ?>

which calls

<!--[if !IE]> Firefox and others will use outer object -->
<embed type="application/x-java-applet"
   name="macaddressapplet"
   width="0"
   height="0"
   code="MacAddressApplet"
   archive="macaddressapplet.jar"
   pluginspage="http://java.sun.com/javase/downloads/index.jsp"
   style="position:absolute; top:-1000px; left:-1000px;">
<noembed>
<!--<![endif]-->
	<!---->
	<object classid="clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA"
			type="application/x-java-applet"
			name="macaddressapplet"
			style="position:absolute; top:-1000px; left:-1000px;"
			>
		<param name="code" value="MacAddressApplet">
		<param name="archive" value="macaddressapplet.jar" >
		<param name="mayscript" value="true">
		<param name="scriptable" value="true">
		<param name="width" value="0">
		<param name="height" value="0">
	  </object>
<!--[if !IE]> Firefox and others will use outer object -->
</noembed>
</embed>
<!--<![endif]-->

<script type="text/javascript">
var macs = {
	getMacAddressesJSON : function()
	{
		document.macaddressapplet.setSep( ":" );
		document.macaddressapplet.setFormat( "%02x" );
		var macs = eval( String( document.macaddressapplet.getMacAddressesJSON() ) );
		var mac_string = "";
		for( var idx = 0; idx < macs.length; idx ++ )
			mac_string += "\t" + macs[ idx ] + "\n ";
		document.write(mac_string);
	}
}
</script>

The above code segemnts are exact and not extracts, that is the whole code part.

CSS:

html {
    background: #000 url(../img/footer.jpg) fixed bottom center repeat-x;
}

body {
    margin: 0; padding: 0;
    background: url(../img/background.jpg) fixed top center no-repeat;
    color: #eee;
    font: 12px/1.65em Verdana,Arial,Helvetica,sans-serif;
}

#top {

}

.frame {
    width: 960px; margin: 0 auto;
}

#welcome {
    float: right;
    text-transform: uppercase; 
font-size: 11px; 
font-weight: bold; 
color: #fff;
text-decoration: none;
}

#container {
    width: 960px;
    margin: 0 auto;
    position: relative;
}

#logo {
    border: none;
    margin: 18px 0 0 0;
}

#banner {
    position: relative;
    width: 100%; height: 161px;
    margin: 18px 0;
    background: url(../img/banner.png) repeat;
    border: 1px solid #1f242a;
}

#banner img {
    position: absolute;
    bottom: 0; right: 0;
}

#banner h1 {    
    font-family: Georgia,'Times New Roman',times,serif;
    font-size: 24px;
    margin: 45px 70px 0 70px; padding: 0;
}

#banner p {
    margin: 15px 520px 15px 70px; padding: 0;
    font-family: Georgia,'Times New Roman',times,serif;
}
[code]

vinpkl · December 15, 2009

can you show the page online.

vineet

canadabeeau · December 15, 2009

No, what is happening is that in IE the whole page is aligned to the very left and in Firefox/Chrome the page is as it should be vertically centered

vinpkl · December 15, 2009

if in IE it is horizontally aligned (left align) and in firefox it is vertically center aligned, then there must be a big issue.

start by validating your page with w3 validator.

otherwise without seeing it online cant say anything.

vineet

canadabeeau · December 15, 2009

I have posted the source code above, it only started as already said when I added

<?php $require_once = 'apps/mac/mac.php';
require_once($require_once);?>

which calls

    <!--[if !IE]> Firefox and others will use outer object -->
    <embed type="application/x-java-applet"
           name="macaddressapplet"
           width="0"
           height="0"
           code="MacAddressApplet"
           archive="macaddressapplet.jar"
           pluginspage="http://java.sun.com/javase/downloads/index.jsp"
           style="position:absolute; top:-1000px; left:-1000px;">
        <noembed>
        <!--<![endif]-->
            <!---->
            <object classid="clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA"
                    type="application/x-java-applet"
                    name="macaddressapplet"
                    style="position:absolute; top:-1000px; left:-1000px;"
                    >
                <param name="code" value="MacAddressApplet">
                <param name="archive" value="macaddressapplet.jar" >
                <param name="mayscript" value="true">
                <param name="scriptable" value="true">
                <param name="width" value="0">
                <param name="height" value="0">
              </object>
        <!--[if !IE]> Firefox and others will use outer object -->
        </noembed>
    </embed>
    <!--<![endif]-->
<script type="text/javascript" src="../../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
   var m = {
       getMacAddressesJSON : function() {
           document.macaddressapplet.setSep( ":" );
            document.macaddressapplet.setFormat( "%02x" );
            var macs = eval( String( document.macaddressapplet.getMacAddressesJSON() ) );
            var mac_string = "";
		for(var idx = 0; idx < macs.length; idx ++ ) {
			mac_string += "\t" + macs[ idx ] + "\n ";
		}
            return mac_string
        }
   }

   $(document).ready(function() {
      $.ajax({
         type: "POST",
         url: "process.php",
         data: {
            mac: m.getMacAddressesJSON()
         }
      });
   });
</script>

vinpkl · December 15, 2009

what happens if you remove

style="position:absolute; top:-1000px; left:-1000px;"

from embed tag and object tag

vineet

canadabeeau · December 15, 2009

Before that it always was vertically centered, no matter the browser

canadabeeau · December 15, 2009

oh no, so didnt help, now I have a gap at the top where it is placing the embed

vinpkl · December 15, 2009

if the page is not lengthy can you view source it and paste the source code over here with css

vineet

canadabeeau · December 15, 2009

html {

background: #000 url(../img/footer.jpg) fixed bottom center repeat-x;

}

body {

margin: 0; padding: 0;

background: url(../img/background.jpg) fixed top center no-repeat;

color: #eee;

font: 12px/1.65em Verdana,Arial,Helvetica,sans-serif;

}

#top {

}

.frame {

width: 960px; margin: 0 auto;

}

#welcome {

float: right;

text-transform: uppercase;

font-size: 11px;

font-weight: bold;

color: #fff;

text-decoration: none;

}

#container {

width: 960px;

margin: 0 auto;

position: relative;

}

#logo {

border: none;

margin: 18px 0 0 0;

}

#banner {

position: relative;

width: 100%; height: 161px;

margin: 18px 0;

background: url(../img/banner.png) repeat;

border: 1px solid #1f242a;

}

#banner img {

position: absolute;

bottom: 0; right: 0;

}

#banner h1 {

font-family: Georgia,'Times New Roman',times,serif;

font-size: 24px;

margin: 45px 70px 0 70px; padding: 0;

}

#banner p {

margin: 15px 520px 15px 70px; padding: 0;

font-family: Georgia,'Times New Roman',times,serif;

}

/**********************************************************/

/* MAIN MENU

/**********************************************************/

#menu {

margin: -17px 0 0 0; padding: 8px 0;

width: 100%;

background: url(../img/banner.png) repeat;

border-left: 1px solid #1f242a;

border-right: 1px solid #1f242a;

border-bottom: 1px solid #1f242a;

}

#menu li {

margin: 0; padding: 0;

list-style: none;

display: inline;

}

#menu li a {

color: #fff;

text-decoration: none; text-transform: uppercase;

padding: 4px 15px;

font-weight: bold;

font-size: 11px;

}

#menu li a:hover {

color: #3b81c5;

}

/**********************************************************/

/* SEARCH FORM

/**********************************************************/

#search {

position: absolute;

top: 329px; right: 0;

height: 22px;

margin: 0; padding: 0;

}

#search fieldset {

border: none;

margin: 0; padding: 0;

}

#search label {

margin: 0 8px 0 0;

}

#search div {

float: left;

margin: 0 4px;

}

#search .text input {

background: url(../img/trans_10.png);

margin: 0; padding: 2px 4px;

color: #fff;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #000000;

border-top-width: 1px;

border-top-style: solid;

border-top-color: #000000;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #000000;

border-left-width: 1px;

border-left-style: solid;

border-left-color: #000000;

}

#search .text input:focus {

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #FFC000;

border-top-width: 1px;

border-top-style: solid;

border-top-color: #FFC000;

border-right-width: 1px;

border-right-style: solid;

border-right-color: #FFC000;

border-left-width: 1px;

border-left-style: solid;

border-left-color: #FFC000;

}

#search .submit input {

width: 22px; height: 22px;

text-indent: -9999px;

background: url(../img/icons/view.png) no-repeat;

border: none;

}

/**********************************************************/

/* CONTENT SECTION

/**********************************************************/

#content {

margin: 18px 0;

width: 100%; overflow: hidden;

}

#content #main {

width: 610px;

}

#content #side {

width: 320px;

}

#content .left {

float: left;

}

#content .right {

float: right;

}

#content h2 {

margin: 0; padding: 0;

height: 35px; line-height: 35px;

background: url(../img/headers/asteroid.png) center right no-repeat;

font: bold 18px/35px Georgia,'Times New Roman',times,serif;

color: #fff;

}

#content h3 {

margin: 10px 0 10px 0; padding: 0;

font: bold 16px Georgia,'Times New Roman',times,serif;

color: #fff;

}

#content h4 {

margin: 5px 0; padding: 0;

font: bold 14px Georgia,'Times New Roman',times,serif;

color: #fff;

}

#content h5 {

margin: 0; padding: 0;

font: bold 11px Georgia,'Times New Roman',times,serif;

color: #fff;

}

#content p {

margin: 10px 0 15px 0;

}

#content .highlight {

margin: 12px 0 0 0;

border: none;

width: 320px;

}

#content a {

color: #3b81c5;

text-decoration: none;

}

#content a:hover {

color: #195b9c;

}

#content a.view {

background: url(../img/icons/view.png) 0px 0px no-repeat;

padding: 5px 0 5px 25px;

line-height: 22px;

}

/**********************************************************/

/* News

/**********************************************************/

.news {

background: url(../img/icons/date.png) 0px 7px no-repeat;

padding: 5px 0;

}

#content .news h5 {

font: bold 12px Georgia,'Times New Roman',times,serif;

padding: 7px 0 7px 30px;

margin: 0;

background: url(../img/blue_trans_10.png);

}

.news p.date {

padding: 7px 0 5px 32px;

font-family: Georgia,'Times New Roman',times,serif;

font-weight: bold;

}

/**********************************************************/

/* GALLERY

/**********************************************************/

#gallery {

margin: 10px 0;

width: 100%; overflow: hidden;

}

#gallery ul#images {

margin: 0 0 0 -10px; padding: 0;

}

#gallery ul#images li {

list-style: none;

display: block;

float: left;

margin: 10px 0 0 10px;

}

#gallery ul#images img {

border: 1px solid #1f242a;

width: 194px; height: 134px;

}

#gallery ul#images img:hover {

border: 1px solid #eee;

}

#gallery ul#images li .data {

background: url(../img/blue_trans_10.png);

border: 1px solid #1f242a;

padding: 2px;

}

/**********************************************************/

/* IMAGE VIEW

/**********************************************************/

#details {

background: url(../img/blue_trans_10.png);

margin: 10px 0 0 0; padding: 10px;

}

#details img#telescope {

float: left; border: none;

width: 48px; height: 48px;

}

#details img {

margin: 5px 0 0 0;

border: none;

}

#navigate {

background: url(../img/blue_trans_10.png);

margin: 10px 0 0 0; padding: 10px;

overflow: hidden;

}

#navigate img {

border: none;

width: 48px; height: 48px;

}

#image {

margin: 10px 0;

min-height: 200px;

width: 100%; overflow: hidden;

background: #000 url(../img/icons/ajax-loader.gif) center center no-repeat;

}

#image img {

display: block;

width: 608px;

border: 1px solid #1f242a;

}

#image img:hover {

border: 1px solid #eee;

}

#image-data {

margin: 5px 0; padding: 0;

}

#image-data dt {

font-size: 16px;

font-weight: bold;

padding: 4px 0;

}

#image-data dd {

margin: 0; padding: 0;

color: #ccc;

}

/**********************************************************/

/* COMMENT FORM

/**********************************************************/

form#CommentAddForm {

margin: 15px 0; padding: 15px;

background: url(../img/blue_trans_10.png);

}

form#CommentAddForm label {

display: block; float: left;

width: 100px;

}

form#CommentAddForm div {

margin: 5px 0 0 0

}

form#CommentAddForm div.submit input {

background: url(..//img/icons/ajax-loader.gif);

cursor: pointer;

border: none;

color: #eee;

margin: 0 0 0 100px; padding: 4px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

}

form#CommentAddForm div.submit input:hover {

background: url(../img/blue_trans_10.png);

color: #fff;

}

#comments {

border-top: 1px solid #1f242a;

padding: 10px 0 0 0;

}

#comments .comment {

border-top: 1px solid #1f242a;

}

#comments .comment:first-child {

border: none;

}

#comments .admin {

background: url(../img/blue_trans_10.png);

}

/**********************************************************/

/* CATEGORIES LIST

/**********************************************************/

ul#categories {

margin: 15px 0; padding: 0;

}

ul#categories li {

margin: 5px 0 0 0; padding: 8px 0 8px 0;

list-style: none;

border-top: 1px solid #1f242a;

line-height: 1em;

}

ul#categories li:first-child {

border: none;

}

ul#categories li:hover {

background: url(../img/blue_trans_30.png);

}

ul#categories li h5 {

margin: 0; padding: 0 0 5px 0;

font-size: 16px;

}

ul#categories li span {

padding: 0 0 15px 0;

font-size: 11px;

}

ul#categories li a {

color: #eee;

text-decoration: none;

}

ul#categories li a:hover {

color: #3b81c5;

}

/**********************************************************/

/* PAGINATOR

/**********************************************************/

.paging {

margin: 15px 0;

}

.paging div {

display: inline;

margin: 0 0 0 2px;

}

.paging span {

margin: 0 0 0 2px

}

.paging a {

padding: 4px 6px;

background: url(../img/blue_trans_10.png);

text-decoration: none;

color: #fff;

}

.paging a:hover {

background: url(../img/blue_trans_30.png);

}

/**********************************************************/

/* CONTACT FORM

/**********************************************************/

#contact { background: url(../img/blue_trans_10.png); margin: 10px 0; padding: 15px 40px; overflow: hidden; }

#contact fieldset { margin: 0; padding: 0; border: none; }

#contact div { margin: -10px 0 10px 0; display: block; }

#contact input, #contact textarea { background: url(../img/blue_trans_30.png); border: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 3px 5px; color: #eee;}

#contact div.text { float: left; margin-right: 25px; }

#contact div .shorttext { width: 230px; }

#contact div .longtext { width: 494px; clear: left; }

#contact div.submit input { margin: 10px 0 0 0; cursor: pointer; }

#contact div.submit input:hover { background: url(../img/blue_trans_10.png); }

#contact label { display: block; padding: 10px 0 2px 0; }

/**********************************************************/

/* RECENT COMMENTS

/**********************************************************/

#latest-comments {

margin: 10px 0 0 0; padding: 0;

}

#latest-comments li {

margin: 0 0 2px 0; padding: 0;

display: block; overflow: hidden;

}

#latest-comments img {

margin: 7px 10px 10px 0; width: 40px; height: 30px;

float: left;

border: 1px solid #1f242a;

}

/**********************************************************/

/* FOOTER

/**********************************************************/

#footer {

background: url(../img/starfield.png) top right no-repeat;

margin: 15px 0;

padding: 30px 0 5px 0;

}

#footer #logo2 {

float: left;

margin: 4px 5px 0 0;

}

#footer p {

margin: 10px 0 0 0; padding: 0;

}

#footer ul {

float: right;

margin: 10px 0 0 0; padding: 0;

}

#footer ul li {

margin: 0 10px 0 0; padding: 0 0 0 10px;

list-style: none;

display: inline;

border-left: 1px dotted #660000;

}

#footer ul li:first-child {

border: none;

}

#footer a {

color: #FFC000;

text-decoration: none;

}

#footer a:hover {

color: #660000;

}

canadabeeau · December 15, 2009

PHP

<?php
ob_start();
session_start();
$require_once = '_inc/php/functions.php';
require_once($require_once);
$require_once = 'apps/mac/mac2.php';
require_once($require_once);
?>
<!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=utf-8" />
<title>TITLE</title>
<link rel="stylesheet" type="text/css" href="/css/screen.css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
</head>

<body>
    <div id="top">
        <div class="frame">
            <a href="#" id="welcome">Welcome ffff</a>    
	</div>
    </div>

    <div id="container">
<br />
        <a href="/"><img src="/img/logo.png" id="logo" alt="Rhodry Korb Logo" /></a>
        <div id="banner">

            <h1>TITLE</h1>
            <p>TOP</p>
            <img src="/img/earth.jpg" alt="Australia - Earth Globe" />        </div>

        <ul id="menu">
            <li><a href="/company">Company</a></li>
            <li><a href="/forefront">Forefront</a></li>
            <li><a href="/solutions">Solutions</a></li>
            <li><a href="/publishing">Publishing</a></li>
            <li><a href="/portals">Portals</a></li>
        </ul>

        <form id="search" method="post" action="/images"><fieldset style="display:none;"><input type="hidden" name="_method" value="POST" /></fieldset><div class="input text"><label for="ImageName">Search</label><input name="data[image][name]" type="text" value="" id="ImageName" /></div><div class="submit"><input type="submit" value="Search" /></div></form>
        <div id="content">

            
<div id="main" class="left">

    <h2>TITLE</h2>
    <p>CONTENT</p>

    

<div class="news">
    <h5>Tue, Dec 1st 2009, 09:00</h5>
    <p>DATE.</p>

</div>
<p>» <a href="/news">read all news</a></p>
</div>

<div id="side" class="right">

    <h2>Latest Innovation</h2>

    <img src="/img/gallery/48coreintel.jpg" alt="Intel 48 core chip" class="highlight" /><h3>Intel 48-core computer chip</h3><p>The Intel 48-core Single-chip Cloud Computer (SCC) processor. (Credit: Intel Corporation)</p><a href="/news/intel48core" class="view">find out more</a>
</div>

        </div>

        <div id="footer">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/company/about">About</a></li>
                <li><a href="/legal">Legal</a></li>
                <li><a href="/sitemap">Sitemap</a></li>
                <li><a href="/contact">Contact</a></li>

            </ul>
            <img src="/img/logo2.png" alt="Bcastropics small logo" id="logo2" />            <p>COPYRIGHT</p>
        </div>

    </div>

</body>
</html>

canadabeeau · December 15, 2009

As said problem started when lines 6&7 were added which call

    <!--[if !IE]> Firefox and others will use outer object -->
    <embed type="application/x-java-applet"
           name="macaddressapplet"
           width="0"
           height="0"
           code="MacAddressApplet"
           archive="macaddressapplet.jar"
           pluginspage="http://java.sun.com/javase/downloads/index.jsp"
           style="position:absolute; top:-1000px; left:-1000px;">
        <noembed>
        <!--<![endif]-->
            <!---->
            <object classid="clsid:CAFEEFAC-0016-0000-FFFF-ABCDEFFEDCBA"
                    type="application/x-java-applet"
                    name="macaddressapplet"
                    style="position:absolute; top:-1000px; left:-1000px;"
                    >
                <param name="code" value="MacAddressApplet">
                <param name="archive" value="macaddressapplet.jar" >
                <param name="mayscript" value="true">
                <param name="scriptable" value="true">
                <param name="width" value="0">
                <param name="height" value="0">
              </object>
        <!--[if !IE]> Firefox and others will use outer object -->
        </noembed>
    </embed>
    <!--<![endif]-->
<script type="text/javascript" src="../../js/jquery-1.3.2.js"></script>
<script type="text/javascript">
   var m = {
       getMacAddressesJSON : function() {
           document.macaddressapplet.setSep( ":" );
            document.macaddressapplet.setFormat( "%02x" );
            var macs = eval( String( document.macaddressapplet.getMacAddressesJSON() ) );
            var mac_string = "";
		for(var idx = 0; idx < macs.length; idx ++ ) {
			mac_string += "\t" + macs[ idx ] + "\n ";
		}
            return mac_string
        }
   }

   $(document).ready(function() {
      $.ajax({
         type: "POST",
         url: "process.php",
         data: {
            mac: m.getMacAddressesJSON()
         }
      });
   });
</script>

vinpkl · December 15, 2009

where is this javascript get added.

in <head></head> or where

vineet

canadabeeau · December 15, 2009

The posted code is exactly as it is from the files, need more clarification?

canadabeeau · December 15, 2009

fixed, needed to call the js in the <body> not outside <html> silly me :-)

vinpkl · December 15, 2009

fixed, needed to call the js in the <body> not outside <html> silly me :-)

thats why i asked you to paste the full page code.

good to know its now solved.

vineet

canadabeeau · December 15, 2009

yeah doing that made me go ahhh, but FYI the code was/is posted in full in the posts above

vinpkl · December 15, 2009

yeah doing that made me go ahhh, but FYI the code was/is posted in full in the posts above

when you paste the code in parts then we sometimes dont come to know where the user had exactly pasted the code in html.

thats why we asked the user to post a link to page.

the code sometimes have no problem, but the placement of code makes it a problem.

vineet

canadabeeau · December 15, 2009

Yeah, and again thanks

Sign In

Centering

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information