I have a friend who has
Trend 2011
problem is the sit looks fine in anything other than IE, so I gather I have to use this
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->
to use a separate CSS file for versions of /IE less than 8, but what do I place in that style?
</span>
good, thanks
Yes I agree. If you put an example for others to follow then give it away for free without restriction.
That is a CSS3 (and legacy IE, which is where @font-face originated over a DECADE ago) font embed. It relies on the files located here:
Index of /for_others/lukeurtnowski/site4/fonts
To load the alternative font I choose to try and mimic the original. The four different formats covers that not all browsers accept the same font file formats (Boo, hiss) – annoying, but at least we can now do it. Makes it easier to make major changes when you don’t have to go in to make new images just to change things like menu items or the wording of footer.
I built said files using font-squirrel’s generator
Font Squirrel | Create Your Own @font-face Kits
Using the only small-caps font file I had in my collection that had the caps vertically centered to the small-caps… which was optimusObliqueSemiBold. (I also have the non-semi bold, but it’s glyphs are too thin for screen use)
Basically it lets you take any TTF you want to use, and load it into people’s browsers as appropriate. Means we can build websites using a lot less images.
the “font formats” subsection of that font generator page I linked to above explains the different formats – the four default ones they give you cover almost all browsers in circulation – and if it doesn’t work, oh noes they just get your fallback family anyways.
… and feel free to run with any examples I give you – I’d not put them up online if I was worried about that. 
(I’m often shocked when people DO implement these sorts of examples then get their panties in a wad when the person being helped uses it … serious whiskey tango foxtrot territory)
thanks, I like your version better (mind if I tryu to use it?)
what does this mean?
\
@font-face { font-family:‘optimus’; src: url(‘fonts/optimus.eot’); src: url(‘fonts/optimus.eot?#iefix’) format(‘embedded-opentype’), url(‘fonts/optimus.woff’) format(‘woff’), url(‘fonts/optimus.ttf’) format(‘truetype’), url(‘fonts/optimus.svg#OptimusRg’) format(‘svg’); font-weight:normal; font-style:normal; }
Threads merged to keep things together 
Good work Jason.
As it looks like you were doing a rewrite in the other thread, thought I’d show you how I’d go about the CSS for that – and some minor layout changes that go with an ‘update’.
Here’s what I came up with:
Trend 2011
As with all my examples the directory:
Index of /for_others/lukeurtnowski/site4
Is wide open for easy access.
IE9 loses a few minor visual effects, IE8 and lower lose a lot of visual effects, but the layout remains functional and usable all the way back to IE 5.5 – It’s no longer practical to bend over backwards to support legacy IE users in terms of perfect appearance, but we SHOULD put the effort into the page still being USABLE for them. CSS3 is great for this. No more silly little corner images – more attractive
Does away with a LOT of the images, and instead of a 2.7 megabyte page, this is under 140k… which is still too big IMHO and most of the blame for that can be laid square on the shoulders of that ridiculously large tiled background… I’d be looking for some other image for that, preferably something less than 10k in size. I went overboard with the jpeg compression (to the point the artifacts are really starting to show) and it’s still too big a file. “Non-viable for web deployment” is how I’d describe that image.
Still, 140k in 8 files is the maximum allowable size for a page… You’ll notice I also swung an axe at trying to let the browser resize those MASSIVE image files – that’s what thumbnail versions are for.
I also didn’t have the same font as your images, so I grabbed the closest thing I had handy.
Hope this helps, if I have time later I’ll belt out a line-by-line breakdown of my rewrite.
NOT that there is ANY reason for div#header, div#menu, or the ID on BODY to even be in there given the appearance… Since the H1 and UL are perfectly good block level containers all on their own!
Hang on, I was gonna take a stab at a rewrite of your page anywho in the other thread.
Coz you forgot to apply overflow: hidden to the Content div. (That’s the easiest way to get a container to enclose floats, which hang out of the container by default unless you force the container to wrap around them.)
You also forgot that you can’t have a <p> (or any block element) inside a <span> (or any inline element), but that’s another issue, not related to the question.
why does the content div (white background) seem to be cut off before the spans,
Go Trend: Home
arent the spans supposed to be enclosed by the div?
Thanks…
thanks…
The problems with said page run far deeper – I’m seeing broken layout in Opera as well (being I’m a large font/120dpi user that’s likely the cause here)… really the problems run right to the bone with the endless div for nothing, div doing numbered heading tag’s job, presentational images in the markup, spacer.gif’s like it’s still 1997, images for text with zero graceful degredation. It’s a laundry list of how NOT to build a website… and that’s before we talk the jquery for christmas only knows what, lack of complete media targets, inlined scripting and image switching doing CSS’ job, and being written in a document style that pretty much says the developer is in transition from 1997 to 1998.
Which is how it ends up with 6.9k of HTML doing about half that’s job.
There’s really very little legitimate reason for the HTML on that page to be much more than:
<!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"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Trend 2011
</title>
</head><body>
<div id="pageWrapper">
<h1>
Trend
<span><!-- image replacement --></span>
</h1>
<ul id="mainMenu">
<li><a href="catalog.html">Catalog</a></li>
<li><a href="online_exclusives.html">Online Exclusives</a></li>
<li><a href="fabric_swatches.html">Fabric Swatches</a></li>
<li><a href="designers.html">Designers</a></li>
<li><a href="price_list_order_form.html">Price List / Order Form</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
<div id="content">
<h2>Welcome to the fashion world of TREND!</h2>
<p>
For the past 30 years, we have added flair to the Gift and Home Accessory industries with fabric covered products, featuring eye-catching colors and design.
</p><p>
We are proud to do our own manufacturing, making it possible to react to the latest trends and to create custom products for you, our customers.
</p><p>
We do NOT require large minimums or long lead times, so you can compete and succeed in todays challenging retail environment.
</p><p>
<em>Remember, we make ALL of our items in ALL of our fabrics, or in your fabrics!</em>
</p>
<ul class="flyers">
<li>
<a href="fab.html">
<img
src="images/Flyer_2_side_1_final1.png"
height="257" width="200"
alt="Our F.A.B. Collection"
/>
View Our New F.A.B. Collection
</a>
</li><li>
<a href="images/FallTrend.png">
<img
src="images/FallTrend.png"
height="257" width="200"
alt="Fall Flyer"
/>
Trend Fall Flyer
</a>
</li><li>
<a href="images/holiday.png">
<img
src="images/holiday.png"
height="257" width="200"
alt="Holiday Flyer"
>
Trend Holiday Flyer
</a>
</li>
</ul>
<!-- #content --></div>
<div class="calltoAction">
<a href="contact_us.html" class="callToAction">
<b>Click Here</b> to Sign Up For Our Newsletter to Recieve New Product introductions, Seasonal Collections, & Specials!
</a>
<!-- .callToAction --></div>
<div id="footer">
Copyright 2011 Trend Marketing Inc.
<!-- #footer --></div>
<!-- #pageWrapper --></div>
</body></html>
… unless you REALLY want to waste bandwidth on all the inaccessible images as text – at which point I’d be giving webfonts a good hard look instead.
Basically, it’s one of those “The symptom is just an indication of deeper rooted problems” – which is when it’s usually time to pitch it and start over, rather than going for the duct tape, chewing gum and bailing wire.
absolute positioning of elements and CSS hacks for some IE versions. polyfill, …