Comments

jrabeemer’s picture

Title: CSS: IE7 has big gaps where descended boxes are » CSS: IE7 has big gaps in fieldset/legend tags
Assigned: Unassigned » jrabeemer
Status: Active » Needs review
StatusFileSize
new2.13 KB

Update:
The problem stems from how IE treats the tag with a large vertical height. This is an IE7 CSS bug as far as I can tell. All the other browsers treat the tag with normal height and thus don't show the bug. I have created a patch against D6 Head that adds a fix-ie7.css file to the Garland theme. This was necessary since the fix specifically targets IE7 or greater and if it were added to the base style.css file, it causes spacing problems with other browsers. The change also fixes the sub Minelli theme.

The fix is documented here:
http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-lege...

Tested against IE7, Safari 3.03, Opera 9.23, and FF 2.0.0.6. It doesn't affect other browsers since the fix uses an IE conditional.

Side effect:
Spacing below the tag is tighter since the tag is forced upward with the top: attribute. It doesn't affect readability though.

IE Testing would be much appreciated!

jrabeemer’s picture

StatusFileSize
new44.7 KB

Attached a screenshot of what my fix looks like in IE7.

jrabeemer’s picture

StatusFileSize
new2.24 KB

-Forgot to add $Id$ tag.
-Added a note to file to reference back to this bug

ChrisKennedy’s picture

Spacing inside of the fieldset can be fixed by adding: padding-top: 2em to the fieldset CSS in fix-ie7.css

Otherwise it works for me. But I think the name attribution should be removed unless you have a specific reason for including it. We don't do this in Drupal and it would quickly bloat the source code if it became standard practice.

jrabeemer’s picture

StatusFileSize
new2.26 KB

No problem. Updated patch.

-Removed reference..
-Added padding-top: 2.5em;

jrabeemer’s picture

StatusFileSize
new117.82 KB

I'd appreciate any core committers with IE7 installed to test. Attached a new screenshot with padding added from previous patch. The output is now nearly identical to FF/Safari.

jrabeemer’s picture

Priority: Normal » Critical
Status: Needs review » Reviewed & tested by the community

If no one objects, this is ready to commit.

dvessel’s picture

Status: Reviewed & tested by the community » Needs work

Unless it's a really trivial, you shouldn't RTBC your own patch.

I'll review and provide a patch as soon as I get IE7 installed. I don't think the current patch is the way to go. What happens when the text size is changed? Your use of absolute positioning and negative margins in em's looks like it would turn out unpredictable results. Instead, it should all flow as relative position.

jrabeemer’s picture

FYI, in IE7 unlike IE6, scaling of fonts is relative to overall size. If you zoom with keyboard shortcuts CTRL + - or CTRL + -, the page scales proportionate. If you set text size Largest or Smallest, there's no change in IE7 with garland. If you try to set both, everything is still proportionate.

jrabeemer’s picture

Here's a screenshot at 150% zoom and text size set to Largest. Looks ok.

jrabeemer’s picture

Here's at the other end, 50% zoom out and text size set to smallest. Looks ok.

jrabeemer’s picture

IE6 and 7 have space around the legend element that doesn't seem to follow margin or padding rules around it. Using position: absolute; is to bring the element out of the flow. The link given in #1 describes the problem.

jrabeemer’s picture

Here's another screenshot of IE7 under Windows XP. IE7 at 150% zoom with text set to largest. No change.

dvessel’s picture

Status: Needs work » Needs review
StatusFileSize
new656 bytes

That looks good. I already rolled a patch that fixes it another way and uses a css selector hack. Doesn't cause any validation errors though. Generally not the best way to go but I figured, it's for a single rule.

/* Targets IE 7. Fixes background image in field sets. */
*:first-child+html fieldset {
  padding: 0 1em 1em;
  background-position: 0 .7em;
}

That's all that was addded.

jrabeemer’s picture

StatusFileSize
new984 bytes

That's pretty good. I made some fixes. I've restored the blue lines that have the descender arrows. Fixed the header bg spacing was off a minor bit when zoomed. Fixed the padding around the legend tags and description paragraphs below that didn't match other browsers.

jrabeemer’s picture

StatusFileSize
new1018 bytes

Found another small bug. A white background color was visible at the topmost box. You can see it against a gradient. Fixed.

dvessel’s picture

Status: Needs review » Reviewed & tested by the community

This works, and once we have enough of IE7 specific issues it would be easy to search for these selectors and move them into their own style sheet.

gábor hojtsy’s picture

Status: Reviewed & tested by the community » Fixed

Agreed. Thanks for the patch, committed.

Anonymous’s picture

Status: Fixed » Closed (fixed)
alan d.’s picture

Title: CSS: IE7 has big gaps in fieldset/legend tags » CSS: IE7 fieldset/legend issues
Priority: Critical » Normal
Status: Closed (fixed) » Active
Issue tags: +CSS, +autocomplete, +IE7-bugs, +Fieldsets, +Internet Explorer 7
StatusFileSize
new8.55 KB

Sorry for recycling the issue, but here was another D6 fieldset issue found on IE8 in compatibility mode in XP sp3 (x32). It effects the D7 version in both IE8 strict and compatibility modes.

The autocomplete within a fieldset drops below the fieldset legend of any other fieldsets that are below, as seen in the attached screenshot. My initial attempts failed to find a solution but I'm not a CSS hacker :(

The quick hack to produce the autocomplete in the fresh D7 install was to cut and paste the taxonomy autocomplete into the reports section, code pasted below and screenshot attached. To replicate this in D6, free tagging taxonomy produces the error when free tagging vocab autocompletes drop over the menu fieldset below.

<?php
# approx line 290 - modules/dblog/dblog.admin.inc
function dblog_filter_form() {
  $filters = dblog_filters();
  $form['t'] = array(
    '#type' => 'fieldset',
    '#title' => t('Test'),
    '#collapsible' => TRUE,
    '#collapsed' => TRUE,
  );
  $form['t']['taxonomy'] = array('#type' => 'textfield',
    '#title' => 'test',
    '#default_value' => '',
    '#autocomplete_path' => 'taxonomy/autocomplete/1',
    '#maxlength' => 1024,
  );
  $form['filters'] = array(
  // ...
  );
?>

This issue was pointed out in the taxiselect issue queue (another issue), and the reporter posted this video of the bug: http://www.youtube.com/watch?v=whZFHIKKY4E

alan d.’s picture

Another issue for the seven theme has a very similar issue for the autocomplete background with the same setup: http://drupal.org/node/539724#comment-1919596

extensive’s picture

download fresh file of and replace with below
misc/jquery.js update

Status: Active » Closed (outdated)

Automatically closed because Drupal 6 is no longer supported. If the issue verifiably applies to later versions, please reopen with details and update the version.