Help Me with my homepage.

[websitedude]

Hi, some people have had issues with my homepage's text on the boxes at the lower part of the site not being in line properly can you all please go on my site and tell me if all the text is alligned with the boxes. Thanks.

Site url: www.igames.org.uk

 

[carl6969]

Quite a few alignment problems present in my Chrome browser.

 

[webfuzions]

Quite a few alignment problems present in my Chrome browser.

Same in Safari on Mac OS X

 

[callumacrae]

Chrome on Mac OS X, too.

~Callum

 

[websitedude]

oh i don't suppose anyone uses windows and ie? and can any one suggest a way to fix the issue because at present the boxes are part of the background and the text just sits on the top moving for some reason on certain screens. Where as the site it is based on agame.com doesn't have this issue?

---------- Post added at 05:36 PM ---------- Previous post was at 05:23 PM ----------

Also can people tell me how slow the site is when you go to any page of the homepage because for me it is terrible at the moment

 

[essellar]

I'm seeing some slow loading too, even by my connection's standards (which ain't that good, so if I'm seing slowness, it's slow). Even a View->Source is slow (it re-fetches the HTML, so that means that the problem isn't the images, JS or CSS).

The only way to fix the alignment is to let go of the idea that the boxes should be part of the background. (My current screen is 1920 pixels wide, and I get empty boxes on the right-hand side of the screen when the background-image repeats, as well as text that appears to be afraid of the containers you intended for it.) You can't assume IE on Windows anymore -- that was a 90%+ chance a few years ago, but it's down to a coin toss these days.

What you have at the bottom is a genuine, honest-to-goodness table of data. It should be in a table. (I know, I know -- you keep seeing things on the web and in books that tell you never to use a table for layout, and they're all right. In this case, though, you actually have a legitimate use for, and I'd say need of, a table.) Creating something very similar to your box graphics in CSS alone would be easy; making it work in IE (which doesn't yet offer rounded borders) as well means using two small images in addition to CSS (one image for the top of the box and one for the bottom). You would then simply set the background colour of some cells to blue, some to white, and others to transparent and presto change-o, you've duplicated what you were after with no alignment problems.

(If you need help with that, post back, but in the Graphics and Design section. We're a pretty good community around here.)

 

[Gonrah]

There are few alignment problems in Chrome (as carl6969 said) but in Mozilla Firefox its even worse.
Take a look:
Google Chrome

Mozilla Firefox

 

[websitedude]

Brilliant answers people but why does this only happen in browsers other then internet explorer?

 

[callumacrae]

An extract from your source code:

<font color="#000000">Air Balloon 
		Rally</font></a><p align="left">&nbsp;<p align="left">&nbsp;<p align="left">
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Car Games&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Multiplayer 
        Games&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tycoon Games&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        Other Game Genres</b><p align="left">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="http://www.igames.org.uk/rickshaw%20racing.htm">
        <font color="#000000">Rickshaw Jam</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<a href="http://www.igames.org.uk/Tanks.htm"><font color="#000000">Tanks</font></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Seriously. Sort that out.

Your entire page needs a rewrite into proper HTML. Then it will work.

~Callum

 

[Gonrah]

Wow, I almost forgot that Internet Explorer is included in my Windows 7. I tried your page in it.Situation there is the same:
Internet Explorer

 

[carl6969]

Just a thought.
You might find this link helpful. If not for this particular issue, then perhaps sometimes in the future.
Browser Shots

 

[techairlines]

Besides the alignment problems I see as others mentioned:

I recommend you trying to design your homepage using valid XHTML with CSS instead of using deprecated HTML elements and a table based design. CSS makes sites look much better than tables.

In addition, the link to iGames Connect is a 404 error.

 

[essellar]

... using valid XHTML ...

The rest of the world is trying very hard to move to strict HTML doctypes. That's not to invalidate the basic aims that XHTML was trying to accomplish (XML forces valid markup in that all tags that have a beginning must have an end), but there were and still are problems with the XML paradigm when applied to documents. XML is a data structure description language, not a document markup language, and while the difference may seem a little fine, it has some implications that took a little while for us to realise. WHATWG, the self-assembled body behind HTML 5, was a bunch of fire-breathing standardistas, people who'd been shouting "XHTML!" from the highest rooftops and mountains, who saw where XHTML 2 was going and asked themselves "what have we done?"

Use XHTML 1.0 if you feel you have to, but HTML 4.01 Strict (if you need to support IE6) or HTML 5 (if you're only interested in a more up-to-date audience) is probably a better choice. And yes, for $_DEITY's sake, separate markup (HTML) from presentation (CSS) and behaviour (JS). That, of course, means using <strong> and <em> (or <span class="foreign" lang="xx/xx">) instead of <b> and <i>, <del> instead of <s>, <cite> instead of <u> for book titles, and so on. The object of the game is to make markup meaningful. But there are unary tags that do have a semantic place in a document but not in a data structure, like <hr> and <br>.

HTML 5 introduces new tags, like <header>, <footer>, <aside>, <section> and <article> that are fundamentally more meaningful than <div>, and that will be a huge boon when assistive technologies (are you listening, JAWS?) catch up. Add the concept of microdata to the mix, and we start to see some of the promises that XHTML was originally meant to bring -- and we get to do that without giving up document flow.

 

[websitedude]

Gonrah i believe the issue existed for you due to a mistake of mine when uploading the site yesturday could you try again now this is included in peoples 404 errors aswell. Can anyone tell me about the speed now i have a new hosting account. And i have put the text in tables and it still moves only in browsers outside of ie?

 

[Gonrah]

Google Chrome

Internet Explorer

Mozilla Firefox

Now your page is working a little faster.The Igames connect page is loading well. There are no 404 errors but I saw other problems in your forum.Look:

Chrome

IE

Firefox

 

[websitedude]

Forum sorted now
and i have sorted things out a bit better for firefox and possibly chrome by putting all the text one line down on the coding.But now on ie the titles for the boxes are below the bluue bits at the top so can peoplesend me screenshots again

 

[essellar]

You still haven't quite understood what people have been telling you. You're relying on a background image to highlight the text. DON'T do that -- you have no real control over the size of the text, or of the font (my installed version of Arial might be different from yours, or I may not have Arial installed). If different parts of a data table should appear differently on the screen, you apply styles to those parts of the table, not to whatever the table should be sitting on. (I haven't the time right now, but I'll post back here in a couple-three hours with a clearer explanation. In the meantime, try to understand that the "Works on My Machine (TM)" certification is worthless, which is why we have standards and standard ways of doing things.)

 

[Gonrah]

There is no difference:

Chrome

Firefox

IE

 

[callumacrae]

        <p align="left">
        <b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
		<td height="1178" width="143">
        <a href="http://marketplace.xbox.com/en-US/games/media/66acd000-77fe-1000-9115-d802585504fb/">
        <img border="0" src="http://x10hosting.com/forums/Advert.jpg" width="128" height="724"></a><p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</td>
	</tr>

I'm not being rude or anything, but that is a complete and utter mess. And the cause of the problems.

~Callum

 

[essellar]

Callum's right. Don't take it personally; we were all n00bs at one point. Your markup should probably look a lot more like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 FINAL//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-gb">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
   <meta http-equiv="Content-Language" content="en-gb">
   <title>Play Free online games at iGames | iGames:The place for online games </title>
</head>
<body>
   <div id="container">
      <div id="header">
         <img id="logo" src="" height="" width="" alt="[iFreeGames Logo]" />
         <h1 id="page_title">The place for Online Gaming</h1>
      </div><!-- end header div -->
      <div id="navigation">
         <ul id="nav_links_list">
            <li><a href="free%20online%20gaming.htm">Games</a></li>
            <li><a href="profile.htm">iGames Connect</a></li>
            <li><a href="http://igamesforums.proboards.com/index.cgi">Forums</a></li>
            <li><a href="http://www.facebook.com/pages/IGames/124871420891978?ref=ts">Facebook</a></li>
            <li><a href="http://www.twitter.com/igames_">Twitter</a></li>
         </ul><!-- end nav_links_list -->
      </div><!-- end navigation div -->
      <div id="main_content">
         <div class="local_content">
            <div class="article">
               <h2>News</h2>
               <p>Ok the latest news is everything on iGames pretty much is under construction since a new home page went on we decided to revamp everything we could get our hands on so the site is very slow at the moment but bear with us because the experience at the end will be amazing.</p>
            </div><!-- end article class div -->
            <div class="article">
               <h2>Welcome to iGames</h2>
               <p>Welcome to iGames your places for all the best free online games including, car games, shooting games and Sports games, Political games, Tycoon games, Simulation games, Skill games, Networking games, Random games, Multiplayer games and Game arcades. Also we make some of our games our selves making your experience on iGames even more pleasurable. All our games are updated every week to build up our collection of ours games to above 100 embedded games. What are you doing reading this go and play our games!</p>
            </div><!-- end article class div -->
            <div id="latest">
               <h2>Latest Games</h2>
               <ul id="latest_links_list">
                  <li class="item"><a class="uniIcon" href="http://www.miniclip.com/games/fragger/en/"><img title="Play Fragger" alt="Fragger" src="./Play Free_files/fraggersmallicon.jpg" width="70" height="59"></a></li>
                  <li class="item"><a href="Fragger%20lost%20city.htm">Fragger Lost City</a></li>
                  <li class="item"><a href="AirPort_Mania.htm">Airport Mania</font></a></li>
                  <li class="item"><a href="Obama_Alien_Defence.htm">Obama Alien defence</a></li>
                  <li class="item"><a href="Presedential_paint_ball.htm">Presidential Paintball</a></li>
               </ul><!-- end latest_links_list -->
            </div><!-- end latest div -->
         <div><!-- end local_content class div -->
         <div class="external_content">
            <ul class="categories">
               <li class="category">Shooting
                  <ul class="items">
                     <li class="item"><a href="Ove-rlord.htm">OverLord</a></li>
                     <li class="item"><a href="A.L.I.A.S.htm">A.L.I.A.S</a></li>
                     <li class="item"><a href="Sundown%20shoot%20off.htm">Sundown Shootoff</a></li>
                     <li class="item"><a href="alias%202.htm">A.L.I.A.S 2</a></li>
                     <li class="item"><a href="battle%20over%20berlin.htm">Battle over Berlin</a></li>
                     <li class="item"><a href="captain_usa.htm">Captain USA</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Sports
                  <ul class="items">
                     <li class="item"><a href="mini_%20pool%202.htm">Mini Pool 2</a></li>
                     <li class="item"><a href="mini%20pool%C2%AD_3.htm">Mini Pool 3</a></li>
                     <li class="item"><a href="Bowling_.htm">Bowling</a></li>
                     <li class="item"><a href="surfs%20up.htm">Surfs Up</a></li>
                     <li class="item"><a href="ping%20_pong.htm">Ping Pong</a></li>
                     <li class="item"><a href="air%20hockey].htm">Air Hockey</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Skill
                  <ul class="items">
                     <li class="item"><a href="Air_Balloon_Rally.htm">Air Balloon Rally</a></li>
                     <li class="item"><a href="Colours_.htm">Colours</a></li>
                     <li class="item"><a href="Wordzs.htm">Wordz</a></li>
                     <li class="item"><a href="Master_Checkersd.htm">Master Checkers</a></li>
                     <li class="item"><a href="Arms_dealer.htm">Arms Dealer</a></li>
                     <li class="item"><a href="Connect_2.htm">Connect 2</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Simulation
                  <ul class="items">
                     <li class="item"><a href="Air%20traffic%20cheif.htm">Air Traffic Chief</a></li>
                     <li class="item"><a href="sim%20air%20traffic.htm">Sim Air Traffic</a></li>
                     <li class="item"><a href="sim%20rescue.htm">Sim Rescue</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Car
                  <ul class="items">
                     <li class="item"><a href="formula%20fog.htm">Formula Frog</a></li>
                     <li class="item"><a href="sim%20taxi.htm">Sim Taxi</a></li>
                     <li class="item"><a href="taxi%20driving%20game.htm">Taxi Driving School</a></li>
                     <li class="item"><a href="planet%20racer.htm">Planet Racer</a></li>
                     <li class="item"><a href="crazy-taxi.htm">Crazy Taxi</a></li>
                     <li class="item"><a href="rickshaw%20racing.htm">Rickshaw Jam</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Multiplayer
                  <ul class="items">
                     <li class="item"><a href="Tanks.htm">Tanks</a></li>
                     <li class="item"><a href="Bunny%20wars.htm">Multiplayer Bunny Wars</a></li>
                     <li class="item"><a href="conquer%20antartic.htm">Conquer Antartica Multiplayer</a></li>
                     <li class="item"><a href="Match%204.htm">Match 4</a></li>
                     <li class="item"><a href="chess.htm">Multiplayer Chess</a></li>
                     <li class="item"><a href="Multiplayer%20checkers.htm">Multiplayer Checkers</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Tycoon
                  <ul class="items">
                     <li class="item"><a href="7%20seas%20estater.htm">7 Seas Estate</a></li>
                     <li class="item"><a href="sim%20lemonade%2030%20days.htm">Sim Lemonade 30 Days</a></li>
                     <li class="item"><a href="sim%20lemonade%20millonaire.htm">Sim Lemonade Millionaire</a></li>
                     <li class="item"><a href="Farm_%20Mania.htm">Farm Mania</a></li>
                     <li class="item"><a href="Youda%20_farmer.htm">Youda Farmer</a></li>
                     <li class="item"><a href="Dinner_at_%20romeos.htm">Dinner at Romeos</a></li>
                  </ul><!-- end items list -->
               </li>
               <li class="category">Other Genres
                  <ul class="items">
                     <li class="item"><a href="Network%20games.htm">MMOG</a></li>
                     <li class="item"><a href="homemadegames.htm">Homemade Games</a></li>
                     <li class="item"><a href="Retro_Games.htm">Retro Games</a></li>
                     <li class="item"><a href="politics%20games.htm">Political Games</a></li>
                     <li class="item"><a href="RPG-Games.htm">RPG Games</a></li>
                     <li class="item"><a href="Highscore_games.htm">Highscore Games</a></p><p></li>
                  </ul><!-- end items list -->
               </li>
            </ul><!-- end categories list -->
         </div><!-- end external_content div -->
         <div id="ads">
            <a href="http://marketplace.xbox.com/en-US/games/media/66acd000-77fe-1000-9115-d802585504fb/"><img border="0" src="http://igames.org.uk/Advert.jpg" width="128" height="724"></a><p></p>
         </div><!-- end ads div -->
      </div><!-- end main_content div -->
      <div id="footer">
         <p>Thank you for using iGames: the place for online Games</p>
         <ul id="footer_links_list">
            <li><a href="FAQs.htm">FAQs</a></li>
            <li><a href="Advertising.html">Advertising</a></li>
            <li><a href="buisness%20site.html">Business site</a></li>
            <li><a href="http://www.myriad.x10hosting.com/">Myriad</a></li>
            <li><a href="Turbo_Cow_GAmes.html">Turbo Cow Games Studio</a></li>
            <li><a href="sitemap.html">SiteMap</a></li>
         </ul><!-- end footer_links_list -->
      </div><!-- end footer div -->
   </div><!-- end container div -->
</body>
</html>

By itself, it won't look anything like what you want, but it means exactly what you want. The looks come later (and there's a character limit on postings here).