Help me fix my wordpress theme for internet explorer? (YAML)

April 21, 2009 3:48 PM

Web design panic! Wordpress theme (YAML + sandbox) implodes on impact with internet explorer

So, I made a swell website. Was all clever and used Yet Another Multicolumn Layout as a CSS/XHTML framework, smashed together with the classic sandbox theme framework for wordpress.


Great success! Until I tested it in internet explorer

I've tried perusing the various CSS bug fixes/diagnoses, even within the YAML documentation. But at this point I'm ready to throw things through windows (the glass kind). So I thought I'd try asking for help.

Site is here. Rather than posting all my source files, I think it best to let people poke around using Firebug so they can see it all in action.

Basic idea is: header, then two 50% columns with the main content. Right column then has two more 50% columns after its main content box. All of the columns go screwy in IE. And something's up with the header image too. YAML has some built-in functionality for dealing with IE bugs, but it also has two different ways of doing columns (default method, but then also subtemplates, which I've worked in as well (clearly not successfully)) not sure how to work it in, or if I've already hopelessly messed things up with my own tweaks.

Stylesheets:
YAML base stylesheet
Base content styles (somewhat modified, but not much/any layout stuff)
**The rest (including the layout styles)**

I can post more details, etc if needed...

posted by yuletide to Computers & Internet (11 answers total)

This might be of some use: link
posted by shownomercy at 3:57 PM on April 21, 2009

Someone will be along in a minute to fix the specific IE error but it always helps to validate your css and xhtml as part of the troubleshooting process. Good luck!
posted by ceri richard at 3:58 PM on April 21, 2009

Response by poster: Yeah, good point. Forgot to validate it recently... though it seems most of those errors are either from the flash embed code (don't care) or from id conflicts with the sidebar, which is currently hidden cause I couldn't get it to behave :-\
posted by yuletide at 4:21 PM on April 21, 2009

Best answer: Fixed the background issue:
#wrapper, #header{float:left}
posted by yuletide at 4:48 PM on April 21, 2009

Best answer: ...And looks like the float issues were due to IE ignoring the min-width directive...
posted by yuletide at 4:52 PM on April 21, 2009

Wow, is that IE 5? Do people still use that old of a version these days? (seeing as how IE 8 just came out, and IE7 has been standard on new windows installs for a year or two, and IE6 was standard with the original windows XP eight years ago)
posted by davr at 6:18 PM on April 21, 2009

Response by poster: I thought it was ie6, but could be ie5... pulled it from browsershots.org (ie6 is just as bad)
posted by yuletide at 6:20 PM on April 21, 2009

Response by poster: So, it's still broken... any ideas?
My hierarchical menus are totally dead...

and how do i fix the float drops issue?

I thought YAML had a built in fix for the min-width thing... it has a conditional stylesheet i include that has a javascript expression for setting min-width in IE... but it doesn't seem to be making any difference...


<>
<>
<>

....

charset "UTF-8";
/**
* "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
* IE patch stylesheet
*
* @creator YAML Builder V1.2b
* @file patch_my_layout.css
* @-yaml-minver 3.1
*/

/* Layout independent adjustments | Layout-unabhängige Anpassungen */
@import url(../../yaml/core/iehacks.css);

/* Layout-dependent adjustments | Layout-abhängige Anpassungen */
@media screen, projection
{
/**
* min-width/max-width workaround for IE
*
* @workaround
* @affected IE 5.x/Win, IE6
* @css-for IE 5.x/Win, IE6
* @valid no
*/

* html .page_margins {
/* Fallback if JavaScript is disabled */
width: auto;

/* JS-Expression for min-/max-width simulation */
width: expression((document.documentElement && document.documentElement.clientHeight) ? ((document.documentElement.clientWidth <> (80 * 16 * (parseInt(this.parentNode.currentStyle.fontSize) / 100))) ? "80em" : "auto" )) : ((document.body.clientWidth <> (80 * 16 * (parseInt(this.parentNode.currentStyle.fontSize) / 100))) ? "80em" : "auto" )));
}

.hfeed {
background: white;
}

}
[/code]

And I can't get the background to go white either... when I add the .hfeed call to the main stylesheet it works fine. But it doesn't seem to be working from the conditional tagged sheet. Any ideas?
posted by yuletide at 12:48 PM on April 22, 2009

Hi,

I have got WP experts who can help you fix this for a fee. Contact m.j20081(at)gmail(dot)com for more information.

Thanks,

Jagadish.
posted by blueplanet at 2:52 AM on April 23, 2009

Response by poster: Everything's fixed :)
posted by yuletide at 7:50 AM on April 24, 2009

Best answer: Problem was simple: didn't specify the full path to the external ie hacks css file, so wasn't being found...
posted by yuletide at 7:51 AM on April 24, 2009