[TYPO3-content-rendering] New and improved css_styled_imgtext

Mon Sep 12 20:39:52 CEST 2005

>>> CSS with MacOS-IE: About MacOS-IE I say "ouuuuuuchhh". Meaning:
>>> yeah, it sucks. I haven't got PearPC working on my PC yet so I
>>> cannot install or test with MacOS.
>
>> But it is possible to create a crossbrowser output that will work in
>> MacOs-IE too.
>> We already did something like that and it worked perfectly fine.
>> Maybe you have to reconsider the CSS concept.
>
> What does the IE-Mac bugs has to do with the "CSS concept"? :) I'm not
> saying it can't be done, I'm saying it sucks.

You should use a concept that can work regardless of any bugs and (if
possible) without any special CSS hacks.
Especially the box model problems have to be solved by using _either_
padding/border or _width/height_ for every element.

>>> Stefan said the "INTEXT left", which can
>>> only be http://www.typo3-anbieter.de/de/csi/#948, "it actually does
>>> 2cols". Well, if this is really the case, fine, because 2-cols is
>>> what I wanted to do there! :) In the content object I selected
>>> "Columns: 2" in this element.
>
>> The problem is that the position of this element is too high.
>> It covers a part of the element above which might be looking nice in
>> this case but is not the desired result.
>> Each element has it's own div container and there should be no part
>> of other elements overlapping this container.
>
> The layouting of intext-left and intext-right has always been like
> that, even in the table-based solution from TYPO3s own IMGTEXT. If
> there are images left, the next content element will be placed right
> after the *text* and not after all images.

Yes - and this has always been a "bug" in IMGTEXT even though it might
produce quite good looking results.

>>> CSS in IE: The calculation of width for the whole images to wrap are
>>> based on a working box-model, which IE is known not to master in
>>> "quirks" mode.
>
>> You could easily solve that problem like this:
>> Define the width and/or margins in one box while defining padding
>> and/or borders in another box that has no value for width.
>
> Could you provide an example, please? See:
>
>   http://www.typo3-anbieter.de/de/csi/borders/
>
> This is the problem: In Firefox, the spacing between the borders is
> 6px. In IE, the spacing is 10px. Could you solve that problem without
> adding any tag to XHTML, just using CSS?

Very easy to do (but I have to admit it's not very well known).
AFAIK the parameters width and height are still allowed for <img> tags.
This means: The image gets it's width and height from HTML and _not_ from
CSS.
This is the only case where the box model bug is not "active".
So you can assign a border to the image using CSS.

This is a sample HTML code:

<html>
  <head>
    <link rel="stylesheet" type="text/CSS" href="bordertest.css">
  </head>
  <body>
    <div class="imagecontainer">
      <dl>
 <dd>
          <img src="23dc952d92.jpg" width="89" height="67" />
 </dd>
 <dt>
          Imagecaption
 </dt>
      </dl>
      <dl>
 <dd>
          <img src="23dc952d92.jpg" width="89" height="67" />
 </dd>
 <dt>
          Imagecaption
 </dt>
      </dl>
      <dl>
 <dd>
          <img src="23dc952d92.jpg" width="89" height="67" />
 </dd>
 <dt>
          Imagecaption
 </dt>
      </dl>
      <dl>
 <dd>
          <img src="23dc952d92.jpg" width="89" height="67" />
 </dd>
 <dt>
          Imagecaption
 </dt>
      </dl>
    </div>
  </body>
</html>

and this a sample CSS for it:

html,body {
 margin:0;
 padding:0;
 border:0;
}

div.imagecontainer {
 margin:0;
 padding:0;
 border:0;
 min-height:1px;
}

dl {
 margin:0;
 padding:0;
 border:0;
 display:block;
 float:left;
}

dd {
 margin:0;
 margin-right:10px;
 padding:0;
 border:0;
 width:93px;
 display:block;
}

dd img {
 margin:0;
 padding:0;
 border:0;
 border:2px solid red;
}

dt {
 margin:0;
 padding:0;
 border:0;
 display:block;
}

As you can see: No additional HTML-Tag needed.

Joey

-- 
Wenn man keine Ahnung hat: Einfach mal Fresse halten!
(If you have no clues: simply shut your knob sometimes!)
Dieter Nuhr, German comedian
openBC: http://www.openbc.com/go/invuid/Jo_Hasenau