 Help Aligning My Site Into The Centre In Firefox, site aligns to the centre in ie but not in firefox |
|
|
|
|
  |
 Jul 23 2006, 12:31 PM
Post
#1
|
|
|
Incest is a game the whole family can play.  Group: [MODERATOR] Posts: 1,217 Joined: 11-February 05 From: Heaven Member No.: 3,709  |
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 <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: 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? |
 |
 
|
|
Jul 23 2006, 05:38 PM
Post
#2
|
|
|
Ancient Enigma Group: [MODERATOR] Posts: 1,769 Joined: 11-July 04 From: under the stars Member No.: 76 |
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.
|
|
|
|
|
Jul 23 2006, 06:22 PM
Post
#3
|
|
|
Trap Double Mocha Member  Group: [HOSTED] Posts: 2,228 Joined: 5-November 05 From: That one place over there... Member No.: 13,830 |
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.
|
|
|
|
|
Jul 23 2006, 07:09 PM
Post
#4
|
|
|
Incest is a game the whole family can play. Group: [MODERATOR] Posts: 1,217 Joined: 11-February 05 From: Heaven Member No.: 3,709 |
Thank you serverph
Lol, I tried <div align="center"> <body align="center"> and all sorts of stuff with css QUOTE(Plenoptic) 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
|
|
|
|
|
Jul 23 2006, 11:53 PM
Post
#5
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing. Group: [MODERATOR] Posts: 3,994 Joined: 24-July 05 From: In Trouble Again... still? Member No.: 9,787  |
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. |
|
|
|
|
Jul 24 2006, 12:17 AM
Post
#6
|
|
|
Newbie [Level 2] Group: Members Posts: 27 Joined: 23-July 06 Member No.: 27,146 |
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