By bomarmonk on

Okay, my title is a bit much, but my problem is real.

I'm trying to get images inserted by img_assist to align properly in my nodes. I found a potentially wonderful solution here:

http://drupal.org/node/65358

However, the solution solves one issue and presents another. After making the following modification to the img_assist module:

< $output = "";
---
> $output = "

";
1289c1289
< $output .= "";
---
> $output .= "

";

And the following addition to my style.css file:

div.image_assist {
margin-left:3px;
margin-right:3px;
}
div.float_left {
float:left;
}
div.float_right {
float:right;
}

The images align properly in IE but are reduced to mere white-space. I have tried setting the height for the image div, but this doesn't seem to work...

Also in Firefox, this alignment trick seems to have no effect at all. Any ideas to help me banish this devilish behavior? Thanks in advance!

⋅ Categories: Drupal 4.7.x

Comments

bomarmonk’s picture

bomarmonk commented

Oops, those mods to the imgassist module were filtered out: use code tags!

Change 

$output = "<span class=\"inline {$attributes['align']}\">";

to

$output = "<div class='image_assist float_{$attributes['align']}'>";

and

 $output .= "</span>";

to

$output .= "</div>";

That's it...

bomarmonk’s picture

bomarmonk commented

The problem of invisible images was banished. The code needed the positioning to be declared:

div.image_assist {
margin-left:3px;
margin-right:3px;
position:relative;
}
div.float_left {
float:left;
position:relative;
}
div.float_right {
float:right;
position:relative;
}

I also declared the #content div to be positioned relative...

The only problem now: this doesn't allow text to wrap around images or the alignment of images with the firefox browser. There must still be something amiss here. Any ideas?

bomarmonk’s picture

bomarmonk commented

Okay, it looks like Firefox is making the width of the img_assist div 100%, even if I set the div float left (or right) to a specific width. Something is maybe overriding the width of the div, but I would think that the specificity of the css would take precedence of a generic div property?

nevets’s picture

nevets commented

Glad you are making progress but with styling issues it is pretty hard to help without a link to a page showing the problem.

bomarmonk’s picture

bomarmonk commented

I finally got Firefox to align the img_assist divs "correctly." I placed the CSS in my modules.css file, instead of the general style CSS. I think this forced the module.css to take precedence over whatever was interfering: in my page.tpl.php file I load the styles this way:

<head>
  <title><?php print $head_title ?></title>
     <?php
      print $head;
      print theme('stylesheet_import', base_path() . path_to_theme() ."/org_style.css");
      print theme('stylesheet_import', base_path() . path_to_theme() ."/style.css");
      print theme('stylesheet_import', base_path() . path_to_theme() ."/modules.css");
      print theme('stylesheet_import', base_path() . path_to_theme() ."/tables_forms.css");
      print $styles;
    ?>

  <script type="text/javascript"> </script>
</head>

I'm not sure if I've just avoided some sloppy problem by doing this, because now I've discovered another little issue. Some the inline images don't nest properly in the content div (in Internet Explorer). They initially appear floating out of the content area and then magically reset themselves to their proper position. Key the twilight zone music. If you want to look at the problem, check out this page:
http://www.alpinecountyca.com/other_organizations/alpine_watershed_group...

Thank you for any suggestions/corrections, etc.

nevets’s picture

nevets commented

The bluemarine has this in page.tpl.php, from the comment I would guess you want to add it to your theme.

  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script>

And a word of warning, by hardcoding the importing of style sheets you hava made it hard to use other modules that have their own style sheet(s). It is generally better to use <?php print $styles ?>.

bomarmonk’s picture

bomarmonk commented

This hardcoding was the only way I could keep the event module from making events look like neon-colored flash cards... I would guess there is a better way...but I even deleted the style.css file, but my overides didn't work until I hard-coded the style sheet into the tpl.php file.

I'm not sure exactly what I did, but I got the inline images working for the most part... I turned off custom sizes with img_assist and called the modules file seperately... I do still have the print $styles line in the head. Will this cover me?

Thanks for the feedback.