Style sheet and inline styling advice.

Kat se gat · Post by **Kat se gat** » Mon Mar 02, 2015 3:26 pm

Let's say I have this in a topic: <img src="../Resources/Images/Test999.png" class="FiftyPercent" float="right" />

And the stylesheet contains this:

img.FiftyPercent
{
max-width: 50%;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}

I was under the impression that inline styling takes precedence over a stylesheet class? I added an inline float=right but it does nothing. The paragraphs continue to follow on after the image, not floating around it. If I add a float statement into the stylesheet the text floats as I expected. If the stylesheet doesn't contain a property for float it inherits whatever is further up the style chain? In which case, shouldn't my inline styling have overridden any other value (default or specified)? Maybe I missed something important?

wclass · Post by **wclass** » Mon Mar 02, 2015 10:56 pm

Looks like a syntax problem. Try

<img src="../Resources/Images/Test999.png" class="FiftyPercent" style="float: right" />

Kat se gat · Post by **Kat se gat** » Tue Mar 03, 2015 2:18 am

Thanks Margaret. That was the answer.

I suspected there might have been a syntax issue but didn't know why. I was reluctant to add another style sheet class for something that affects a few images only.

Post by **Nita Beck** » Tue Mar 03, 2015 4:46 am

Kat se gat wrote:I was reluctant to add another style sheet class for something that affects a few images only.

Were I you, I'd definitely add this to my stylesheet. There might be only three images today that need to float right, but there could be more in future.

By the way, in your code for img.FiftyPercent, you really mean 50% of whatever container an image is in? So if you've got an image in a div that is only 2 inches wide, you'd want the image to be 1 inch wide? I think you've got the right idea; I just question the use of a percentage for max-width.

Kat se gat · Post by **Kat se gat** » Tue Mar 03, 2015 6:06 am

Nita, I'm not sure if I added that 50% image class or if it was there when I created the project using the template. I've obviously learned bad habits hence my flurry of posts over the last month or so. I'm hoping my project structure and use of style sheets will get better as I go along. Since I've put the time into learning Flare in much more detail then so it exposes glaring shortfalls in other areas. Hey-ho, the path of true love ne'er did run smooth.

Thanks for pointing out a problem with image percentages and how containers affect them. I never knew that. I made the assumption if Madcap provided others like it in the style sheet then it had to be good for me as well.

Post by **Nita Beck** » Tue Mar 03, 2015 6:39 am

Re the max-width percentage, others might think it's just fine. But I did want to point out that a percentage means a percentage of the container. People don't realize that. They think it means a percentage of the image's original size, such that if an image is 400px wide, then it'll be 200px wide in output if set to a max-width of 50%. But that's not how the CSS works.

Kat se gat · Post by **Kat se gat** » Tue Mar 03, 2015 8:52 am

Would I be right in thinking that if my image goes in as a normal page oriented paragraph then it would be roughly 50% of the page width, excluding margins and so on? I haven't consciously added any other containers except those dangling from the <body> element. I do have some images in a bulleted list but nothing more complex than that.

Post by **Nita Beck** » Tue Mar 03, 2015 9:51 am

You've generally got it, yes. But it's not the page width, it's the body frame's width, which is where your content will be rendered. Say your page layout has a page that is 8.5 inches wide but has a body frame that is 7 inches wide. If your <body> or <p> styles don't set any particular width, and if you've got images tagged with img.FiftyPercent with a max-width of 50%, the maximum width of any of those images, when contained by a <p>, will be 3.5 inches wide in your generated print output. But if you've got one of those images in, say, a cell in a table column that is set to be 200px wide, then the max-width of the image in generated output would be 100px wide.

This is why I think controlling the widths of images by way of a max-width percentage is a bit tricky. You always need to ask "percentage of WHAT?"

Kat se gat · Post by **Kat se gat** » Tue Mar 03, 2015 10:54 am

Understood. But not quite over and out...

1. Using your table example, if a column is 200px wide what happens if the image is 500px and you don't use a percentage to resize it? Does it automatically scale the image down to fit the column or does the column adjust to the image or is it cropped? I won't be able to investigate that myself as I haven't even started on tables.

2. If you set the image's max-width to 100px, for example and the column is resized to 300px does that mean the image will still only be 100px wide?

3. If you want the image to resize regardless what the container does would you remove the max-width entirely or use some other style attribute instead?

4. Is there any compelling reason to specify widths in pixels? Most of the examples I've seen only use px units but there are ems and I think, mm, cm, inches as well. I'd like to ask if px is the preferred unit or chosen for convenience.

Post by **Nita Beck** » Tue Mar 03, 2015 2:34 pm

Kat se gat wrote:Understood. But not quite over and out...

1. Using your table example, if a column is 200px wide what happens if the image is 500px and you don't use a percentage to resize it? Does it automatically scale the image down to fit the column or does the column adjust to the image or is it cropped? I won't be able to investigate that myself as I haven't even started on tables.

2. If you set the image's max-width to 100px, for example and the column is resized to 300px does that mean the image will still only be 100px wide?

3. If you want the image to resize regardless what the container does would you remove the max-width entirely or use some other style attribute instead?

4. Is there any compelling reason to specify widths in pixels? Most of the examples I've seen only use px units but there are ems and I think, mm, cm, inches as well. I'd like to ask if px is the preferred unit or chosen for convenience.

(Caveat: I'm actually not a CSS expert although I play one on TV.)

1. Not sure, but I think that the image will appear to be cut off on the right. If your column's width is 200px, that's all the room available to display the image.

2. Don't confuse width and max-width. If the image is, say, 50px wide and you've applied an img style to it that specifies that an image's max-width is 100px, your image will still be displayed as 50px. The max-width setting doesn't make it grow; it just confines it not being any wider that 100px when displayed. So if another image was 120px wide and you applied the img style that specifies a max-width of 100px, it'll be displayed shrunk to 100px.

3. I don't necessarily have an elegant solution for you. But maybe answer to #4 will shed some (perhaps different) light.

4. I've used px in my examples in this post because I do think of images as being Xpx tall by Ypx wide. However, there's nothing saying you can't use a different measure of unit. For example, say that in a stylesheet I use for print output, I set the max-width of the img class to 8.0in, meaning that no image will ever be wider than 8 inches wide. Then I set up a series of img subclasses with which I can resize images as needed: img.ThreeQuarters (max-width 6.0in), img.TwoThirds (max-width 5.2in), img.OneHalf (max-width 4.0in), img.OneThird (max-width 2.8in), and img.OneQuarter (max-width 2.0in).

What's useful (at least to me) using this method, I can define the same set of classes for use for online output, where the units and number of units might be pixels, as in, the img class is set to a max-width of 900px, and the subclasses are set to whatever is their corresponding, calculated fraction of 900px, as in img.ThreeQuarters is set to a max-width of 675px.

Not sure this is helpful, but I thought I'd at least explain my convention. It has worked well.

Paul Pehrson has talked about creating a Capture profile to set a scale factor that will resize an image to which that profile is applied. That might be another option for resizing your images. I've tried it, and although I totally get what Capture is doing, I have to admit that I did not quite like the results.

Kat se gat · Post by **Kat se gat** » Tue Mar 03, 2015 2:51 pm

Nita Beck wrote:Paul Pehrson has talked about creating a Capture profile to set a scale factor that will resize an image to which that profile is applied. That might be another option for resizing your images. I've tried it, and although I totally get what Capture is doing, I have to admit that I did not quite like the results.

I think I might have watched a vid by him yesterday, at least I think it was him. T'was very good. I think I will have to defer all this nattering about images and tables until such time as I can start playing with them.

MadCap Software Forums

Style sheet and inline styling advice.

Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.

Re: Style sheet and inline styling advice.