Bug Fixing for IE7

Okay, I reside on a Mac and don't have access to a windows PC or IE.. There's a "few" bugs present within IE7 that I'm not able to fix and bug test properly for lack of having it. It displays fine on mac Firefox if you need reference.

Can I get some help?

yournfc.com

User: nfc
Pass: 777

Regards,
Chris

 

1) pick up sun virtualbox (it's free) and see if you can find a copy of XP. Then you can test 5.5, 6, 7, and 8.

2) Oh lord, that's painful to watch load... the background ALONE is 50% larger than my comfort zone for an entire SITE... the resizing of it looking like total ass on large displays - confusing you'd bother since you've got fixed metric fonts. Oh wait, macintosh, you don't know what accessibility IS.

Lots of redundant/unneccessary markup in there, and it's broken in 6,7 & 8 for a whole host of obvious reasons. Lemme just go down the list of what I see wrong in the code.

This is a new site, right? Why's it tranny? Transitional is for supporting old outdated half-assed coding techniques and tags you aren't even supposed to be using anymore, not coding new sites.

Profile attribute is invalid in a 1.0 doctype. Not sure why the validator isn't bitching about that... or the lack of language encodings; must be a tranny thing.

classes on the body for no good reason.

Tables with single TD per TR? that's not just tables for layout, that's tables for no good reason. That alone could be throwing things off.

That looks like a list of things to do, not a heading... Actually looks like it should be a menu as my instinct is to try and click on it, so that's just bad design.

DIV around the menu for no good reason. Nothing there you couldn't apply to the top UL directly.

Excess div around entire page.

Paragraph and span used instead of a heading tag...

background image sizing method of putting it last means dicking with z-index for no good reason.

Fixed height and width elements make the page a miserable /FAIL/ at anything less than 1280x960 regardless of browser or platform... and have you seen it scroll? (or not offer to scroll for that matter?)

fixed metric fonts are an accessibility /FAIL/

Use of alpha transparent .png for no good reason means needing to throw javascript at making IE6/earlier work.

... and that's without my even looking at the CSS.

To make that cross browser and accessible my advice is throw it all away and start over using semantic markup... I don't see a whole lot there worth even trying to save... but then I say that about 90%+ of the turdpress templates I see.

 

I was passed this on and told to fix it deathshadow, I'm not paid enough to re-write it all. I just need some quick IE fixes and get this to work, the code is ugly and shoddy, I'm sorry I agreed to work on it.

 

I feel your pain then, I bit off a few of those several years ago before I realized sometimes it's better to turn away jobs like that.

The biggest bugs in IE7 is a monstrous gap above and below your rounded corner images... div.top and div.bottom - and that the 'photo' is nowhere to be found.

Hmm... Without digging too deep, we can be 99% certain the 'problems' stem from this section:

#main {
	background: transparent;
	clear: both;
	padding-top: 20px;
}

#main img {
	float: left;
	margin-top: 30px; 
	margin-left: -300px;
	margin-right: 10px;
}

#main .top {
	background: url(images/top.gif) top left;
	float: right;
	margin-left: -50px;
	height: 29px;
	width: 723px;
}

#main .bottom {
	background: url(images/bottom.gif) top left;
	float: right;
	margin-left: -50px;
	margin-bottom: 50px;
	height: 29px;
	width: 723px;
}

#main .post {
	background: #FFF;
	float: right;
	padding: 0 10px 0 10px;
	width: 703px;
}

#main .postp {
float: right;
padding-left: 20px;
width: 650px;
}

#main .post span {
	color: #F5821F;
}

Code (markup):

Which is just bad. First, get rid of ALL of the float:right's. They aren't doing a damned thing worth doing. THEN you'll want to make sure #main is set to WRAP floats. Transparent is the default behavior, unless that's the most ****ed up reset on the planet that's unneccessary to say...

this is a wild guess, you might have to play with the absolute positioning, but if I was coding that, the CSS would be chopped down to something like this:

#main {
	clear: both;
	position:relative; /* so we can position that pesky img */
	overflow:hidden; /* wrap floats */
	zoom:1; /* trip haslayout, wrap floats in IE */
	padding:20px 0 50px 427px;
}

#main img {
	position:absolute;
	top:60px;
	left:127px;
}

#main .top,
#main .bottom {
	height:29px;
	font-size:1px;
	background: url(images/top.gif) top left no-repeat;
}

#main .bottom {
	background-image:url(images/bottom.gif);
}

#main .post {
	padding: 0 10px 0 30px;
	background: #FFF;
}

#main .post span {
	color: #F5821F;
}

Code (markup):

That's assuming there's a parent container there somewhere setting that 1050 width... which is screwy since the only place I'm seeing that set is on #nav, so I'm not even certain how the sub-page elements are getting that unless #nav isn't closed properly.

So many floats, paddings and margins for no good reason in the CSS. It's two or three times more complex than need be. Even if you can fix it, I'd tell the client it's total trash and needs a complete rewrite - so at least YOU'RE covered for having pointed it out.

 

Just sent them an email now explaining the code is... well

Still having trouble bringing that image up though.

 

@deathshadow - can you take another look? Still the image is nowhere to be found, tried numerous things and a couple of work arounds to no avail.

 

Or if anybody could help with this.