Hello
was wondering if anyone could help me out with a site I’m working on where one of the page layouts isn’t quite right in ie.
The page is here
ideally I’d like the text to be higher so the h2 heading is inline with the top of the image like in chrome and ff browsers…
any ideas on how I can manage this?
thanks in advance for any ideas:)
Hi,
Looks like you need haslayout on one element and not on the other.
* html #portfolio li{zoom:1.0}
* html div#portfolio ul li p{width:auto}
*+html #portfolio li{zoom:1.0}
*+html div#portfolio ul li p{width:auto}
nice one - thanks
Oh that’s great thanks so much, hadn’t heard of haslayout before…something new to look into 
While Pauls’ silver bullet fix is “cute” – your real problems run deeper than that. You’ve got endless DIV for nothing, spans for nothing, IE conditionals for nothing, and a layout that’s broken here in every browser I look at it in. I’ve got a saying, “CSS is only as good as the HTML it’s applied to” – and your HTML, well…
Everything I’ve come to expect from the people slapping the HTML 5 lip service doctype and the rest of it’s nonsense into a layout.
You have here a VERY simple layout, but at 7.8k of markup for 1.8k of plaintext it could use a bit of a trim.
To show you what I mean, here’s how I’d approach writing that same markup:
<!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
rel="shortcut icon"
href="/wp-content/themes/child/favicon.ico"
/>
<title>
Fourteen Design - Creative Web Design Guildford
</title>
<link
rel="alternate"
type="application/rss+xml"
title="Fourteen Design - Creative Web Design Guildford » Feed"
href="/feed"
/>
<link
rel="alternate"
type="application/rss+xml"
title="Fourteen Design - Creative Web Design Guildford » Comments Feed"
href="/comments/feed"
/>
<link
rel="wlwmanifest"
type="application/wlwmanifest+xml"
href="/wp-includes/wlwmanifest.xml"
/>
</head><body>
<div id="pageWrapper">
<h1>
<a href="index.html">
Fourteen Design
<span><!-- image replacement --></span>
</a>
<small>
Creative - Web Design - Guildford
</small>
</h1>
<ul id="mainMenu">
<li><a href="/">Home</a></li>
<li><a href="/portfolio" >Portfolio</a></li>
<li><a href="/about">About</a></li>
<li><a href="/pricing" class="current">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
<hr />
<div id="content">
<div class="services">
<h2>Services & Pricing</h2>
<p>
As every website is bespoke I offer you a detailed quote after discussing your web design needs.
However, below are some services I offer and approximate costings.
</p>
<hr />
<!-- .services -->
<div class="features">
<div class="design">
<h2>Website Design</h2>
<p>
A bespoke website site of 5-10 pages with integrated CMS would cost between £550 and £750 depending on individual needs.
</p>
<hr />
<!-- .design --></div>
<div class="hosting">
<h2>Hosting</h2>
<p>
Uploading and hosting a site to make it live, costs £40 per year
</p>
<hr />
<!-- .hosting --></div>
<div class="maintennance">
<h2>Maintenance</h2>
<p>
I offer a yearly contract of £150 which includes website maintenance of an hour a month (on average over the year) or you can pay on an hourly basis at a rate of £15 per hour.
</p>
<hr />
<!-- .maintennance --></div>
<div class="wordpress">
<h2>Wordpress</h2>
<p>
Wordpress is the Content Management system I use in sites which enable you to control your content by adding news posts. Integrated CMS into a bespoke site costs around £200 and is included in the Website Design cost.
</p><p>
I can also set up a website using an existing Wordpress Theme (either a free one or one that you purchase) for £150 (this includes hosting for the first year).
</p><p>
Any Wordpress prices quote include a free half hour lesson in using Wordpress (it's very easy).
</p>
<hr />
<!-- .wordpress --></div>
<div class="report">
<h2>SEO (Search Engine Optimisation) Reports</h2>
<p>
After a period of time (or if you have an existing site) you may wish to have a report detailing the effectiveness of your website. For £150 I can provide a detailed Search Engine Optimisation report analyzing whether your website is fullfilling it's potential. For example is your site ranking highly in Google searches? Where abouts are users visiting and leaving the site?
</p>
<hr />
<!-- .report --></div>
<!-- .features --></div>
<!-- #content --></div>
<!-- #pageWrapper --></div>
<div id="footer"><div>
<ul class="social">
<li>
<a href="#" title="Follow us on FriendFeed">
<img src="images/friendfeedIcon.png" alt="Friendfeed" />
</a>
</li><li>
<a href="http://www.twitter.com/FourteenDesign" title="Follow us on Twitter">
<img src="images/titterIcon.png" alt="Twitter" />
</a>
</li><li>
<a href="#" title="Follow Fourteen Design">
<img src="images/rssIcon.png" alt="RSS Feed" />
</a>
</li><li>
<a href="#" title="Follow us on Facebook">
<img src="images/facebookIcon.png" alt="Facebook" />
</a>
</li>
</ul>
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/portfolio">Portfolio</a></li>
<li><a href="/about">About</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/blog" class="last">Blog</a></li>
</ul>
Copyright 2011 Fourteen Design, All Rights Reserved
</div><!-- #footer --></div>
</body> </html>
I realize bending wordpress over the table to try and convince it to output GOOD HTML is a bit like trying to bench-press an aircraft carrier, but you seem to already have a decent handle on that given the amount of turdpress idiocy you already seem to have gutted out of there. (like how it vomits up endless pointless classes on menu code).
your layout is very simple – the HTML should reflect that. Oh, and if you’re wondering why I pulled the list, it’s because once you have major block level pairings (like h2 and P) to me there ceases to be a reason to stack extra meaning upon it.
Though I have to ask, are all the h2 that are tabbed in SUBSECTIONS of that H2 which is not? They appear to be so, in which case those should be H3, not H2.
When I’m back at my workstation (on the laptop right now) I’ll toss together the CSS to show you what I mean on how with so simple a layout 99.9% of the extra nonsense like the IE conditionals and endless wrapping DIV you have in there is, well… to be brutally frank pointless bloat.
Here’s what I came up with:
Fourteen Design - Creative Web Design Guildford
as with all my examples the directory:
http://www.cutcodedown.com/for_others/vicky985
is open for easy access to it’s gooey drippy bits and pieces.
Opened it up semi-fluid from 740px to 60em (that way large font users get even more screen used), changed the fonts to 100% since you’re using serifs (which make things harder to read on screen), and in general redid how the entire layout works. Combined a lot of the similar images “down” to take advantage of png’s generous encoding which while it didn’t make a massive impact on file sizes (like maybe 5k saved?) it did reduce the number of handshakes for images from 16 to 8, which could shave anywhere from a second to a whole 24 seconds off the page load time depending on the user’s connection, latency and server load.
I also moved the images I didn’t consider to be part of the content out of the HTML.
Tested working just fine all the way back to IE 5.5, so IE is set… works fine in the latest incarnations of every other browser. It even works after a fashion in IE 5.01, the only issue there being IE 5.01 cannot handle font-family names with spaces in them…
Some suggestions: Lose the serif fonts as they’re difficult to read, ease up on the use of italic as if EVERYTHING is italic, nothing is… Darken up the menu text color a wee bit it’s blurry and on the edge of usability, and ease up on the scripting…
Though I realize that last one is basically Wordpress having it’s way with you. I’m kind of surprised you were able to neuter it down as far as you did – given the rubbish code it REALLY wants to force you into using for no good reason.
Really though, you were overthinking things on the DIV and putting semantics around the wrong elements. I’d still give a hard look at whether the “big icon” h2’s should be h3’s (are those subsections of the not indented one or not?) and remember, if you choose a HTML element because of what it looks like, you’re probably choosing the wrong element.
Good work Jason - as usual
I notice one little bug in IE7 and you’ll need to lose the zoom from here or IE7 packs all the menu items tightly together.
#mainMenu li {
display:inline; /* don't even TRY to do more with these */
[B]/* zoom:1;*/
[/B]}
The zoom makes it inline-block in IE7 and under and I guess that kills the percentage width on the anchor because the parent shrinkwraps. Strange that IE6 doesn’t exhibit the same behaviour though.
Odd, I’m not seeing that bug in IE7 – either using 9’s emu mode or real 7 under XP (in virtualBox) – what 7 is doing that for you? Pulling that zoom completely shtups the menu here in 8, 7, 6 and 5.x here.
Is the <div id=“pageWrapper”> closed somewhere?
Loving that Cut Down Code idea. Are you going to have tutorials when it’s ready? Hopefully this century? 
I’ll keep my eye out.
Before the footer. I did that to apply a 100% min-height layout. #pagewrapper gets 100% min-height, so if the page content is shorter than the display it still stretches to the height of the display. I then pad the bottom of the content area equal to the footer height to ‘make room for it’, then ride the footer up over #pagewrapper with a negative margin. This way if the content is too short, the footer stays at the bottom of the display, but if the content is taller the footer gets pushed down off screen.
It’s a very nice layout technique, even if it is a bit complex.
Here’s a browsercam screenshot in XP and vista to show its not just my version.
I also get the same results on my XP running IEtester and IE8 in ie7 mode.
Ok, originally I was margining them instead of declaring widths - fixed that and while at it I centered the text in each of them. Just looks better than the flush left.
Odd bug since I was unable to recreate it here… but ditching that zoom and changing things up a tiny bit did the job… Though since I was unable to recreate that problem here… Can you give that another check?
P.S. Browsercam is meaningless to me, since their entire site is broken useless crap here.
Yes looking great in IE7 now Jason.
It’s a very odd bug and not one I would have expected. On testing it seems to be the percentage width is ignored in IE7 but works fine in IE6. A pixel width also works fine in IE7 so probably related to the old IE margin percentage bug where it doesn’t know the width until the page is laid out but then it’s too late to apply it.
Thanks everso much for doing all that Jason, very impressive!
Going to go through it all and learn from it all when I get some more time…very interesting stuff!
Thanks!