| Project: | Zen |
| Version: | 7.x-3.1 |
| Component: | IE problems |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Issue Summary
==Update==
There seems to be an issue with using Module level JQuery that changes the DOM with Drupal 7 and Zen (current release, not dev).
I have have put together a small test module, it'll add a paragraph tag, which will break the Zen layout, putting the main content over the top of the first sidebar, in IE7 only. No issues elsewhere.
I have no solutions to the problem - currently i'm now running a modified version of the layout for IE7 using absolute positions and no negative margins to get around this error.
If someone could download the test module (see below) and verify this that would be appreciated.
==Original post ==
I've been working on a website and theme based off Zen stable 3.1 - and have no layout issues currently in ie8+, ff, chrome, safari, and even ie6.
However, ie7 is causing a complete headache. For some reason the main content will overlap the left column. I think this may be an issue with "clearfix", but i'm having trouble pin pointing it.
Page that is fine with an internal "clearfix" - http://glassyz.customers.smartyhost.com.au/wineries-restaurants
Problem page with "clearfix"ed layout - http://glassyz.customers.smartyhost.com.au/node/4
For me the second link will work, until i roll my mouse over one of the "customise this product" links, which changes the layout to having the main content overlap the menu (at a total lost as to why).
Any light shed on this would be greatly appreciated! :) I'm running a "stand alone" version of ie7, along side ie6 purely for testing, so if it's an isolated issue only on my version, sorry for posting, but i don't know anyone still on ie7! (if only that was enough cause to not be worried about it!)
Cheers,
Alex
Comments
#1
I was able to stop the jumping error on ie7 for
http://glassyz.customers.smartyhost.com.au/node/4
Changes
a.start-wizard {
margin: 0.5em 0 0 0;
padding: 4px 10px;
background: #0E0E0E;
border-radius: 10px;
color: #fff;
text-decoration: none;
display: inline-block;
}
a.start-wizard:hover {
padding: 5px 10px 3px;
background: #3F81C4;
}
to
a.start-wizard {
margin: 0.5em 0 0 0;
padding: 4px 10px;
background: #0E0E0E;
border-radius: 10px;
color: #fff;
text-decoration: none;
display: inline-block;
}
a.start-wizard:hover {
background: #3F81C4;
}
Removing the padding change seems to have fixed that one problem, however i'm still experiencing the same odd behavior on;
http://glassyz.customers.smartyhost.com.au/products/glassware/wine
Will update on any further discoveries...
#2
I didn't debug your issue in ie7, but this sounds like a very tricky ie bug that I've encountered -
http://www.satzansatz.de/cssd/pseudocss.html#hoverjump
The fix might be to make sure the parent element "has layout", or check out that link.
#3
Thanks - that seems to explain the first issue with changing padding with :hover css.
Seems i'm experiencing 2 bugs at once, unfortunately!
Second bug i think i have cornered the bug for the most part - save this example as a Javascript file attached to a module;
(function ($) {Drupal.behaviors.my_module = {
attach: function (context, settings) {
$('#content .section').prepend($('<p>Why does this paragraph destroy the layout?</p>'));
} }
})(jQuery);
You should get a sentence above all the content in the main column, and it should break the layout in IE7. I think that changing the dom with jQuery via a module seems to be breaking the layout in IE7, can someone else confirm on a vanilla Zen?
#4
Here's a module for you to install and try it out on.
#5
Changed to bug until someone confirms the issue.