Jump to content
xisto Community
Sign in to follow this  
Followers 0
electriic ink

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

By electriic ink, in Programming

Recommended Posts

electriic ink    1

electriic ink
Posted

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:

<script type="text/javascript">	 if (screen.width > 880 && navigator.appName !== "Microsoft Internet Explorer")  {	   window.resizeTo(880,window.screen.availHeight);	}   </script>

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:

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

Share this post

Link to post
Share on other sites

serverph    0

serverph
Posted 
<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: 1pxborder-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. :P 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.

Share this post

Link to post
Share on other sites

Plenoptic    0

Plenoptic
Posted

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.

Share this post

Link to post
Share on other sites

electriic ink    1

electriic ink
Posted

Thank you serverph :D Lol, I tried <div align="center"> <body align="center"> and all sorts of stuff with css :P

 

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.

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 :)

Share this post

Link to post
Share on other sites

jlhaslip    4

jlhaslip
Posted

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.

Share this post

Link to post
Share on other sites

neuspadrin    0

neuspadrin
Posted

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 :))

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept