format bug in IE7 beta 2

I'm having this problem as well - has anyone found any workarounds or fixes to the theme? thanks

(4.7, ie7)

I used to have this problem (with IE7 beta 3 and 4.7.2) however I don't anymore.

It was either fixed by the changes in 4.7.3, or by some unreleated changes I made to style.css - if you still have the problem I can share my modified style.css.

Please make the working styles.css public, as IE7 is approaching as an Automatic Update on Nov. 1.

This issue is still in existance with no updates as to what if any changes have been made to resolve the issue.

The final version of IE7 is out and we still have this problem, does someone know of a fix? I am having the same problem.

Another verification of this problem. Background colors for sidebars are lost and the right column is out of alignment. I am using the 4.7 version of this theme.

Leave it to Redmond to hose a perfectly elegant bit of code. Any hacks to fix this problem?

So here is a workaround, please test for any side-effects. IE7 doesn't use underscored attributes but is missing one (in this particular friendselectric bug):

/* Note: due to Mozilla stretching fieldsets inside nested floats,
the left sidebar is placed before the main content. This allows
the main area to remain unfloated in Mozilla */
#main {
_float: right; <--------- THIS IS WHAT IE7 DOESN'T USE
margin: 0px;
_width: auto;
height: auto;
}

Solution is to add this to you style.css (e.g. right after #main {}):
*:first-child+html #main {
float: right;
}

The selector hack is from http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php

Posting again, bad formatting :-(

So here is a workaround, please test for any side-effects. IE7 doesn't use underscored attributes but is missing one (in this particular friendselectric bug):

/* Note: due to Mozilla stretching fieldsets inside nested floats,
the left sidebar is placed before the main content. This allows
the main area to remain unfloated in Mozilla */
#main {
  _float: right;    ========== THIS IS NOT USED BY IE7 but needs to be set somehow
  margin: 0px;
  _width: auto;
  height: auto;
}

Solution is to add following snippet to your style.css (e.g. right after #main {} block):

*:first-child+html #main {
  float: right;
}

Selector hack is from http://nanobox.chipx86.com/blog/2006/04/easy-css-hacks-for-ie7.php

Just adding this to my issues tracking list - I have several sites using FriendsElectric (or variants thereof) and need to track this. And I'll check out the fixes as soon as I try IE7

_width: auto is needed as well, add it (as width: auto) to the new IE7 only block as well.

Thanks. This has helped with the main content getting shoved below, but I'm still having problems with the page width, and the sidebar images being covered. Sorry--I am a true css newb. See my attachments for an a screencap.

This is slightly off-topic - but may be useful anyway.

I prefer to use the "conditional comment" css inclusion technique when dealing with ie-specific css fixes, since it doesn't require the selector hacks or other strange stuff - you can create separate css files for each IE version (or all IE versions) that require special css. This is a well-documented and robust method of targetting IE browser CSS bugs.

• http://virtuelvis.com/archives/2004/02/css-ie-only
• http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx
• http://www.cssplay.co.uk/menu/conditional.html

To use this technique, you need to alter page.tpl.php slightly to inject the conditional comments into the page html. Here's an example from one of my sites:

  <?php print $styles ?>
  <!-- http://virtuelvis.com/archives/2004/02/css-ie-only -->
  <!--[if IE]> <link rel="stylesheet" type="text/css" href="<?php print _getAbsPathToFile('ie-fixes.css') ?>"  /> <![endif]-->
  <!--[if IE 5]> <link rel="stylesheet" type="text/css" href="<?php print _getAbsPathToFile('ie5-fixes.css') ?>"  /> <![endif]-->
  <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="<?php print _getAbsPathToFile('ie6-fixes.css') ?>"  /> <![endif]-->

(the _getAbsPathToFile() function is a helper i've added to template.php in order to avoid hard-coding the theme path into node.tpl.php - I often use a local installation on my Windows system for testing, so the paths change, and this prevents breakage - so, if you never change paths or directory organization, none of this is necessary - just go ahead and use a relative path to the theme dir.)

/* Get absolute path to theme dir */
  function _getAbsPath() {
      return '/' . path_to_theme() . '/';
  }
  
/* get abs path to file in theme dir */
  function _getAbsPathToFile($file) {
      return _getAbsPath() . $file;
  }

The benefit is that non-IE browsers never even see the css tweaks, so you can keep the main css file very clean.

I've used this technique on several of my sites ( Amadorable.com being one of them as the News Portal theme required substantial tweaking for IE) and I am quite happy with it. I never use the selector hacks.

I had this problem so I spent some hours tweaking the style file and the page template. Now it looks good on IE 6, IE 7, FF 1.5, FF 2 and Opera 9. It's not an elegant solution (lots of hacks and pixel sizing) but it works.
If any of you needs a quick solution to this problem, maybe can use this.

Hackish or not, you are a savior! I will track this issue in hope of a "cleaner" fix, but the show may now go on. Many thanks!

I'm attaching the Diff files of the two files for folks like me that have customized this theme a lot.

FYI, There are minor problems with harlock1975's fix--mostly due to the 'absolute' positioning with the sidebars not playing nice with a resizable TinyMCE field, and/or the TinyMCE "full screen" view. But nothing major in the "presentation". Now, I am working on integrating the alternate style as a "conditional comment" css. I'm still very grateful for the submisison.

I tested the solution provided by harlock1975 (thanks to nrasmus for the patch file) and it works fine. Brings IE7 support without breaking any of the other browsers. Any way to get this into cvs and create a new release for people?

..- Wonderland

Hi guys,

Thanks for the info on this fix ... I've been looking for a solution to this issue for months.

I have installed harlock1975's files and things are MOSTLY working .. but a few comments:

1.) what version of Friendselectric were the originals? I'm still running 4.6.x and it looks like your hacks were done on the 4.7.x code so you may want to make that obvious to others here if that's the case.
2.) what's with the lang="it" stuff? should that be in there for us non-Italians?
3.) it looks like you've made some other unrelated colors changes in this style.css which others may not care for. I had to go back afterwards re-edit out the color changes.

The only problems I've found (after I realized that these were probably 4.7.x hacks and I'm running 4.6.x) is that the right side of certain pages (I guess the ones with both sidebars off) is scrolling off the right side of the page. Perhaps this is the same problem as the TinyMCE mentioned above? Ours has embedded Gallery. For example:

http://www.mariposahd.tv/gallery/beauty/mariposagirls/sol_d/pinamar2005/...
(a tasty photo treat for those who can help debug this!)

Thanks again for the fixes! Lets clean this up and get it into the production code!

I've found another problem; on some of the pages the text will start out really low on that page; and it varies on what pages within the site. And naturally it's only happening in IE7. I'm just getting into the whole coding thing and have been seeking advice from a friend and he's even stumped.

Here's the link: http://artemus.us/drupal_4_7

The pages in question that my client contacted me this morning are:

Steve Pniewski
Kurt Werth
Job Placement
Customs Log in

I have checked this and sometimes it varies; it's not just these pages. When you go back to them later, they could be fine but another page will now be out of whack.

Thank for any advice or fix in advance!!!!!

Regarding Conchero's comments
1) I tried to specify the version I was using (you can see in my post there's 4.7.x), but I am no Drupal expert and maybe I did something wrong (and probably I am repeating the same error again)
2) It's a IE6 hack I found here http://www.ibloomstudios.com/article7/
3) I fixed the FriendsElectric theme for my boss, who changed some formatting without telling me. Sorry for posting the changed versions.
Also, the problem you mention occurs when you have non-wrappable content (I had a long url but I can see you have a much better content :-). To fix this I added an overflow:hidden to the middle div. I got the same problem using the original theme, though.

Well, I applied the hack above and this does the trick for IE7, but I am seeing two issues, now, with Mozilla 1.5.0.8

_Incompatibilities of the above fixes with Mozilla / Firefox 1.5.0.8_
#1. First... an occasional TinyMCE incompatibility issue ---
**sometimes the text area that you can type in does not automatically "return" when you reach the end of a line, but extends approximately two characters beyond the visible area of the text box. [This usually occurs after a text box has been resized down.] This means that for the last two characters of a given line, you will be typing "invisibly". Additionally, once the text area is modified into a smaller text box, it becomes impossible, as far as I can tell, to resize it again. It looks like the right-most 20 px of the TinyMCE text box have disappeared... so the sticky grab-handle for resizing is no longer available. [jpg image is uploaded to illustrate this.]

#2. Second... the right hand margins on Images don't seem to work quite right. The text goes "flush" against the image, where it should have a gap.

#3. Third... the area for "content" appears too small at times.

[I will upload images to illustrate #2 and #3 in the next two posts.]

Thanks for your help.

Albert Wong
www.ithou.org
**

Followup image to illustrate Bug #2 listed above.

Followup image for bug #3. Listed above.

RE ajwong's bug#2 (I am seeing bugs #1 and #3 by the way--but they are not deal-breakers for me), the image hspace value that tinymce provides is depreciated in transitional xhtml 1.0, and the tag gets stripped out. Not sure why it's only happening some of the time for you though. To get around this, you can add something like this to your css:

.image {
border-style: solid;
border-color: #fff;
border-width: 5px;
}

Or padding, spacing, or whatever--then apply that style to all your images--a lot of grunt work, for sure, but keeps you "up to snuff."

To Conchero: The lang="it" is unnecessary.

To the rest--I have not had time to work on integrating these fixes into a conditional comment scenario--I really hope this great theme can eventually transcend the muck MS has thrown at it in a fittingly elegant fashion.

Thanks for the suggestion, ns! I appreciate it... I'll let you know how it goes.

Peace,
Albert

worked like a charm... though I had to do some finangling [is that the right word?]... but this is exactly right.

BTW, I'm seeing a Tincy MCE glitch where the last two lines before the bottom of the window are now uneditable. This is in Mozilla 1.5. Grrr... I'll see if there's any kind solution. Thanks for your help.

Best,
Albert
www.ithou.org

Another glitch to the above fix.

When you press tab key in the Title box area on Mozilla 1.5 using Firefox, it shifts the entire text box margins to the left.

Bummer.

Hello again,
I've been reading through all the post here and can see that IE7 has not been good to this theme. And, I have looked though all the post and don't see anything that addresses what I'm going through, I may be wrong but I don't believe I have a text overlay problem.

I have included direct links to .png files that illustrate what I am going through,

The first example shows the body text where it should be aligned:

Linda

This next example shows that body text "pops down" (or since it's a bad screen shot "disappears")

Steve

I am also including links the actual site where these pages are located so you can see this problem in action:

Steve
Linda

The site worked fine in IE6 and every other browser out before this update to 7. I have tried different little things, made sure the cache was emptied and my client still sees this problem. I design on Mac but have a PC running Xp with IE7 and believe it or not, I can't reproduce this problem on that machine. I have friends check the site with thier PC's and they can see the problem.

The site is running Drupal 4_7 with the latest IE7 "fix" for FriendsElectric but this seems to be a persistant problem and inconsistant throughout the site. Most pages work fine (still working on one page) it's just hard to nail down what is causing this to happen.

Any advice / fix would be greatly appreciated. If any more information is needed, let me know and I will gladly supply it. If it is a mistake on my part somewhere in the building of the pages in question, please let me know as well so can I make sure I don't do it again.

Thanks!!!

Lowbacca,

I get the problem with the text being pushed down on both of those pages. It only happens at certain widths though. Try resizing IE7 while looking at those pages to see if you can reproduce it.

I had this problem prior to applying harlock's fix, but not since.

UserFriendly and nrasmus , thanks for the advice :-) I will try these this weekend. Will post results when done.

Thanks Again!!!!!!!!!!!!!

Okay, I really hate hand holding because I love to figure stuff out on my own but I need a little help.

UserFriendly and nrasmus, I've looked at the hack from harlock and I believe I understand the hack referred to in the link. But am looking at the link fix or the "overflow:hidden to the middle div." to solve my problem? I believe that I have looked through my CSS code and found

Sorry, I'm no where near a css expert--I just made every change harlock did (with the exception of colors, and the lang=it bit). See the attachment I made--stuff in yellow is added, blue-strikeout is deleted. Not sure exactly what every change does (I didn't experiment), but for me, these changes resolved all the most offensive issues (like the middle div getting pushed below the sidebars). Note overflow attribute around line 130 (sorry, I've added comments, so I'm not sure exactly where), under

.main-wrap-left, .main-wrap-both
{
  /* IE7 fix
  float: left;
  width: auto;
  margin-right: 0px;
  added _margin-right and overflow lines below */
  _margin-right: 0px;
  margin-left: 201px;
  _margin-left: 0px; /* Avoid IE float margin doubling */
  _padding-left: 201px;
  z-index: 10;
  overflow: hidden;
}

I think that's what harlock is referring to. Sorry if this doesn't help.

I am getting a little "annoyed" with the fact that some content is now scrunched left in firefox (per ajwwong's #3). But after finally getting tinymce to only resize vertically, I guess I can live with it.

nrasmus,

I'm not a css expert myself (I've lost a lot hair because of this). I've applied your fix and it didn't help, not your fault so don't sweat it. I've also applied what I found here http://drupal.org/node/90175 with the same results. What's driving me nuts is if IE7 is expanded just a little bit the site is fine but if expands or contracts the body jumps up and down depending on how the window is opened or closed.

Oh, the site looks great in Firefox!!!!! Says something doesn't it???? Though it has problems in Safari but my client is not worried about that.

I'm going to put this on the back burner until after the New Year. I would like to have some hair left for pictures :-)

Thanks for the advice and I will keep reading this thread incase something new comes up.

Thanks Again!!!!

Thanks to nrasmus for his fix two comments up re: the TinyMCE invisible, disappearing text issue described in #1 here:

http://drupal.org/node/47644#comment-158446

The fix is to turn of resizing in the TinyMCE drupal module, under

admin>settings>tinymce > edit [the profile you want] > Editor Appearance

And then turn off the horizontal resizing.

Thanks for this great fix! And if you figure out the smushed content #3 issue, let me know. [I'll keep looking too!] :-)

Best,
Albert
www.ithou.org

Okay, I believe I found a fix for my problem.

I messed around with the css and found that if I modified the following code the site works in IE7 and Firefox but is screwed up in Safari (my client is only worried about IE browsers).

I found this at line 520

/* Main */
#main {
color: #0b2645;
width: 100%;
}

All I did was change the width from 100% to 95% so the code now looks this:

/* Main */
#main {
color: #0b2645;
width: 95%;
}

I checked it two nights in a row on my windows machine running IE7; so far none of the pages bounced up and down while I resize the browser window. I'm trying to get a second opinion because this has happened before.

This fix was done on top of the previous IE7 bug fixes.

Now comes the deployment......

Thanks for all the advice! :-)

Lowbacca
Artemus.us

Okay, I believe I found a fix for my problem.

I messed around with the css and found that if I modified the following code the site works in IE7 and Firefox but is screwed up in Safari (my client is only worried about IE browsers).

I found this at line 520

/* Main */
#main {
color: #0b2645;
width: 100%;
}

All I did was change the width from 100% to 95% so the code now looks this:

/* Main */
#main {
color: #0b2645;
width: 95%;
}

I checked it two nights in a row on my windows machine running IE7; so far none of the pages bounced up and down while I resize the browser window. I'm trying to get a second opinion because this has happened before.

This fix was done on top of the previous IE7 bug fixes.

Now comes the deployment......

Thanks for all the advice! :-)

Lowbacca
www.Artemus.us

I know zero about CSS, so this forum is awesome! Thanks for making DataRush look good in IE7.

Small Firefox issue tho...

I installed a clean Drupal 4.7.0 and clean FriendsElectric.

I applied changes mentioned above (didn't seem to need the Lowbacca fix).

IE7 now works perfect, but as for Firefox 2.0....

I notice that when I log in and go to "my account", the tab called "contact" is under the other tabs. It's wrapping tabs when the text in the main text body of the tab is not extending longer than the length of the tabs above it.

Ideas? Is there a "no implied tab wrapping" command Firefox is looking for here?? Or a "tabs don't wrap to text" ??

Sorry for layman terms, but will be CSS expert within a few months I'm sure :-)

This may be useful:
Three reasons sites break in Internet Explorer 7

One way to avoid breaking things for non-ie7 browsers: implement your IE-specific css fixes in separate css files, wrapped by conditional comments, as outlined in my earlier post (http://drupal.org/node/47644#comment-153410), you could avoid breaking this theme for firefox/safari/etc. (assuming it was working properly there in the first place.)

Mixing your IE7-specific css fixes into the main style.css file is certain to complicate things for other browsers.

Here's the magic to add to page.tpl.php:

  <?php print $head ?>
  <?php print $styles ?>
<strong>  <!--[if IE 7]>
    <style type="text/css">
      @import "<?php print base_path(). path_to_theme(); ?>/ie7-fixes.css";</style>
  <![endif]--></strong>

Then, all you need to do is add your IE7 style overrides in /themes/friendselectric/ie7-fixes.css rather than style.css. The nice part is that firefox, safari, IE6 will never see the stuff in ie7-fixes.css.

I'm working on 'fixing' this theme for http://www.roadcarvin.com and http://exodusdev.com, and I will be using the conditional CSS technique so that I don't break the theme for other browsers.

Regards,

Mike

Ok, I've just modified the already-modified friendselectric theme on http://www.roadcarvin.com, per my comment above. It's not perfect, but at least:

1. Center content no longer drops down
2. The changes have no effect whatsoever on any browsers other than IE7

Total time to implement and test this was about 10 minutes.

The theme needs more work and fixing, to be sure, but now I have the infrastructure in place to add further IE7-only tweaks to ie7-fixes.css, rather than worry about breaking hard-won support other browsers.

To recap:

1. no changes to existing, already-tweaked style.css
2. Added file ie7-fixes.css (http://www.roadcarvin.com/sites/www.roadcarvin.com/themes/friendselectri...)
3. added a few simple new lines to page.tpl.php (see boldfaced section in snippet below) to inject ie7-fixes.css only when IE7 is loading the page:
   

     <?php print $head ?>
     <?php print $styles ?>
     <!--[if IE]>
       <style type="text/css">
         @import "<?php print base_path(). path_to_theme(); ?>/ie-fixes.css";</style>
     <![endif]-->
   <strong>  <!--[if IE 7]>
       <style type="text/css">
         @import "<?php print base_path(). path_to_theme(); ?>/ie7-fixes.css";</style>
     <![endif]--></strong>
   

And that's it! Fire up IE7, flush the cache, flush drupal's cache, and visit the site - as I said, still needs tweaking, but we are in much better shape than before.

I think the conditional comment technique is the cleanest way to deal with all these strange, IE-specific problems, without risking damage to the core css file for non-ie browsers.

Now, I get to try to do a quick-fix my other site that uses a lightly-modified FriendsElectric theme: http://exodusdev.com

Regards,

Mike

I just applied the same technique (with the exact ie7-fixes.css I used for www.roadcarvin.com) to http://exodusdev.com, it looks fine in IE7 and FireFox. Exodusdev.com had a very lightly modified friendselectric theme, only a few items added to the style.css file to add some capabilities unrelated to the theme, so I think this is a good test of the conditional comment/ie7-fixes.css approach.

here is a small patch that fixes content sliding and sidebar issues. there may be other non-fixed problems. i hope it helps as a quickfix.

ufku - the patch fixed sidebar color and content exceeding the background width but it made the issue of content sliding below the Navigation even worse for me.

I've had this same issue with several Drupal Themes I've tried and all these Themes had various issues with IE6 as well. Is anyone aware of Drupal Themes that are written to standards and work for common browsers regardless of religious affiliation?

The FE theme generates 36 errors and 18 warnings when validated against W3C CSS v2.1 OR 3.0
Including
#main
Property _float doesn't exist : right
Property _width doesn't exist : auto

Thanks, Pogo, for the fix. It worked great for me and saved me much heartache. Cheerss.

@inactivist /Mike:
Thanks very much for saving me (and my IE7 users) for now!!! Your fixes (page.tpl, ie7-fixes.css) work well!!!

(Do you have similar fixes for safary an IE on Mac, too?)

@inactivist /Mike:
Thanks very much for saving me (and my IE7 users) for now!!! Your fixes (page.tpl, ie7-fixes.css) work well!!!

(Do you have similar fixes for safary an IE on Mac, too?)

Thanks for the kind words. No, I'm afraid I don't have anything for the Mac (I don't have access to a Mac system, sorry).

Regarding IE/Mac, do people actually use IE on the Mac? Why would they? I thought the Mac world hated Microsoft. Ah well. This page has info on using separate CSS files for IE/Mac:
http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-c... It uses hacks rather than conditional comments.

Since I can't test/debug on a Mac, I'm unable to suggest any fixes for this theme when used with any Mac-based browser.

fixing smushed login sighting from applied fixes from nrasmus comment #15 above with the bug sighting as described pictorally here:

http://drupal.org/node/47644#comment-158446

The attempted fix:

Find the code in style.css:

.main-wrap-left, .main-wrap-both {
  _margin-right: 0px;
  margin-left: 201px;
  _margin-left: 0px; /* Avoid IE float margin doubling */
  _padding-left: 201px;
  z-index: 10;
  overflow: hidden;
}

And add the following:

/*additions to friends electric */
.main-wrap-left, .main-wrap-both {
  width: 100%;
  *width: auto; 
  padding-right: 201px;
  *padding-right: 0px;
}

Let me know if this fixes things with the smushed login... if so... I think that solves it for me with the bug fixes on FE... at least for IE6, IE7 and Mozilla :-)

Albert
www.ithou.org

In reference to the posting immediately above, please note that the smushed login only occurs in firefox and the image can be actually be seen as the attachment here:

http://drupal.org/node/47644#comment-158450

actually the fix in #48 breaks things in safari.

so i would not use it. unless you can fix the fix.

best,
albert

I am having a problem with this theme in ie7 also that doesnt seem to be addressed at all in this thread. Whenever i view full nodes the right panel blocks drop below all of the main content. It seemed some of you were having the opposite happen, with the content dropping below the right blocks. I attached a screenshot to show whats going on. Any suggestions??

Inactivist.

Tried your separate IE7 css file fix. It works as long as I'm logged in, when not logged in the content area drops back down below the left sidebar again.

How do I clear Drupal's cache? 4.7.2

use the developer module, or issue a SQL query (delete from cache;) or, just disable caching!

(ignore)

(ignore - how does one delete a post?)

(previous posts had incorrect CSS links for Drupal v4.6)

Thanks so much, this has been exceptionally useful. We also had the friendselectric theme with the dumb problem that ONLY in Internet Explorer, IE, the main content would be pushed down to the bottom of the page. I previously had set #main width=90%, which would fix it until a user shrunk their window size, at which point everything would "disappear" (actually suddenly moving way down the page, so one had to scroll down to see everything). The following fixes are much better, hopefully permanent fixes.

I added all the IE 7 fixes from Luca Bertoldi's "diff" files into an IE-7-specific css file, so it doesn't mess with other browsers (as described above). Here's the end-result of what I did, for future Google-searchers.
fyi I'm working off of a Drupal 4.6.11 install & friendselectric-4.6.x-1.x-dev (which has been modified in mostly style.css but also page.tpl slightly).

I've attached my page.tpl.php & ie7-fixes.css in a zip file. In page.tpl.php, the Comments indicate what was added (ignore the other custom stuff).
I had to change the method of loading the .css within page.tpl.php, since in versions of Drupal < 4.7 (like my 4.6.11), base_path() does not exist, so I got the current URL as a string, as you will see in the attached page.tpl.php

depending on when you actually get to this post, you may be able to see this in action here:
www.SarahHouseSB.org

Thanks again for all the help!

here's my method to load the special PHP for IE 7, for Drupal v4.6.x (or anything before v4.7):

  <!--[if IE]>
  	<style type="text/css">
  		@import "<?php
  		$Current_URL = $_SERVER['HTTP_HOST'] ;
  		print "http://" . $Current_URL . "/" . path_to_theme(); ?>/ie7-fixes.css";</style>
  	<![endif]-->

(note this says "[If IE]", but "[IF IE 7]" works as well. I suppose specifying IE7 is better, assuming IE 8 doesn't have the same problem!)