By jeff h on

I've reached my wits end on this one and am hoping someone here might be able to give me some idea of what might be going on.

My site (Drupal 4.7.3 / PHPTemplate) looks and works fine on Safari and Firefox, but is messed up totally on IE, but only on pages that contain text input fields.

Check out the following URL: http://ultrametabolism.com/test-site/node/85/edit

Really hoping some Drupal / CSS gurus here might be able to shed some light on this. I'll gladly give access to any template files if needed.

Thanks,
Jeff

⋅ Categories: Drupal 4.7.x

Comments

ADMarshall’s picture

ADMarshall commented

Seems to hate mine, too. Please see the following, potentially related issues and forum posts, from newest to oldest:

I've also posted an enqiry to the Drupal Support mailing list, http://lists.drupal.org/, which you can search via this URL or a similar one:

http://www.google.com/search?&q=site%3Alists.drupal.org+internet-explore...

Personally, perhaps prejudicially, I'm wondering if this is at all related to Microsoft's intensification of it's "Windows Genuine Advantage" campaign. Cf.,

http://news.google.com/news?&q=microsoft+anti-piracy+internet-explorer

AD Marshall
Canada & Saigon, Vietnam

xjm’s picture

xjm
she/her
Primary language English
commented

I have a few hunches... can you post screen shots of what the "messed up" stuff looks like under IEPC? (Mac user at home for the weekend... no Windows machines in my house!)

Here's CSS information from the header tag:

<head>
<style type="text/css" media="all">@import "/test-site/misc/drupal.css";</style>
<link rel="shortcut icon" href="/test-site/themes/ultramet/favicon.ico" type="image/x-icon" />
<style type="text/css" media="screen">@import "/test-site/modules/taxonomy_dhtml/menuExpandable3.css";</style>
<style type="text/css" media="all">@import "/test-site/modules/devel/devel.css";</style>
<style type="text/css" media="all">@import "/test-site/themes/ultramet/style.css";</style>
</head>

IE PC is notorious for its terrible CSS standards support, so it often requires some mega hacking and workarounds to get it to work properly. There are a couple tricks you can use to hide valid-but-IE-broken CSS from IE.

If you can post a screenie of what's happening in IE, maybe I could make a good guess as to possible sources of the bug.

=======================
Just another newbie.
XHTML Strict: it's the way to be.
=======================
Feature request: HTML Source Formatting in TinyMCE

carlmcdade’s picture

carlmcdade commented

It's the notorious float bug. I have been dealing with this one for the last month or two since starting to do work in 4.7 for the Swedish Computer Society. What you need to do is start placing

<div style="clear:both;border:1px solid red;">stop floating</div>

in places where a div column should end and the next begins. I will take a look at your template but I may not do it immediatley. I am busy trying to change the Multiflex theme into a stretchy.

Hiveminds Magazine
http://www.hiveminds.co.uk
for web publishers and community builders

xjm’s picture

xjm
she/her
Primary language English
commented

There's a better way of doing this since he's using external styling (if that's the problem; as stated I can't see it in IEPC).
<div class="anchor"></div>
Stick this guy after floated content to keep it inside.

CSS:

div.anchor {
height: 1px;
width: 1px;
clear: both;
}

=======================
Just another newbie.
XHTML Strict: it's the way to be.
=======================
Feature request: HTML Source Formatting in TinyMCE

carlmcdade’s picture

carlmcdade commented

I never use external styles when trouble shooting, only after I find the errant code.

Hiveminds Magazine
http://www.hiveminds.co.uk
for web publishers and community builders

ufku’s picture

ufku commented

try adding this to your stylesheet
form {
width: 100%;
}

jeff h’s picture

jeff h commented

Thanks everyone for your suggestions! I tried each one, without luck.

I noticed the layout was perfect as it loads, then at the very end jumps to the wrong layout. I was suspicious so turned off Javascript in IE (for all us Mac/Linux/Firefox users, try remembering these steps!... http://www.umanitoba.ca/acn/support/websites/Javascript/ie6.html).

Without Javascript... it works! it seems to be related to 4.7's lovely user-expandable text input fields.

Obviously it needs to work *with* Javascipt... any further ideas, anyone?

_________
http://marmaladesoul.com

ufku’s picture

ufku commented

i had a similar problem which i solved by setting form width. try adding this to your template page file.

form { width: 100%; }
jeff h’s picture

jeff h commented

Thanks for your suggestion -- I had real hope for this fix as it makes sense to me in light of what seems to be happening. However, unfortunately it didn't get me anywhere either :(

Will keep looking... might try a few variations on your form width idea.

_________
http://marmaladesoul.com

jeff h’s picture

jeff h commented

Hiveminds, it *was* an obscure variation of the awful IE double-margin bug. I had floats inside a container with no width, but this was only a problem when textarea.js loaded. Something in this javascript include caused IE to double the margins on my text areas.

Being javascript, the classes involved were applied AFTER my CSS, hence my CSS having no influence whatsoever, when applied directly to the text areas.

The fix was to apply a width (thanks ufku) to div.node-form eg

div.node-form {
	width:  400px;
}

This circumvented the IE double-margin bug. Thanks everyone for your suggestions.

_________
http://marmaladesoul.com