Thanks for the link.
I don’t know jQuery so I can’t help specifically with that. In general, you should be able to get the non-JS page looking and acting decently, THEN tackle the JS. If we end up thinking the JS is actually causing a problem, this can go (as a new thread) to the Javascript forums, where there are people familiar with libraries like jQuery.
Anyway, looking at your page in general, some tips:
<?xml version=“1.0” encoding=“iso-8859-1”?>
You have this at the top of your page, and no I don’t blame you for having it… even the Doctypes page at the w3c say to use it. However it’s for real XHTML (as XML needs to have that opening tag). But your site is just a website, not XML data being displayed as some type of HTML… so remove it.
You know you don’t have real XHTML because your meta tag here: <meta http-equiv=“Content-Type” content="text/html; charset=iso-8859-1" />
(and also your server) says it’s really just html (which, btw, is what you want… IE cannot deal with true XHTML and your Javascript would not work either).
It just so happens that having ANYTHING before the doctype is a trigger for retard mod—er, “Quirks Mode” in IE6, meaning it’s using rules meant for pages written back in the days of grunge bands and geocities.
IE7 knows to ignore that XML prologue, but anything else before the doctype will put it into Quirks Mode too. Meaning it would render your page the way IE5 does. : )
This is your current doctype:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
Go ahead and make it strict (instead of transitional). This lets the validator help you find nasty old-fashioned tags you shouldn’t be using anyway, so you can get rid of them and have a nicer-coded page.
So I ran your page through the validator, just to see how many errors there were (some errors may affect rendering in a browser while others don’t).
108 errors! However a lot of them are things like not using the /> endings that go with your chosen doctype. Also, usually fixing on error can fix 10 others, when your errors are things like tag mismatches.
For errors of “no alt attribute” on images that you have as decoration (so shouldn’t have any alt text), you fix that by adding alt=“” to the images.
deftext=“Search for beer, wine or spirits…” this error, the validator does not know what this deftext is. Neither do I. Doesn’t belong in the HTML.
<div id=“wise_phone”>Call: (###)###-####</div> this error looks like you have a div in a ul. Ul’s can only have li’s as direct children… but you can either put the div outside the ul, or into a li. Depends on what makes more sense to you.
<div style="display:inline;width=“700”>
error here is the quotes. style=“stuff inside” no inner quotes.
I’ll let you go through them from here and any you don’t understand, you can ask here.
.trio_new_test… is probably not where you think it is. As I said earlier, when dealing with floats, it’s a really good idea to (temporarily) add ugly background colours to your boxes, so you can see them. Also, looking at the page, I don’t see why #new_trio_ads_test is absolutely-positioned. Is that required for the Javascript?
I’d also advise removing the title attributes from your images inside the anchors, because the images are pretty readable, and those without images can read the alt text of the img tags. Having titles really just doubles the text, in this case it’s not wanted or necessary, and people will see where they go if they click on the link.
I don’t have Safari, chrome, etc test…
Since you have IE, I assume you have Windows? You can download Chrome browser and Safari for Windows for free. While they both use the same rendering engine, they do render pages slightly differently (as all browser do : )
Anyway your boxes are stacking on top of each other because, as I warned can happen with floats, they’re too wide to fit side-by-side.
.trio_new_test .ad_test_middle {
float:left;
padding:0px 2px 10px 250px;
vertical-align:top;
}
What this did was start with the image inside to set its basic width (why it’s a good idea to state widths on floats) and then it added 250px of left padding! That’s so wide that there’s just no room for the next float to fit beside it.
Background colours on the boxes will show excessive padding, but it won’t show excessive margin (margins are invisible). So you have to pay attention to your math.
In my Firefox without JS, I also see the first couple of images, then they get cut off. I think this might be because div.content is stopping about there. If you give .content a background colour you’ll see that.
Anyway, I’d say first thing is to fix the validation errors in the HTML. If you run across an error you don’t understand, you can post it here. Remove the XML prologue thingie, switch your doctype to “Strict” (because strict is more awesome) and keep sending your page to http://validator.w3.org/
Then see if you can remove the absolute positioning on the #new_trio_ads_test, give all relevant boxes ugly background colours, and let’s see where we are then.
If fixing a validation error makes your page look goofy, you can post that here as well if you can’t find a valid way to write what you want.
After getting things looking ok in browsers without the Javascript (you can either turn it off in your browser or for Firefox use the NoScript plugin), we can work on IE6’s remaining bugs… last is the Javascript itself, if it still needs fixing.
*edit in the future, when you post code on the forum, wrap that code with [code] tags. Like HTML, the closing one has a slash: [/code]
