To be honest I'm seeing a lot of issues with the code for this site -- on the CSS side you have no fallback font families declared (so linsux is getting a serif default font), you aren't explicity stating a line-height or size on body (probably meaning you're declaring it a bunch of times you don't have to later), though the real heart of the problem is the use of fixed height images behind dynamic fonts -- completely buggering your layout here. (As a large font/120dpi user, I expect things bigger by default which FF doesn't do automatically)
It's made worse by the use of images that aren't even designed for internet deployment... Much of the so-called "but I can do it in Photoshop" phenomenon.
http://www.*****lypearmedia.com/img/...ascot_hm_2.png
for example being the same size by itself I'd allow for HTML+CSS+IMAGES+SCRIPTS on a page. You could probably cut that to a quarter that size by a technique known as pre-compositing instead of the fat bloated wasteful alpha .png
This though:
http://www.*****lypearmedia.com/img/...x_complete.png
Being what I like to call a "non-viable design element" -- Fixed height background box that is part of why using dynamic fonts breaks -- since it will NEVER line up with the content right and be broken SOMEWHERE unless you make everything around it px based. You can see this on the broken menu on large font/120dpi systems -- if you are going to stick buttons inside a fixed width container and run them right to the edges, you're going to NEED to declare those in PX, or center them with the width fixed -- or it's going to break.
WORSE is the bloody typekit which is where your REAL layout problems stem. Here's a tip, if something wants you to include a single 768k stylesheet, tell them where to stick it!!! Not familiar with that one, but 99.999% certain "well there's your problem". Goofy old-fashioned chicanery font embedding is a waste of bandwidth and results in unreliable font sizing cross browser. Throw that away and use something a wee bit more reliable like say... font-squirrel.
The markup is no winner either suffering horribly from a case of "not every ejaculation deserves a name" -- which is to say endless pointless DIV and classes, who's placement doesn't even make sense. The HTML is still fairly lean, but I'd be pitching most of your markup in the trash -- especially with the use of cryptic ID's and classnames, quite often on elements that again, shouldn't even need classes or ID's.
take div#links-wrp -- UL is a perfectly good block level container, what does it need the div around it for? You've got a single fixed width layout, what gives with the four div before you even get to the first actual content element -- a presentational image that really doesn't even belong in the markup... are all those H2 really subsections of the H1, or did you just choose the tag based on it's default appearance or some black-hat SEO nonsense? That mascot image certainly isn't content, "what we do" and "who we are" aren't subsections of "Search Engine Optimization" so why are those h3?
Even your keywords meta doesn't make sense and you're missing media attributes on your sheet embeds...
If I was coding that same layout, the markup would probably look something like this:
Code:
<!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="A fun loving web design company that adds character and unique shape to web design, SEO, Social Media, Corporate Identity, and web education throughout Cyprus."
/>
<meta
name="Keywords"
content="web,design,content,coding,writing,user,experience,search,optimization"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
*****ly Pear Media: Shaping Appearances
</title>
</head><body>
<div id="pageWrapper">
<h1>
<a href="\">
*****lyPear<br />
<span>MEDIA</span>
<b><!-- image replacement --></b>
</a>
</h1>
<ul id="mainMenu">
<li class="active"><a href="index.htm">Homepage</a></li>
<li><a href="about_us.htm"><span>a</span>bout us</a></li>
<li><a href="web_design_brief_history.htm"><span>w</span>eb <span>d</span>esign</a></li>
<li><a href="marketing_seo.htm"><span>m</span>arketing</a></li>
<li><a href="corporate_identity.htm"><span>C</span>orporate <span>I</span>dentity</a></li>
<li><a href="school.htm"><span>s</span>chool</a></li>
<li><a href="contact.php"><span>c</span>ontact</a></li>
</ul>
<div id="content">
<hr />
<div class="pearDudeBox">
<h2><span>W</span>eb <span>D</span>esign with <span>C</span>haracter</h2>
<div class="pearDude"></div>
<p>
*****ly Pear Media is a fun-loving web design company with a character that aims to improve the world of web design in Cyprus. We cover aspects of SEO, SMO, and corporate identity/branding as well as web design and development. Our support and quality far exceeds anything found on the island.
</p><p>
We hope that you will choose *****ly Pear Media as your one-stop shop for Internet and graphic needs. <a href="about_us.htm">Read more about *****ly Pear Media...</a>
</p>
<!-- .pearDudeBox --></div>
<hr />
<div class="subSection odd">
<h2>User Experience (UX)</h2>
<p>
Our company takes the needs of your visitors into consideration, ensuring that your website will be easy to follow and navigate. We also look into HCI <em>(Human Computer Interaction)</em> elements of the site to fine tune our methods to suit your individual needs. Our primary research helps us find the most appropriate method of performing your tasks.
</p>
<!-- .subSection --></div>
<hr />
<div class="subSection">
<h2>Coding Standards</h2>
<p>
Our sites are coded with World Wide Web Consortium (W3C) standards and cross-browser checked with several browsers. This helps us be sure that every element of your web site will look the same on every web browser, whether it is being used on a Windows system or a Mac. Without this cross-checking there are likely to be changes between browser versions. Our methods eliminate much of these issues.
</p>
<!-- .subSection --></div>
<hr />
<div class="subSection odd">
<h2>Content Writing</h2>
<p>
Content is the substance of your website. It is essential that your content is web readable. Most of your visitors will spend a limited time on your website. It is important that they locate the information quickly so that they do not go elsewhere to find what they need.
</p>
<a href="web_design_bespoke_solutions.htm#copywriting" class="readMore">
Read more about our copy writing services...
</a>
<!-- .subSection --></div>
<hr />
<div class="subSection">
<h2>Search Engine Optimization</h2>
<p>
Here at *****ly Pear Media, we print exceptional products using cost effective solutions with no compromise on quality. Our complete customizable printing solutions attract businesses, like yours, who want their company to stand out from the crowd.
</p>
<a href="marketing_seo.htm" class="readMore">
Read more about our SEO services...
</a>
<!-- .subSection --></div>
<hr />
<!-- #content --></div>
<div id="footer">
<div id="whatWeDo">
<h2>What we do</h2>
<ul>
<li><a href="web_design_brief_history.htm">Web Design</a></li>
<li><a href="marketing_advertising.htm">Online Advertising</a></li>
<li><a href="corporate_identity.htm">Corporate Branding</a></li>
<li><a href="marketing_seo.htm">Marketing</a></li>
<li><a href="school.htm">Training</a></li>
</ul>
<!-- #whatWeDo --></div>
<div id="whoWeAre">
<h2>Who we are:</h2>
<ul>
<li><a href="about_us.htm">About us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<!-- #whoWeAre --></div>
<ul class="socialLinks">
<li class="blinkList">
<a href="http://blinklist.com/users/*****lypearmedia">
BlinkList <span><!-- image replacement --></span>
</a>
</li>
<li class="delicious">
<a href="http://www.delicious.com/*****lypearmedia">
Delicious <span><!-- image replacement --></span>
</a>
</li>
<li class="designFloat">
<a href="http://www.designfloat.com/user/profile/*****lypearmedia">
Design Float <span><!-- image replacement --></span>
</a>
</li>
<li class="digg">
<a href="http://digg.com/*****lypmedia">
Digg <span><!-- image replacement --></span>
</a>
</li>
<li class="dzone">
<a href="http://www.dzone.com/links/users/profile/859077.html">
DZone <span><!-- image replacement --></span>
</a>
</li>
<li class="flickr">
<a href="http://www.flickr.com/photos/55170420@N05/">
Flickr <span><!-- image replacement --></span>
</a>
</li>
<li class="mixx">
<a href="http://www.mixx.com/users/*****lypearmedia">
Mixx <span><!-- image replacement --></span>
</a>
</li>
<li class="reddit">
<a href="#">
Reddit <span><!-- image replacement --></span>
</a>
</li>
<li class="stumble">
<a href="http://www.stumbleupon.com/stumbler/*****lypearmedia/">
StumbleUpon <span><!-- image replacement --></span>
</a>
</li>
<li class="technorati">
<a href="http://technorati.com/people/*****lypearmedia">
Technorati <span><!-- image replacement --></span>
</a>
</li>
</ul>
<div class="subSection">
<div>*****lyPear Media ....... web design with character</div>
For more information call <span>77.78.79.80</span>
<!-- .subSection --></div>
<ul class="footerMenu">
<li><a href="faq.htm">FAQ</a></li>
<li><a href="careers.htm">CAREERS</a></li>
<li><a href="offers.htm">OFFERS</a></li>
</ul>
<p>
Copyright All Rights Reserved to <a href="#">*****yPear Media</a>, please refer to the <a href="#">Privacy Policy</a>
</p>
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
Which throws away about a quarter of your markup.
If I have time later I'll toss together the CSS I'd use with that and re-master the images so you can see that yes, that layout doesn't need
though MANY of it's layout concepts REQUIRE the use of PX fonts -- the trick is to limit their use as much as possible and to not make content areas that don't expand to fit.
Reply With Quote
Originally Posted by Crusty
Bookmarks