Member Avatar for adamsol

Hi everyone.

I am creating a web site and i'm nearly done but have serious problems with IE 7. For some reason its throwing the text by the title to the right. Its a photocopier company and i need it looking smart. www.e-sol.co.uk

At the top you will see the title Challenge under that a sub title then 2 lines of text. This text isnt inline with the subtitle in IE7 its fine in 9 and Chrome. Please could someone advise.

  • 2 Contributors
  • 9 Replies
  • 182 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by adamsol

Dani AI

Generated

Good troubleshooting from and nice follow-up from . For future readers: older IE releases (IE6/7) handle inline vs block layout, baselines and font metrics differently than modern browsers. That can make a multi-line subtitle appear to "jump" even when everything looks fine in Chrome or IE9+. The root causes are usually the browser’s layout rules (often called “hasLayout”), inline‑block baseline behavior, and subtle font/letter-spacing differences.

Practical, low-risk patterns that keep a heading and its adjacent text aligned across old and new browsers:

/* treat both items as inline boxes and align their tops */
.site-heading, .site-subtitle {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}

/* optional legacy helpers for very old IE (apply only if you must support IE6/7) */
.site-heading, .site-subtitle {
  zoom: 1;          /* triggers hasLayout in legacy IE */
  *display: inline; /* ancient-IE fallback if required */
}

If inline-block introduces unwanted whitespace, remove the gap in the HTML, or set font-size: 0 on the container and restore the children’s font-size. As an alternative, float the heading and let the subtitle fill the remaining space (use overflow: hidden or a clearfix on the container). Keep line-height, font-family, and letter-spacing consistent between the two elements so wrapping behaves predictably.

When debugging, temporarily add visible borders to each element to inspect box flow, and confirm the page is rendering in standards mode (correct DOCTYPE/document mode). For projects that still need IE7 support, isolate fixes in a tiny IE-only stylesheet so modern CSS stays clean; otherwise prefer graceful degradation.

Recommended Answers

All 9 Replies

Member Avatar for adamsol

just to note that you need to view in IE7 to see the issue

Member Avatar for teedoff

What happens if you remove that width from #index12top2 h2?

Member Avatar for adamsol

Not sure i will give it ago tomrw, and let you know

Member Avatar for teedoff

lol it should work. It will mess with that letter spacing you have a bit, but it seems to bring it back in line with your heading.

Member Avatar for adamsol

teedoff you genius. problem solved : )

check it out Canon copiers !!!!!

I'm going do a final sweep of the site and see if i can find any other issues.

thanks all

Member Avatar for teedoff

Glad you got it working. IE web developer tools is an awesome tool!

Now, I hate to be the bearer of slightly bad news..lol but you should run your site through the validator.

Well actually here is the link where I ran it through. You have a few code errors that should be fixed to ensure cross browser compliance. Most of them look easy enough to fix, but if you have trouble just post back here and myself or someone can help.

Member Avatar for adamsol

Great!!

Cheers for the heads up will crack on now with them.

Did a Xenu run on the site and cleared up bad links, so hopefully close to the end now.

If you don't mind me asking what do you think of the site? Canon Copiers

Member Avatar for teedoff

I think it looks pretty good. I didnt check the functionality of the whole site.

One think I might mention is the newsletter sign up form. If its an important feature to get ppl signed up, then I might make it more prominant on the page or even create a new page of its own.

Good job though!

Member Avatar for adamsol

Cheers mate, always nice to get a professionals opinion.

4 months 2 sign ups, you might be right!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.