IE7 completely broken - OK everywhere else

**robcub** · Apr 6, 2011 11:21

I didn't create this website.

The problem is the navbar which is #main-menu and is float: right; - it seems to push everything out in IE7

Opera, Wedding singer for hire, function or corporate event - I would appreciate anyone's help.

**noonnope** · Apr 6, 2011 11:56

I see another problem there. And it's not OK in any browser. Try resize the browser window.

The way I see it, the page displays the most complicated way you can use for such a simple layout.

**deathshadow60** · Apr 6, 2011 12:34

It's not ok in ANY browser here, and one peek under the hood explains why -- top to bottom it is chock full of problems/bad coding techniques. MULTIPLE analytics embeds for NOTHING, endless IE conditionals for NOTHING, useless div's and classes round elements that don't need them (like that menu UL)...

Even simple things like "this is a new page, right? So why the Tranny doctype?"

Non-semantic markup with a failure to separate presentation from content -- and using classes like "left" and "right" instead of saying what things ARE and WHY they're being styled-- goes with the tranny doctype; It's basically HTML 3.2 with a XHTML tranny doctype on it to try and hide that... and poorly since it's not even CLOSE to being XHTML with all the unclosed standalone tags.

Even the keywords meta is a disaster -- space is NOT a delimiter for keywords.... or the use of the underline tag inside an anchor (what the?!?)

It REEKS of duct tape and chewing gum fixes...

For HTML there is probably little reason for the code to be a whole lot more than:

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="Hire opera singer, Saira, for your stylish wedding ceremony, corporate event or special occasion in London or UK. A professional female vocalist, Saira can sing soprano arias oh mio babbino caro or sacred church songs Ave Maria for weddings. Saira performs with string quartet, piano, backing tracks or unaccompanied"
/>

<meta 
	name="keywords"
	content="opera, wedding, singer, london, soprano, ceremony, corporate, entertainer, musician, soloist"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Opera, Wedding singer for hire, function or corporate event
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Arias
		<span><!-- image replacement --></span>
	</h1>

	<div class="homeContent">
		<p>
			From an elegant wedding ceremony to a large scale charity ball or corporate event, soprano Saira knows how to create a perfect performance. As an experienced and professional classical vocalist, Saira provides a seamless and comprehensive service, from selecting the perfect songs and accompaniment right through to the moment where her beautiful voice floats through the crowd and leaves her audiences spellbound. 
		</p>
		<ul class="menu">
			<li><a href="biography.html">Biography</a></li>
			<li><a href="weddings.html">Weddings</a></li>
			<li><a href="corporate-events-concerts.html">Corporate Events &amp; Concerts </a></li>
			<li><a href="song-samples.html">Song samples</a></li>
			<li><a href="gallery.html">Gallery</a></li>
			<li><a href="contact.html">Contact</a></li>
		</ul>
	<!-- .homeContent --></div>
	
	<div id="footer">
	  <span>Copyright Arias 2011</span>
	  Web design by <a href="http://leonh.net">Leonh</a>
	<!-- #footer --></div>
	
<!-- #pageWrapper --></div>	

</body></html>

Which throws more than 50% of the markup in the trash. If I have time later I could quickly belt out some CSS to go with that...

Though honestly the site is filled with what I like to call "non-viable design elements" -- like the fixed height containers around the content, fixed metric fonts being an accessibility /FAIL/, etc, etc...

As such my advice is throw that garbage away and have it redone by a professional -- there's NOTHING worth even TRYING to save there, and if they paid money for it, they should sue for that money back.

**Paul O'B** · Apr 6, 2011 12:38

I didn't see the problem you mentioned with the menu but I see the same problem as noonnope mentioned above

That old absolute centring technique is a bad method and should be converted to auto margins instead.

Code:

#inner {
 width: 876px;
 height: 650px;
 margin:auto;
 text-align:left;
}

If it must be a fixed height layout then it would also be better if you use ems instead of px for the height so that users could resize the text without it overflowing.

Edit:

Hang around and I'm sure Jason (deathshadow) will come up with something much better than the quick fix I offered above

**robcub** · Apr 6, 2011 15:50

You're right noonnope - something very easy made very complicated...

deathshadow60, I've added more duct tape and chewing gum fixes. I know I shouldn't have but I have, I'm sorry. Thank you for your re-do and confirming everything I thought about it.

Paul O'B - I tried your #inner fix but I couldn't get it to work - it put the whole site to the bottom right off the browser window.

Thank all of you so much. I think it's 99% OK now. Not perfect code (well, dreadful code) but I'm trying to persuade the client to go for a complete WordPress makeover next time so I'm leaving this one well alone now.