http://tinyurl.com/qrt8fq In firefox everything under "features" lines up perfectly However in Internet explorer everything under "features" lines up to the right. Thank you so much in advance!
After viewing the source of your website, I can see many reasons why browsers are rendering the page differently. All of them are because of your use of deprecated tags and invalid markup. Your page is not XHTML valid despite you using its doctype. Apart of HTML 4 and XHTML is that appearance (styling) is seperated from content ([X]HTML markup). This includes removing size declarations, text styling, and positioning. You are in violation of that by using the height, width, and align. Check out how your page validates using the W3 Validator. Doing so will help you fix many self-created rendering errors. The items under "Features" render differently due to the different ways browsers interpret the deprecated HTML align tag. One of the divs surrounding your table has align=center which in IE changes all the text, unless told otherwise by other declarations, to center within that div. That is why the items under "Features" are centered while "Features" is not ("Features" is set to align=left directly). You did not individually left-align the items under "Features". In Firefox, the align=center of the div I mentioned did not effect text that deeply. Therefore, the items under "Feature" are by default aligned left. Hopefully, you will seperate your style from your content as needed and use CSS which you can learn on W3Schools if needed. Instead of using the deprecated align attribute, you can use the CSS "text-align" align. Also, CSS can help you avoid constant overwritting and repetition which is very prevelent in your coding.
AssistantX is spot on when it comes to the first observation, though the problems run right to the core. Invalid markup is just the tip of the iceberg here as the completely over the top classitus, divitus, and in general poor markup means that I'd have to throw it out and start over from scratch to even TRY to fix anything. With 261 validation errors resulting in one invalid bit of CSS for every two lines of code, you do not have HTML, you have gibberish. Invalid heading orders, heading tags around non-heading elements, multiple h1 tags, presentational tags inside a TD that should likely be a TH, etc, etc. Here, let's go through from the start listing everything that's wrong with the markup, then I'll show you how I'd code it. Nothing wrong with the doctype - if the page was actually written using XHTML strict - which it is not. See the tags in all caps? Invalid HTML since 4.0 was released, what you have there is HTML 3.2 See the inlined style? You've got two external stylesheets, get that the **** out of the markup. See the two stylesheets? Pain in the ass and can cause specificity issues, combine that down to one file declaring each element ONCE. No media types, meaning you are sending to devices like handhelds CSS likely designed for screens. Use of the mixed icon declaration is why Opera and IE are both showing no favicon... and that's before we even GET to the body tag. ID on body, there is rarely a good reason to do that, so that can be axed... You've got FOUR div before you even get to content, and then you have a H6 - which makes no sense whatsoever without a h1 through h5 preceeding it. The first heading on a page should be a h1, and you should only have one h1... which is where later on that table is made of /FAIL/. The only part that seems to be marked up well at all is the menu... the logo? No fallbacks for images off, nothing displayed for screen readers, complete trash. Your comment placement is likely to trip rendering bugs in IE. (Yes, COMMENTS can trip rendering bugs) especially with the use of #DDD comments like this: <!--header --> <div id="header"> Code (markup): No shit, <div id="header"> might be the start of our header? No need to waste space on a comment there. Conversely this: </div> <!--header end--> Code (markup): is where rendering errors could occur... and of course it's the end, that's what </div> means... Moving the comment inside the div will prevent that render bug in most cases, so I'd do that <!-- #header --></div> Code (markup): Now THIS: <div id="content"> <div class="main"> <div class="row-1"> <div class="container"> <div class="col-1"> <div class="box"> <div class="left-corner"> <div class="right-corner"> <div class="title"> <div class="corner-left"> Code (markup): SERIOUS whiskey tango foxtrot. I assume that's for the rounded borders - and as such is nesting ENTIRELY way too deep for something that could be done via sliding doors in a much more elegant fashion. The table is typical of your tables written by people who never bothered learning there are more tags that can go inside one than TR and TD. The ENTIRE first TR should probably be inside a THEAD using TH instead of <td><h1><strong>... Likewise the <td><h1><strong> in the first column should all be TH as well, all those records belonging in a TBODY. ALL of those align attributes need to go (as AssistantX said) since those do not even exist in the doctype you chose. From there you've got some DIV that shouldn't be DIV, a YT embed that doesn't render properly cross browser, and a few other minor issues. A rewrite of the markup 'modern style' ends up something like this: <!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" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="Shared Hosting, Hostorea" /> <meta name="description" content="Choose from one of our shared web hosting plan, at Hostorea web hosting" /> <link rel="shortcut icon" href="favicon.ico" /> <link rel="icon" href="favicon.ico" /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Shared Cpanel Plans | Hostorea.com </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! --> <div id="pageWrapper"> <h1> Hostorea <span>hosting</span> <small>Try Our New Inclusive Hosting</span> <b></b> </h1> <ul id="topMenu"> <li>24/7 Email Support: Ask@Hostorea.com</li> <li class="last">24/7 Skype : Hostorea</li> </ul> <ul id="mainMenu"> <li><a href="/index.html">Home</a></li> <li><a href="/shared.html">Shared</a></li> <li><a href="/reseller.html">Reseller</a></li> <li><a href="/other.html">Other</a></li> <li class="active"><a href="/extra.html">Extra</a></li> <li><a href="/order">Login</a></li> <li class="last"><a href="contacts.html">Contact Us</a></li> </ul> <div class="banners"> <!-- given these are text, they probably SHOULDN'T BE IMAGES! --> <img src="images/banner1.jpg" width="236" height="71" align="absmiddle" /></a><br /> <img src="images/banner2.jpg" width="224" height="152" /></a> </div> <div class="headerText"> <h2>Simply... Fast</h2> <p> Tired of those slow overcrowded servers? Losing visitors? With Hostorea you recieve: </p> <ul> <li> 99% server uptime guarantee <img src="images/sun.jpg" alt="sun" /> </li></li> 0.05 second load guarantee <img src="images/sun3.jpg" alt="briefcase" /> </li><li> 5 TB Servers, never oversold! <img src="images/sun2.jpg" alt="folder" /> </li> </ul> <p> <a href="index.html" class="button"> Order <span></span> </a> </p> <!-- .headerText --></div> <div id="content"> <div class="borderTop"><div></div></div> <table class="features"> <thead> <tr> <th>Features</th> <th><strong>Cpanel 1</th> <th>Cpanel 2</td> <th>TB Cpanel</th> <th>Unlimited CPanel</th> </tr> </thead> <tbody> <tr> <th>Diskspace</th> <td>1000 MB</td> <td>25 GB </td> <td>1 TB</td> <td>Unlimited</td> </tr><tr> <th>Bandwidth</th> <td>5000 MB </td> <td>50 GB</td> <td> 2 TB</td> <td>Unlimited</td> </tr><tr> <th>>Add On Domains</th> <td>1</td> <td>20</td> <td>200,000</td> <td>Unlimited</td></td> </tr><tr> <th>Sub Domains /parked</th> <td>1</td> <td>Unlimited</td> <td>Unlimited</td> <td>Unlimited</td> </tr><tr> <th>MySQL Database</th> <td>1</td> <td>Unlimited</td> <td>Unlimited</td> <td>Unlimited</td> </tr><tr> <th>Email Accounts</th> <td>1</td> <td>Unlimited</td> <td>Unlimited</td> <td>Unlimited</td> </tr><tr> <th>WHM</th> <td><img src="images/mark.png" alt="not included" /></td> <td><img src="images/mark.png" alt="not included" /></td> <td><img src="images/mark.png" alt="not included" /></td> <td><img src="images/mark.png" alt="not included" /></td> </tr><tr> <th>cPanel</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Fantastico</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>RVSkins Pro</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>RVSite Builder Pro</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>GD Library</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Image Magic</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>PHP 5 / MySQL</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>cURL / cURL SSL</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Back up / Restore</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Webmail Manager</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Auto-Responders</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>E-mail Forwarders</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>E-mail Address Trace</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>SpamAssassin</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>BoxTrapper Spam Trap</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Webalizer FTP</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Awstats</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Analog</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Error Log</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Phone Support</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>File Manager</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>FTP Accounts</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>5 Day Money Back Guarantee</th> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> <td><img src="images/check.png" alt="included" /></td> </tr><tr> <th>Setup Time</th> <td>Instant!</td> <td>Instant!</td> <td>Instant!</td> <td>Instant!</td> </tr><tr> <th>Setup Fee</th> <td>$2 One time Fee</td> <td>FREE</td> <td>FREE</td> <td>FREE</td> </tr><tr> <th>Overall Loading Speed</th> <td>Golden</td> <td>Golden</td> <td>Golden</td> <td>Golden</td> </tr><tr> <th>Monthly Price</strong></th> <td>FREE</td> <td>$3.95</td> <td>$9.95</td> <td>$23.95</td> </tr><tr> <th></th> <td> <a href="http://www.fleahost.com/order/cart.php?a=add&pid=1" class="button"> Order <span></span> </a> </td><td> <a href="http://www.fleahost.com/order/cart.php?a=add&pid=6" class="button"> Order <span></span> </a> </td><td> <a href="http://www.fleahost.com/order/cart.php?a=add&pid=7" class="button"> Order <span></span> </a> </td><td> <a href="http://www.fleahost.com/order/cart.php?a=add&pid=7" class="button"> Order <span></span> </a> </td> </tr> </tbody> </table> <div class="featuresBorderBottom"><div></div></div> <div id="controlPanel"> <h2> Control Panel<br /> <small>With Each webhosting package you get Cpanel 11</small> </h2> <p> Cpanel Is one of the most famous hosting control panels that exist in the world some other providers charge extra fee for it but we are giving it free to our customers. </p> <ul class="checkList"> <li>Better Management.</li> <li>Easy Access From Anywhere.</li> <li>Fast and Instant Website with Fantastico.</li> <li>Make Backups Instantly.</li> <li>Restore you website in seconds.</li> </ul> <!-- #controlPanel --> <div id="controlPanelFlashObject"> <object type="application/x-shockwave-flash" data="http://www.youtube.com/v/9oTWvACXHY8&hl=en&fs=1" width="560" height="340" > <param name="movie" value="http://www.youtube.com/v/9oTWvACXHY8&hl=en&fs=1" /> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <!-- alternative content should go here --> </object> <!-- #controlPanelFlashObject --></div> <div class="borderBottom"><div></div></div> <!-- #content --></div> <div id="footer"> <ul> <li>Hostorea © 2009</li> <li><a href="terms.html">Terms</a></li> <li><a href="contacts.html">Contact</a></li> <li><a href="http://www.templatemonster.com/website-templates/22985.html">Designed by TM</a></li> </ul> <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Pretty much everything else being done on that page should be handled in the CSS. I have time later I'll toss together an example of that too. Cuts it down from 30k of markup to just 13k. Might I ask just which wysiwyg you are using? I automatically assume you are using some trash WYSIWYG like Dreamweaver or the artist formerly known as Frontpage, because the oddball formatting, incorrect use of tags, and just little telltales SCREAM some sort of WYSIWYG dicking with you.