*** WARNING *** - I’m not trying to be mean with this, I’m just going to tell you the truth without sugar coating it. I’m not going to slap the rose coloured glasses on your head and tell you everything is OK, then suggest throwing magic bullet fixes in the form of hacks at it. You discovered something is wrong, brace yourself, the problems run pretty deep.
-
Which IE on windows…
-
condense your CSS declarations… it’s a confusing mess to say all those border properties separately.
-
If the only place it works is webkit, you’re code is probably wrong. Does FF and Opera screw up on the Mac? I bet they do.
Ok, lets pull up that page and see what I can see wrong with the code.
This is a new page, right? Why tranny then? Transitional is for supporting old/outdated/half-assed coding methods, not for building new websites.
The validator is choking on it horribly - and I can’t quite see why. there is no prolog, but it’s barfing up “Line 1, Column 1: end of document in prolog” - Character encoding issue from whatever editor you are using maybe? That’s a “give up” error, so we can’t even trust the rest of the markup to be valid.
In that markup you have spans for nothing, img tags for images that belong in the CSS since they’re not content, no planning for images off graceful degradation, non-semantic markup, no lists around your list-type elements, outdated tags like CENTER which have ZERO place on a modern website, unclosed spans, improper nesting orders of block level and inline-level tags, double breaks doing paragraphs job, multi-breaks doing padding’s job, inlined presentation questioning why bother with an external stylesheet in the first place, div’s with spans nested in them for no good reason on obvious header elements - that’s called a train wreck.
That it renders properly in any browser is a miracle and nothing more than error correction and reliance on IMPROPER behaviors and not proper ones.
For example:
<div style="text-align:left;"><span class="newsdatetext">25 May 2010</span></div>
<div style="text-align:left;"><span class="newstitletext">Welcome to the new TLR Performance.com</span></div>
<div style="text-align:left; margin-top:3px; margin-bottom:5px; "><span class="newscontenttext">We are very happy to unveil this new online home for TLR Performance. Have a look around, you’ll find the new navigation is concise and aimed at making your visit and search for information as simple as possible.<br />Please don’t hesitate to contact us with any questions about our services. We look forward to workign with you and hope you enjoy our new cyber-digs!</span></div>
Spans for no good reason, first two div should probably be a h3 with a small tag or nested spans inside it, the final DIV MAYBE belonging, but in any case a paragraph tag would be more appropriate.
<h3>
<span>25 May 2010<span> - </span>
Welcome to the new TLR Performance.com
</h3>
<p>
We are very happy to unveil this new online home for TLR Performance. Have a look around, you’ll find the new navigation is concise and aimed at making your visit and search for information as simple as possible.<br />Please don’t hesitate to contact us with any questions about our services. We look forward to workign with you and hope you enjoy our new cyber-digs!
</p>
Given your appearance that’s ALL you should need for HTML on that, everything else going in the CSS. If your Markup is that bloated/wasteful/pointless the CSS is a dozen times worse.
Or your footer:
<div class="footer">
<img src="img/tlr_footer.png">
<div id="footertext">
<span class="copyrighttextwhite">All Content Contained Herein ®2010 TLR Performance</span>
</div>
</div>
The image doesn’t even BELONG in your markup (that should be a background in the CSS) and there is ZERO reason to be nesting that second div or wasting a span on it… much less the non-entity special character.
<div id="footer">
All Content Contained Herein ™2010 TLR Performance
<!-- #footer --></div>
Is probably all I would use to achieve that same appearance.
I would suggest a TOTAL rewrite since, as I often tell people, there is nothing here worth saving and that’s JUST talking markup… and bad markup means absolute rubbish CSS. I’d also look at what text editor you are using since it seems to be including some invalid characters at the top of the document…
If I were to write up a page like that, this is the HTML I’d probably be working from:
<!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="Specializing in two stroke and four stroke engines we carefully consider the type of riding and power delivery you are looking for. We then design an engine package for you."
/>
<meta
name="keywords"
content="Performance, Race Engines, Four Stroke, Two Stroke, Cams, Valve Springs, Motocross"
/>
<link
rel="shortcut icon"
href="favicon.ico"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<!--
Don't forget to implement these later!
<link
type="text/css"
rel="stylesheet"
href="print.css"
media="print"
/>
<link
type="text/css"
rel="stylesheet"
href="handheld.css"
media="print"
/>
-->
<title>
TLR Performance
</title>
</head><body>
<!--
empty tags like SPAN and B below are image sandbags for
sliding doors or glider-levin replacement - do not remove!!!
Horizontal rules and .jumpto menus should be removed by CSS
and are present for CSS off users only.
-->
<div id="pageWrapper">
<h1>
<span>TLR</span>
PERFORMANCE!<br />
<small>FOUR STROKE RACE ENGINES</small><br />
<a href="http://www.tlrperformance.com">
516 S.W.ARLINGTON BLVD. LAKE CITY,FLA. 32025
</a><br />
386-752-8262
<b></b>
</h1>
<ul id="mainMenu">
<li><a href="services.php" class="servicesbutton">Services<span></span></a></li>
<li><a href="products.php" class="productsbutton">Products<span></span></a></li>
<li><a href="photos.php" class="photosbutton">Photos<span></span></a></li>
<li><a href="contact.php" class="contactbutton">Contact<span></span></a></li>
<li><a href="about.php" class="aboutbutton">About<span></span></a></li>
</ul>
<div id="whatWeDo">
Engine Performance / Engine Rebuilds<br />
Suspension Revalve / Suspension Rebuild
<span></span>
</div><hr />
<div id="content">
<div class="randomImages">
<img src="rotate.php?i=0" alt="motorbike image" class="randomImage" />
<img src="rotate.php?i=1" alt="motorbike image" class="randomImage" />
</div>
<div id="news">
<h2>TLR News<span></span></h2>
<h3>
<span>25 May 2010<span> - </span></span>
Welcome to the new TLR Performance.com
</h3>
<p>
We are very happy to unveil this new online home for TLR Performance. Have a look around, you'll find the new navigation is concise and aimed at making your visit and search for information as simple as possible.
</p><p>
Please don't hesitate to contact us with any questions about our services. We look forward to workign with you and hope you enjoy our new cyber-digs!
</p>
<h3>
<span>25 May 2010<span> - </span></span>
TLR Welcomes Gannon Audette
</h3>
<p>
TLR is proud to announce a new rider to our team Gannon Audette. He will be competing in amateur 250 and 450 Pro and A classes. We look forward to bringing Gannon up through the amateurs and in AMA Pro racing.
</p>
<h3>
<span>25 May 2010<span> - </span></span>
Suzuki City running TLR Race Engines in AMA SX and MX
</h3>
<p>
Thats right Matt LeMoine and "Scuba" Steven Clarke will be running custom tailored TLR Performance Race Engines in their RMZ's for the 2010 Supercross and Motocross series'. Scuba will be riding the 450 outdoors while Lemoine will remain on the 250.
</p>
<!-- #news --></div>
<div class="CMS">
Content Management Powered by
<a href="http://cutephp.com/" title="CuteNews - PHP News Management System">CuteNews</a>
<!-- .CMS --></div>
<!-- #content --></div>
<hr />
<div id="sideBar">
<div id="welcomeText">
<p>
TLR Performance specializes in performance for four-stroke and two-stroke engines.
</p><p>
We carefully consider the type of riding and power delivery you are looking for. We then design an engine package for you.
</p><p>
Give us a call to take advantage of our experience and to allow you to win more races.
</p>
</div>
<h2>TLR PERFORMANCE</h2>
<p>
5 AX Titles in 3 Years
</p>
<img
src="images/tlr_numberplate.png"
alt="Number One"
class="plate"
/>
<h3>CONGRATULATIONS:</h3>
<ul>
<li>AJ Catanzaro</li>
<li>Shane Sewell</li>
<li>Dano Aulseybrook</li>
<li>Tyler Medaglia</li>
<li>Dave Ginolfi</li>
</ul>
<a href="ridersupport.html">
<img
src="images/riderSupport.png"
alt="Click for Rider Support"
class="plate"
/>
</a>
<!-- #sideBar --></div>
<!-- #pageWrapper --></div>
<!--
Footer is after #pageWrapper so that 100% min-height can be implemented.
-->
<hr />
<div id="footer">
All Content Contained Herein ®2010 TLR Performance
<!-- #footer--></div>
</body></html>
EVERYTHING else you were doing belongs in the stylesheet… Though since I’ve never heard of that CMS I have no clue if it will let you make such radical changes - but really that would be my first step before delving any deeper into things like layout issues.