Help Aligning My Site Into The Centre In Firefox - site aligns to the centre in ie but not in firefox

electriic ink

Jul 23 2006, 12:31 PM

I'm developing a new layout and so far, in my opinion, everything's going fine except for one thing. That's the way in which the whole layout is aligned. In IE6, the entire thing aligns beautifully in the centre whereas in firefox, it aligns leftwards. To get around this so far I'm using this java script:

CODE

As you can imagine, people won't be too happy about having their browser resized on every pageload.

Here's the html code so far:

CODE

<html>
 <head>
  <style type="text/css">
   a.longnav{
    color: #000000;
   }
  a.longnav:hover{
    background-color: #FFFFFF;
    color: red;
  }
   a.navobject {
    color: #000000;
   }
  a.navobject:hover {
    color: red;
  }
   body {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    vertical-align: center;
   }
  div {
    text-align: center;
  }
   div.long_nav:hover {
    background-color: #FFFFFF;
   }
 h2.content {
    font-family: "Visitor TT2 BRK", Arial;
    text-align: center;
    text-transform: uppercase;
  }
   img {
    border : 0px;
   }
   img.header {
    margin-bottom: 0px;
    top: 0px;
   }
  p.content {
    color: #000000;
    font-face: Verdana;
    font-size: 11pt;
    height: 500px;
   }
   table.bulk {
    border: 1px solid rgb(0,0,0);
   }
   table.nav_object {
    background-image: url(images/5/nav.png);
    border: 1px
    border-color: #000000;
    text-align: center;
    width: 800px;
   }
   td.content {
    vertical-align: top;
    width: 597px;
   }
   td.long_nav {
    background-color: #EEEEEE;
    color: blue;
    font-family: Arial;
    font-size: 10pt;
    text-align: center;
    vertical-align: top;
    width: 94px;
   }
   td.nav_object {
    font-family: Arial;
    font-size: 10pt;
    margin-top: 0px;
    text-align:center;
    width: 100px;
   }
  </style>

  <script type="text/javascript">

     if (screen.width > 880 && navigator.appName !== "Microsoft Internet Explorer")  {

       window.resizeTo(880,window.screen.availHeight);

    } 


  </script>
 </head>
 <body align="center">
 <div style="background-color: black; width: 801px; text-align: center" align="center">
   <a href="/">
     <img class="header" src="images/5/header.png" alt="">
   </a>
   <table class="nav_object" align="center">
    <tr>
     <td class="nav_object"> <a class="navobject" href="#"> HOME </a>
     </td>
     <td  class="nav_object" >     <a class="navobject" href="#"> GAMES </a>
     </td>
     <td  class="nav_object"  >      <a class="navobject" href="#">  TOONS </a>
     </td>
     <td class="nav_object">     <a class="navobject" href="#"> QUIZZES </a>
     </td>
     <td  class="nav_object">     <a class="navobject" href="#"> PROXIES </a>
     </td>
     <td  class="nav_object" >         <a class="navobject" href="#"> VOTE</a>
     </td>
     <td  class="nav_object" >           <a class="navobject" href="#">  AFFILIATES</a>
     </td>
     <td  class="nav_object">        <a class="navobject" href="#"> CONTACT</a>
     </td>
    </tr>
   </table>
  </div>
   <table class="bulk">
     <tr>
      <td class="long_nav"> <b> Navigation </b>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br>  </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
			<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
      </td> 
      <td class="content"> <h2 class="content"> CONTENT </h2>
        <p class="content"> Lorem ipsum solar dot emit </p>
      </td>
      <td class="long_nav"> <b> Extras </b>
      </td>
    </tr>
   </table>
  </body>
</html>

Can you help?

serverph

Jul 23 2006, 05:38 PM

CODE

<html>
<head>
<style type="text/css">
a.longnav{
color: #000000;
}
a.longnav:hover{
background-color: #FFFFFF;
color: red;
}
a.navobject {
color: #000000;
}
a.navobject:hover {
color: red;
}
body {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
vertical-align: center;
}
div {
text-align: center;
}
div.long_nav:hover {
background-color: #FFFFFF;
}
h2.content {
font-family: "Visitor TT2 BRK", Arial;
text-align: center;
text-transform: uppercase;
}
img {
border : 0px;
}
img.header {
margin-bottom: 0px;
top: 0px;
}
p.content {
color: #000000;
font-face: Verdana;
font-size: 11pt;
height: 500px;
}
table.bulk {
border: 1px solid rgb(0,0,0);
}
table.nav_object {
background-image: url(images/5/nav.png);
border: 1px
border-color: #000000;
text-align: center;
width: 800px;
}
td.content {
vertical-align: top;
width: 597px;
}
td.long_nav {
background-color: #EEEEEE;
color: blue;
font-family: Arial;
font-size: 10pt;
text-align: center;
vertical-align: top;
width: 94px;
}
td.nav_object {
font-family: Arial;
font-size: 10pt;
margin-top: 0px;
text-align:center;
width: 100px;
}
</style>

<script type="text/javascript">

if (screen.width > 880 && navigator.appName !== "Microsoft Internet Explorer") {

window.resizeTo(880,window.screen.availHeight);

}


</script>
</head>
<body align="center">
<CENTER> 
<div style="background-color: black; width: 801px; text-align: center" align="center">
<a href="/">
<img class="header" src="images/5/header.png" alt="">
</a>
<table class="nav_object" align="center">
<tr>
<td class="nav_object"> <a class="navobject" href="#"> HOME </a>
</td>
<td class="nav_object" > <a class="navobject" href="#"> GAMES </a>
</td>
<td class="nav_object" > <a class="navobject" href="#"> TOONS </a>
</td>
<td class="nav_object"> <a class="navobject" href="#"> QUIZZES </a>
</td>
<td class="nav_object"> <a class="navobject" href="#"> PROXIES </a>
</td>
<td class="nav_object" > <a class="navobject" href="#"> VOTE</a>
</td>
<td class="nav_object" > <a class="navobject" href="#"> AFFILIATES</a>
</td>
<td class="nav_object"> <a class="navobject" href="#"> CONTACT</a>
</td>
</tr>
</table>
</div>
<table class="bulk">
<tr>
<td class="long_nav"> <b> Navigation </b>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
<div width="100px" class="long_nav"> <a href="index.html" class="longnav"> Home </a> <br> </div>
</td>
<td class="content"> <h2 class="content"> CONTENT </h2>
<p class="content"> Lorem ipsum solar dot emit </p>
</td>
<td class="long_nav"> <b> Extras </b>
</td>
</tr>
</table>
</CENTER>
</body>
</html>

simply added the <CENTER> </CENTER> tags to wrap the body.

hope it helps.

perhaps you'd like to do away with the javascript inserted in there between your HEAD tags. tested to be centered on firefox 1.5.0.3 and ie 6.0.

Plenoptic

Jul 23 2006, 06:22 PM

The only problem I think that might occur with the <center> tags around the code would it would center all text and maybe make it look a little funky. It might not work right because it might not be valid HTML. If you haven't already go to http://validator.w3.org and check that url to see if it is all valid and if not it will show you any errors that might have caused the problem. I noticed that if everything is valid it works fine in all browsers. If it is valid in HTML then check the CSS as well.

electriic ink

Jul 23 2006, 07:09 PM

Thank you serverph

Lol, I tried <div align="center"> <body align="center"> and all sorts of stuff with css

QUOTE(Plenoptic)

There were a few errors after I added the doctypes and stuff in but I don't think they were to do with that. They all looked to be careless mistakes.

Strangely the text only centres itself in IE however I think the centering of the news items look quite nice

jlhaslip

Jul 23 2006, 11:53 PM

Drop the Table based layout and use real css divs instead. Tables should be used for 'tabular data'. A list of links should be an Unordered list for layout.
Lose the px based sizing and use percentages to size your layout. Use Margins and Padding to centre the Body.
Add the Navigation to a list rather than the 'divitis' approach you have used. Navigation links are better suited to being lists rather than Div's. A Div is a generic container, Links are listed items inside a generic container. Lists can be treated so that they can be displayed Horizontal or Vertical.
Also, in future, could you please supply a link to a test page for us? It is easier to see the problem if we can link directly to a page.

Also, as soon as something works exactly as you want it to using IE as your Browser, I am suspicious that there is a problem. Do your design using Firefox or Opera first and get it working properly and then test it in IE. Doing it this way produces better (Standards Compliant) code. FF and Opera are more likely to interprete the html and CSS correctly and then you can hack the IE. Otherwise, you end up trying to hack FF into mis-interpreting the code to do what you want and it is easier to hack IE since it is usually the one which does not behave in a Standards Compliant manner.

neuspadrin

Jul 24 2006, 12:17 AM

Adding to what jlhaslip said, using css with divs makes life a lot easier. And definatly design in firefox over IE, as IE always needs some odd hacks, where as if you design for firefox, it should be pretty close in IE and all other browsers, only requireing maybe a small hack here or there.

As to the comment earlier about how <center> makes an error when validated through w3c, change your doctype to transitional instead of strict. it should accept <center> now. (or you can really just ignore it, it works anyways

)

Similar Topics

Keywords : aligning site centre firefox site aligns centre firefox

How Can Rss Feed From Other Web Site? - (3)
Creating Rss Feeds For Wapsites - How to display rss feeds in a php enabled site (5)
Anyone who wants to help me? I want my site to have this feature but I don't know how.
/sad.gif" style="vertical-align:middle" emoid=":(" border="0" alt="sad.gif" /> Hope you could me
with embedding these xml files in my wml pages.. Moved to the HTML, XML ect.. forum ...

Help With Website Layout Correction For All Browsers - Page gets larger on Firefox 2 (4)

If you go to my site at http://boozkerstweaks.trap17.com and you look at the home page everything
is fine on all browsers. Problems start to arise very soon however. Here is my list of problems and
i was wondering if someone could help with just whats wrong. I have done a HTML validator and found
only 3 errors and all these problems still occured. You might find more now though because i am
screwing around with the code. Here is the list of browsers and errors: Netscape 8.1: After you
click on the pulldown menu and click the only tweak avaible at the moment the pag...

Music On Site - Site Music (44)

Ne one know the tag for background music......

Live Video (using Webcam) On Site? - just like jennycam (2)

I have a webcam and I want my site to have a live video of me (or my room, whatever) whenever
I'm online (e.g. JennyCam, etc.). I want it to occupy a small portion of my webpage and it
should be unobtrusive. It doesn't even matter if the video is choppy or grainy. Is there a
script or a free program for this? I'm sure there is but does anyone here know it? Thanks....

Integerate Your Site With Talking Characters - Ms Agents - (7)

Hello All Have You ever seen the above MS Agents in any of the websites ? They Demonstrate
things,Explain,Greet your visitor, Give Information about the user and above all they give a pretty
cool cool to your website! Want them on your site? This tutorial will explain on how to
Integerate MS Agents in your website! For those who cannot understand what I am talking about
or want to see a sample check them on sample page! ->->->
http://www.technik.co.in/docs/agent_sample.htm This tutorial may feel every long but beleieve me I
have made it easy as much as...

Menu Bar Aligning - (1)

I am creating a website for an outreach service. I am running into a reoccuring problem. I can get
everything to center correctly while I am viewing it under 1024x768. When I view it under 800x600
the menu itself pulls to the right. If I take away the absolute value it puts the menu on the left
margin. You can view the source by going to this website: http://www.faithcity.org/test.html . Any
advice would be greatly appreciated....

Basic Ways To Speed Up Your Web Site - (20)

Speed is certainly one of the most important factors when it comes to making a successful web site.
These days’ people have high expectations, they expect a web site to load as fast as an application
on their operating system, and therefore even a few seconds of waiting can frustrate them or leave
altogether. A good website should take about 8-12 seconds (for a 56K) to load. The website owner is
going to have to decide how fast its pages are going to be, for example for a multimedia or a flash
site they can afford to be a bit slower than others provided that the users k...

Firefox Script Problem - (5)

Why Firefox can't scripting on below script:- CODE <center><a
href='http://www.yahoo.com'>Yahoo!</a></center> If correct,
the webpage should run "Yahoo!" at the center. When I using Internet Explorer, it run
correctly, but when I using Firefox, the "Yahoo!" will go to the left side. Who know this,
please explain to me and show me the introdution to make "Yahoo!" to center by using Firefox and
Internet Explorer browser....

Ie5 Mac Does Not See My Site - It shows the body bg image only... (11)

Remember that site layout I was hacking down for IE? Which by the way I didnt really like, but it
was the customer's design... and yes, he is not a graphic designer hehe... Anyway I was really
surprised that I got to the solution and fixed it... but as I'm testing between browsers, I come
to see that Internet Explorer in Mac does not show nothing of my page, yet the source code is there,
if you click command + e in order to see the html source code, its all there! But all I can see
from the page itself is the body background-image... I tried removing the d...

Redesigning A Web Site For Php? - Or Modifying an existing one? (4)

I have recently built (by hand coding) a web site that includes about 27 pages and a two-level
folder structure, and since I've been learning a few things about php includes and that
sidebar-ul link generator (and hopefully some more stuff soon), I am thinking that I will re-create
the same site using these new-found tools. What I would like to get out of this topic is your
opinion about whether I should go about this by one of the following two methods: First, I could
start from scratch and use Includes and the side bar generator and build an entirely new site, o...

What Is It..... - what is the site (3)

Hello i was wondering what is the site for XML forums i want to put a xml forum on my server when i
get it running please tell me...

Anchor Tag Compliance Issue? - Firefox is tiny, IE and Opera okay (5)

I have a string of anchor tags arranged as a menu bar horizontally on a page. Pretty basic stuff is
included in the css to give some colour and rollover colour change. The page links have been in
place in the Html code and all are tested and confirmed accurate. This topic has to do with the
browser only,( I think). I mention this in case there might be concerns about the anchor tags being
correctly coded. Yes, they are good. So I modified the css to get it looking the way I thought was
correct for the page in terms of placement, Background colour, rollover effect, etc....

A Good Space For Learn Html - web site link (5)

Hi i find this web site you can learn html lan very fast and very easy woow i found it many
tutorials go http://www.w3schools.com/ its really good website /rolleyes.gif' border='0'
style='vertical-align:middle' alt='rolleyes.gif' /> ...

Add Individuation To Your Site - very good try... (4)

lots of html fans make varied and beautiful webpage,which look larruping...i will introduce a way to
add individuation as if not very good.lol:exactly speaking,it is a easy script. type the code below
in : CODE <script language="JavaScript"> <!-- function
scroll(seed) { var m1 = " what you want to say " var m2 = " " var
msg=m1+m2; var out = " "; var c = 1; if (seed > 100) { seed--; var
cmd="scroll(" + seed + ")"; timerTwo=window.setTimeout(cmd,100); }
else if &...

Set site as homepage - (5)

CODE <a href="#"
onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('
PUT YOUR URL HERE');"><font color=navy face=verdana size=2><b>Click
here to set this as your home page</b></font></a> Under "PUT YOUR URL
HERE" you insert something like trap17.com or something...

Choosing the right font for your site - http://www.netdummy.com/netdummy-31-2003 (0)

Choosing the right typeface for your website copy is important, since it will affect the way your
readers perceive your page (serious and formal, or friendly and casual). Aside from this, there are
also important usability concerns. For example, some font types are more easily readable than
others, and some are more widely available. You want to choose font types that: fit the
character of your site, are easy to read on a computer screen, and are widely available across
many browsers and operating systems. There are basically two types of fonts: serif and sans ser...

Looking for aligning, site, centre, firefox, site, aligns, centre, firefox

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE