I am trying to implement an table-free theme based on the Pushbutton theme using Skidoo's Ruthsarian Layouts (http://webhost.bridgew.edu/etribou/layouts/skidoo/). It works fine in Firefox and Opera, and validates as true XHTML 1.0 Transitional. But in Internet Explorer 6 there are bugs: You can't highlight (and copy) text, some borders and images disappears. I think these bugs are wellknown, and similar issues has been discussed here (http://drupal.org/node/28603), but solutions proposed hasn't been helpful in my case.

Just for testing I inactivated "base href="http://www.mydomain.com/" /" and hardcoded the urls to all stylesheets (including drupal.css and style.css), and then I was able to highlight text (but the other issues still appeared). Why does the no base-tag fix the highlight bug?

The Skidoo's Ruthsarian Layouts works fine in IE when I use them for other sites not using Drupal. Does anyone have any ideas what it is in drupal.css and style.css which makes IE so problematic when used with such tableless, xhtml css designs as Skidoo's?

Bengt

Comments

dman’s picture

I'd really like to know what's behind that highlighting bug. It's in effect right here on drupal.org (in the comments) too.

Adding a few unwarrented position:relative directives seems to fix the 'peekaboo' bug pretty well, but this select problem I've only ever seen on Drupal sites.

.dan.

http://www.coders.co.nz/

markus_petrux’s picture

I also found this problem ...and several possible solutions by Googling ("text selection" css ie bug).

However, none of the solutions worked for me, so I finally gave up, oh well. This is the kind of things that make you love Firefox. ;-)

Doubt is the beginning, not the end of wisdom.

bengt’s picture

I have now been able to verify that the *base* tag is the main problem here. As I mentioned in my first post I use the same css-layouts on another site which does *not* use Drupal. This site works fine with IE. But if I add a base tag, I can immediately see the same kind of errors, especially the selection bug.

So my question is still: does anyone know why IE chokes with the base tag (in connection with css positions?)? Is the base tag also the explanation why, e.g., comments here att drupal.org can be difficult to select?

And another question: is it possible to use Drupal without having to use the base tag? How?

Bengt

PS. As long as the base tag is there, it doesn't help to disable drupal.css and style.css. DS

Bengt

dman’s picture

WOW! That's incredible. Good spotting (I haven't tested)

There is no (AFAIK) provision for running Drupal with no BASE, the use of paths prevents it. I find that a bit sub-optimal from a webby POV, but I can't be bothered fixing it, too many side effects.

However, the only crossover between CSS and BASE that I can imagine is the path to the css file. Have you tried making that absolute, or included differently? Maybe using link rel=stylesheet instead of style @import

... Bloody IE

http://www.coders.co.nz/

bengt’s picture

No, it doesn't seem to help to use absolute paths and/or using link.

Bengt

Bengt

midtoad’s picture

I have also found a problem that manifests itself only with IE6, drupal, and the Chameleon theme. All is well when I open any drupal page, but if I scroll down, all of the page content appears to smear or repeat across the screen. I've posted a bit about this on my blog at:

http://midtoad.homelinux.org:9080/frog/user/midtoad/article/2006-01-24/16.

ruthsarian’s picture

For a quick solution, trigger IE into quirks mode. Then some of these problems will go away.

I'll poke at the stock drupal site for a bit (since I don't have a drupal installation currently available) and see if I can figure out what's the root of the problem.

ruthsarian’s picture

The inclusion of a BASE tag is definately triggering some kind of bug in IE.

Including a closing BASE tag immediately after the BASE tag appears to resolve the issue. A closing BASE tag is forbidden under HTML 4. In XHTML a closing BASE tag is valid. The short-hand version of a closing tag (used in the markup generated by Drupal) still triggers the bug. Only a complete closing BASE tag resolves the issue and keeps the page valid XHTML.

This bug only pops up when IE is in standards mode. Adding a closing BASE tag does not put IE into quirks mode. I have confirmed this.

So the other option is to specifically force IE into quirks mode, but that can have some undesired results when it comes to CSS.

This bug occurs on any relatively or absolutely positioned element that is, or is a child of, a floating element. Any child elements of the positioned element are affected by this bug and explicitly setting the position attribute to relative does not resolve the situation.

The layout for the stock Drupal site (bluebeach theme) is using floats to get the columns together. All comment sections have 4 relatively positioned DIV elements wrappint the comment content to generate the rounded corners effect. They need to be relatively positioned otherwise z-index has no value and the squared corners will overlay the rounded corner images.

The quick and dirty solution is to do away with the BASE tag alltogether.

But if you don't want to, then the layout's CSS needs to be redeveloped to not use floats except when absolutely necessary.

I'll toy around with things a bit more to see if I can find a hack that allows the short-hand BASE tag (so it can be used in HTML4 documents).

--

You could use IE conditional comments to keep your HTML valid and still include a closing BASE tag for HTML 4 documents. Something like this:

<base href="http://drupal.org/"><!--[if IE]></base><![endif]-->

bengt’s picture

Thanks for the tip! The closing BASE tag does solve the select-issue, but not the disappering borders/images (just some borders and one image, and some borders disappear/appear when you hover over them), but this is maybe caused by some conflicts with your css layouts and the style.css for the Pushbutton theme which I started out from. I will try to build a new style.css from scratch.

Bengt

bengt’s picture

Do you have any idea why the border-bottom in the folllowing css-code in drupal.css disappears in IE 6 when using your css-layouts (the closing BASE tag does not fix this kind of error)?

.tabs ul.primary {
  border-collapse: collapse;
  padding: 0 0 0 1em;
  white-space: nowrap;
  list-style: none;
  margin: 5px;
  height: auto;
  line-height: normal;
  border-bottom: 1px solid #000;
}

Bengt

ruthsarian’s picture

See http://drupal.org/node/47392

The BASE tag is being pulled out of the markup in the next release.

seanr’s picture

Add this script in the footer of your theme:

document.body.style.height = document.documentElement.scrollHeight+'px';

Sean Robertson
webolutionary@webolutionary.com

Suzy’s picture

I'm wondering if it is a hasLayout error but I would like a test case to check,

that script is setting a height on the body element, so if adding body {zoom:1;} to the CSS also works then yes it's a hasLayout side effect

using position: relative; without triggering MS hasLayout flag to "true" can cause some inconsistently weird results at times