floating images, again.. TW5

[Shay Shaked]

Hi guys, this is a confusing topic and I saw several entries in this forum. 

I want to have an image floating to the left, but ALSO define a margin (so the text doesn't "touch" the image) and also resize is to 250px. 

I created this in the stylesheet: 

.img-left { float: left; margin-right: 0.5em; width=250; }

in the body of the tidler, I guess I need to include[ img class=img-left; [img[(link here....)]], but it doesn't seem to "catch", the image takes the whole width and seem to ignore my CSS. 

To make things more complicated (why not) there's an annoying "gap" at the bottom of floating images, almost a whole line, before the text starts. I'd like to illiminate it, unless I include a caption, which I usually use upper text ^^ for. Can anyone help me with getitng TW to figure out the CSS? 

[PMario]

Hi Shay,

Drag and drop import the appended json file. It may give you some hints. It contains a HowTo tiddler.

have fun!
mario

[Mat]

I'm guessing this is what pmario's demo is using (I haven't looked) but generally;

Put things in a div and then float and manipulate the div. I.e style it so it has e.g padding or margin. Note you can also use negative margin values (e.g "margin-bottom:-.8em;)

To "hook" floating things so it moves along with a tiddler, see the Hooker Method.

<:-)

[Zaphod Beeblebrox]

This is probably already covered by Mario's HowTo, but my karma just wouldn't be satisfied unless I mentioned it :-P

Your 'width' declaration should be "width: 250;" instead of "width=250;" (that's old-school HTML, not proper CSS, and I think it'll make a difference)

I'm currently battling with image floats myself, but I really wanted to go the route of using Flexbox, as it's so much more versatile, but I can't get it to do what I want it to... :-(

--Zaphod

[Josiah]

CSS3 is absolutely precise.

Browsers aren't.

IF you think it SHOULD work try it in another browser.

Sorting out what is a CSS coding error v. what is a browser inadequacy can speed up development.

I personally use engines that render pages under multiple browsers to avoid faffing about.

As far as TW is concerned it, as far as I know, NEVER messes with CSS. It allows full CSS without issue.

Josiah