IE Compatibility

[beggarsbones]

my site is having issues with IE 7 and below that make it unusable. (www.beggarsbones.com/store)

what SEEMS to be going on is that in IE my logoWrapper is not staying to its size (fixed ~280x280), or IE isnt listening and it is laying blank background over my center column. (see attachment : ie)

i commented out the logowrapper altogether to see if that was my issue, and the center content is still cut off in the same place, just moved up - see attachment: sanslogowrapper. this is making me think it is not just the logowrapper.

i've been playing around with conditional comments to talk to IE 8 and have seen changes, but have not been able to determine where or what i need to make it work. i'm assuming this is the way to go, as it works fine in most non-ie browsers.

any help is much appreciated!!!

[Website Rob]

Validating your code is always a good idea.

<!--bof-header logo and navigation display-->

<div id="headerWrapper">

<!--bof-navigation display-->
<div id="navMainWrapper">

<div id="navMain">

<ul class="back">
</div>

<div id="navMainSearch"></div>
<!--eof-navigation display-->

<!--bof-branding display-->
<div id="logoWrapper">

<tr>
</div>


There are other errors but the above is probably creating the problem with IE.

[beggarsbones]

i ran it through a validator and it came up with errors, i just didnt know what to make of them. i took out the <ul and <tr> and its still screwy, i'll run it through again and see what i can make of it.. thanks, rob!

[beggarsbones]

ok, i've validated my css (still a couple minor issues, but nothing that should be doing this) and validated my tpl main page and header - all that seem to really be coming up are issues in the prolog. that shouldn't be doing this, right? (i also tried taking out the ul and tr tags, then putting them back in and closing them, no luck)

this sounds dumb, but are there any other php files that interact between the main page and header? something else that i should validate?

[stevesh]

Looking at your site with the Web Developers in both IE and FF, it looks like you have your whole main page inside the headerWrapper div. Could that be causing a problem?

[Website Rob]

Not sure why you validated your CSS but not your HTML?


<div id="navMain">
<ul class="back">
</ul>
</div>

If you are not going to use the UL then remove it entirely.


<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper">

<tr>
<td id="navColumnOne" class="columnLeft" style="width: 150px">

What happened to the TR tag? Should be there but it's not.


<!--bof-navigation display -->
<div id="navSuppWrapper">
<div id="navSupp">
<ul>
<li>
</li>
</ul>
</div>

</ul>
</div>

Remove the UL tag.

[Kim]

You do still need to get the extra tags out of there and use valid XHTML. That should help some, but you are using overlapping layers of images and appear to have created some z-index problems - IE6 shows problems and IE7 has different issues. You may get some relief by giving those hidden elements a height and or giving them a relative position.