here is a twist… I have this menu on the left hand side at http://www.wheels-of-chance.com that seems to fit my 250px table perfect in IE 8 but in FF and Safari, It seems to be too big or breaking out.
Is there something I am missing here on this one?
Thanks for any help or advice on this,
Paul
NOT that fixing the doctype is going to address that your math is completely wrong – tested here with that fix and it’s still buggered in Opera.
Though MOST of that can be blamed on the use of tables for NOTHING. There isn’t anything that warrants the use of tables in that layout, and even if one were to use tables for layout there’s no excuse to have more than ONE of them.
You are knee deep in presenational outdated markup with worse, outdated/poor coding techniques that is what’s resulting in you having 19k of markup for barely 3k of content. MORE than HALF of your HTML needs to be gotten rid of for either doing nothing, or implying the wrong meanings on the content. (the exact opposite of semantic markup). Presentational images in the markup, outdated attributes – it all needs to go.
Of course the description meta that isn’t filled with an actual DESCRIPTION and is little more than copypasta of the keywords is likely gonna bork your SERP listing, and the redundant/excessively large keywords list is likely to get BOTH ignored! Compounding it further is the use of javascript to do CSS’ job with that mm_swap nonsense, and a bunch of custom libraries that don’t even appear to be doing anything for your layout.
My advice? throw it out and start over. It’s likely costing more in maintenance headaches and compatibility much less hosting than it’s worth in it’s current form.
If I was writing that same basic page layout (I’d REALLY suggest a rewrite of the copy) my markup would probably be 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
http-equiv="Content-Language"
content="en"
/>
<meta
name="description"
content="Custom Wheels of Chance with your Design and Copy. Free 96 Page Catalog: 800-233-0828."
/>
<meta
name="keywords"
content="wheel, chance, custom, fortune, carnival, promotional, money, laydown, vinyl, indicators, clappers, paddle, tickets, kardwell"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Wheels of Chance, Wheels of Fortune, Custom Wheels, Promotional Wheels
</title>
</head><body>
<div id="pageWrapper">
<h1>
Wheels-of-Chance.com
<small>part of <span>Kardwell</span> International, Inc.</small>
<b></b>
</h1>
<ul id="mainMenu">
<li><a href="index.htm">home</a></li>
<li><<a href="products.htm">products</a></li>
<li><a href="order.htm">ordering</a></li>
<li><a href="catalog.htm">catalog</a></li>
<li><a href="about.htm">about</a></li>
<li><a href="contact.htm">contact us</a></li>
<li><a href="http://www.kardwell.com">kardwell.com</a></li>
</ul>
<form
action="http://www.wheels-of-chance.com/cgi-bin/perlfect/search/search.pl"
method="get"
id="headerSearch"
>
<fieldset>
<label>Search</label>
<input type="text" name="q" size="15" />
<input type="submit" value="GO" />
<input type="hidden" name="p" value="1" />
<input type="hidden" name="lang" value="en" />
<input type="hidden" name="include" value="" />
<input type="hidden" name="exclude" value="" />
<input type="hidden" name="penalty" value="0" />
<input type="hidden" name="mode" value="all" />
</fieldset>
</form>
<div id="fauxColumns">
<div id="content">
<div class="bannerSection">
<img
src="images/index-350x250.jpg"
alt="Wheels of Chance"
class="bannerPlate"
/>
<div class="bannerSubsection">
<img
src="images/kardwellCatalog.png"
alt="Kardwell Catalog"
class="leadingPlate"
/>
<h2><a href="catalog.html">Get A Catalog</a></h2>
<p>
For a <a href="catalog.htm">FREE 104 page catalog</a>, please contact us at <b>1-800-233-0828</b>
</p>
<!-- .bannerSubSection --></div>
<div class="bannerSubSection last">
<img
src="images/speedStickIndex.png"
alt="Speed Stick"
class="leadingPlate"
/>
<h2><a href="customWheels.html">Custom Wheels</a></h2>
<p>
Custom Wheels of Chance are available with any design you choose!
</p>
<!-- .bannerSubSection --></div>
<!-- .bannerSection --></div>
<h2>Our Products</h2>
<h3>
Custom Made Wheels of Chance with Your Design, Insert Wheels for Your Graphics, Money Wheels, Dice Wheels, Number Wheels, and More!
</h3>
<p>
Choose from the following types of Wheels of Chance in 18", 24", 30", 36", 42", 48", and 60" diameter sizes:
</p>
<h3>
Casino-Quality Custom Wheels of Chance with Your Design
</h3>
<p>
We can produce precision, <a href="custom-wheels.htm">Casino-Quality Custom Wheels of Chance</a> with any graphics you want. The face of each Deluxe Promotional Wheel is made through our lithographic printing process. This process produces the highest quality colors and images for the front of the wheel.
</p><p>
All our <a href="deluxe-wheels.htm">Casino-Quality Wheels of Chance</a> are made of genuine American and Canadian birch plywood These Wheels of Chance are made of the same plywood used for premium kitchen cabinetry. This lightweight, durable wood ensures that your Wheel of Chance will remain stable and maintain its bright colors for years to come.
</p>
<h3>
Casino-Quality Carnival Wheels: Number Wheels, Money Wheels, Horse Race Wheels , Big Six Wheels & More
</h3>
<p>
Choose from <a href="custom-prize-wheels.htm">Big Six Dice Wheels, Color Wheels, Number Wheels, Horse Race Wheels, and Money Wheels</a>. Made of genuine American and Canadian birch plywood, these Prize Wheels are made of the same plywood used for premium kitchen cabinetry. This lightweight, durable wood ensures that your <a href="deluxe-wheels.htm">Carnival Wheel of Chance</a> will remain stable and maintain its bright colors for years to come.
</p>
<h3>
Custom Prize Wheels with Do-It-Yourself Inserts/Pie Slices for Your Custom Graphics
</h3>
<p>
These High-Quality <a href="custom-prize-wheels.htm">"Do-it-Yourself" Prize Wheels</a> allow you to create an economical Prize Wheel with any graphics you choose! Because you produce your own custom graphics on your PC, print the graphics yourself, and insert them in the Promotional Wheel's Pie Slices, you can change the graphics easily from event to event. That's why this Wheel of Chance is the best choice for those seeking a Custom Prize Wheel for which the pie slices/prizes can be easily modified.
</p><p>
Our <a href="custom-prize-wheels.htm">Insert Prize Wheels</a> are made from the finest quality cabinet-grade MDF wood. All Wheels feature a standard oversized 18 inch ABS black plastic base and steel pole with a durable black powder coat finish. Every Promotional Wheel is hand-balanced to ensure random spins.
</p>
<h3>
Many Wheel Accessories Available - Clappers, Table Mirrors, Tickets, & More
</h3>
<p>
We also carry a range of <a href="wheel-accessories.htm">Supplies for our Wheels of Chance</a>. Wheel indicators (clappers), replacement pins, table mirrors, paddle wheel tickets, vinyl lay-downs, and many other products are available. For our FREE 96 Page Catalog, please <a href="contact.htm">contact</a> us at 1-800-233-0828.
</p>
<!-- #content --></div>
<div id="sideBar">
<a href="catalog.html" id="toOrder">
Click here a <strong>FREE</strong> copy of our 104 page gaming catalog!
</a>
<h2>Wheels of Chance</h2>
<ul>
<li><a href="custom-wheels.htm">Casino-Quality Custom Wheels of Chance with Your Design</a></li>
<li><a href="deluxe-wheels.htm">Casino-Quality Carnival Wheels: Number, Money, Horse, More</a></li>
<li><a href="custom-prize-wheels.htm">Custom Prize Wheels with Inserts for Your Graphics</a></li>
<li><a href="wheel-accessories.htm">Wheel of Chance Accessories</a></li>
</ul>
<!-- #sideBar --></div>
<!-- #fauxColumns --></div>
<div id="footer">
<ul>
<li>Wheels-of-Chance.com:</li>
<li class="first"><a href="index.htm">Home</a></li>
<li><a href="products.htm">Products</a></li>
<li><a href="order.htm">Ordering</a></li>
<li><a href="catalog.htm">Catalog</a></li>
<li><a href="about.htm">About Us</a></li>
<li><a href="contact.htm">Contact Us</a></li>
<li><a href="copyright.htm">Copyright</a></li>
</ul>
<p>
© 2010 Kardwell International, Inc. The contents of this web site are the sole property of Kardwell International. <br>No part of this web site may be copied or used for any commercial purpose without the written permission of Kardwell International.
</p>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
+/- 5% or so. Comes in at 7.5k, which is almost a THIRD what you were using. EVERYTHING else you were doing there belongs in the CSS.
uhg… thanks Noonnope,
I must have looked at that like 200 times in re-reading the code.
Thanks again for the help,
Paul
change the DTD. the one you’re using now throws browsers in quirks mode.
from
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Thanks Deathshadow for your complete eval of the site. I know this site is a mess, it was inherited a while back along with 18 other websites of the same markup about 4yrs ago.
I have just not gotten the time to work on it the way I wanted too. I may just do that and start over like you suggested…
Thanks again for your help.
Paul
you’re welcome 