HTML 4.1 and IE9 1

OfficeAnimal · Mar 4, 2013

Does IE9 have some problems with HTML 4.1 and CSS?
My personal website (

http://www.rickduley.webs.com)

is handcoded in HTML verified 4.1 with CSS.
In IE9 it does not display the navigation tabs at the top of the page.
In Opera and Firefox it performs perfectly.
Is there a fix for this?

"Have you ever noticed that anyone driving slower than you is an idiot, and anyone driving faster is a maniac?."
George Carlin

ChrisHirst · Mar 5, 2013

Works okay for me, IE9 - Windows 7 Pro 64bit.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

ChrisHunt · Mar 5, 2013

I took a quick look, and didn't see anything obvous - but I don't have a copy of IE9 to hand at the moment to check things with.

One comment I would make is that your page is coded rather like an old-fashioned table-based layout, with all the <td>s changed to <div>s. It'll work (once you've got IE9 to behave), but it's rather missing the point.

What you should aim for, in my view, is a much cleaner HTML without all that <div class="image-left"> stuff. So your HTML body would be something like this:

Code:

<body>
<div id="header>
  <h1>Rick Duley's Home Page<h1>
  <ul id="menu">
    <li class="current">Home</li>
    <li><a href="wherever.htm">About Rick</a></li>
    <li><a href="wherever.htm">Family Ties</a></li>
    <li><a href="wherever.htm">Interests</a></li>
  </ul>
  <ul id="breadcrumbs">
    <li>Home</li>
  </ul>
</div>
<div id="main">
  <div id="left-sidebar">
    <h2>This is a<br><i>'No-Frills'</i><br>Zone</h1>
    <p>I don't know about you...</p>
  </div>
  <div id="right-sidebar">
     <h2><a href="currentSurvey.html">Current Survey</a></h1>
     <p>Considerable effort went into...</p>
  </div>
  <div id="content">
    <h2>While you are here ...</h2>
    <p>... come in and have a look around ...</p>
  </div>
  <div id="endbox">
    <h2>Ask Any Aussie ...</h2>
    <p>And I mean ANY Aussie!</p>
  </div>
</div>
<div id="footer">
  <img src="./img/valid-html401-blue.gif" width="71" height="25" alt="Valid HTML 4.01">
  <img src="./img/valid-css-blue.gif" width="71" height="25" alt="Valid CSS">
</div>
</body>

You might need the odd extra <div or <span> to hang a background image on, and you might need to juggle the order of the content and sidebar divs, but the principle is the same - structure your HTML solely according to what it is, and leave everything about what it looks like to sit in the CSS.

How do you convert a <ul> into a line of tabs? There's a technique for that called "sliding doors" that's been around for 10 years - Google for "CSS sliding doors" and you'll find plenty of advice.

How do you get rounded corners on your divs? Plenty of ways to do that using background images - especially easy when the boxes are of fixed width. Take a look at how I do the borders on the sidebar boxes at

http://www.mcgonagall-online.org.uk

for example.

But actually, I'd recommend not going with any image-based rounded corner solution and just use CSS3's [tt]border-radius[/tt]. It'll be ignored by IE versions earlier than 9 - meaning they get square borders instead - but all other modern browsers will understand it, making it very simple to implement. It depends how important rounded corners are to you. Anyhow - Google for "CSS rounded corners" and you'll find plenty of advice.

Hope you find this advice useful, even if it isn't what you asked for!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

spamjim · Mar 5, 2013

I'm actually observing only good display in Opera and IE8/9. Chrome and Firefox are offsetting the breadcrumbs so that they are not contained in the horizontal blue bar.

When I first loaded the site in IE, my IE developer tools (F12) reported a document mode of IE7. Upon changing it to IE8 or IE9, the page displayed correctly. A quick glance at the headers (

http://www.blunck.info/iehttpheaders.html

) did not seem to indicate why it first loaded as IE7 standards. Perhaps forcing the use of the most recent mode in the headers will help (

http://stackoverflow.com/questions/...internet-explorer-ie9-standards-document-mode

).

###

Also...

A minimum width may be useful in your CSS. When the page is compressed to the width of a mobile device, the content is squished to an unusable level.

Chris' suggestion about a cleaner UL menu could likely help with both the offset of breadcrumbs and the compressed page width problem.

OfficeAnimal · Mar 5, 2013

Thanks folks. Special thanks to Chris. When I do some more HTML I'll get back to this.
I guess Mr Microsoft will solve the problem sometime.

"Have you ever noticed that anyone driving slower than you is an idiot, and anyone driving faster is a maniac?."
George Carlin

darryncooke · Mar 5, 2013

It's not a problem for MS to solve. If they would just stop doing what they want to do and develop their browsers to support web standards then all is fine.

Darryn Cooke

http://www.darryncooke.com

| Marketing and Creative Services

datamasher · Mar 6, 2013

Hi,
the css validator says there is an error in your .clearLeft class in your standard.css file.
There is a [red];[/red] missing.

Code:

.clearLeft { clear: left [red];[/red] background-color : #FFFFCC; }

Just to keep everything tidy

regards

Steve

datamasher · Mar 6, 2013

Hi again,
just for info, site displays absolutely fine on a widescreen monitor in IE 10 on a Windows 8 PC .

Firefox 19.01 on the same pc pushes the breadcrumb menu down below the blue bar.

Google Chrome 25.01 also fouls up the breadcrumb menu on the same pc.

regards

Steve

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

HTML 4.1 and IE9 1

OfficeAnimal

Technical User

ChrisHirst

IS-IT--Management

ChrisHunt

Programmer

spamjim

Instructor

OfficeAnimal

Technical User

darryncooke

Technical User

datamasher

Technical User

datamasher

Technical User

Similar threads

Part and Inventory Search

Sponsor