CSS Div class - could someone tell me what's wrong here?

[straygoat]

Hello

I've got a problem with our HTML5 output, and I'm sure it is CSS related. I'm self-taught with CSS and I'm a bit baffled by this. What we have is:

In stylesheet:

div.Example
{
background-color: #ddddfa;
padding-top: 2.00em;
padding-right: 2.00em;
padding-left: 2.00em;
padding-bottom: 2.00em;
}

In topic:

<div class="Example"><b>Example:</b><p class="Image"><img src="Figures/HistoricStream.png" alt="Stream for Events" /></p></div>


This is supposed to apply a purple/blue background to div.example. It works fine within Flare, but doesn’t work in any browsers (including in the Flare skin). I expected that everything in the <div> would have the coloured background.

Can anyone point out the error in my ways?

Thanks

[NorthEast]

I can't see anything wrong with that extract; if you put that in an empty stylesheet it'd work.
Class (and ID) names are case-sensitive, but "Example" matches ok in your example.

Also, bear in mind what you see in the editor will only represent one of your targets; so perhaps check that your target isn't set to use a different stylesheet or medium to what you expect.

[straygoat]

Thanks Dave. I'll double-check the target and the case in the topics...i'm fairly sure they are right though. Oh well, another day, another support ticket.

If I find out what is wrong and it's not the case or target, I'll post the answer later.

[kwag_myers]

I pasted your code into a stylesheet and topic. The output shows a purple background in both FF and IE.

This is just a long-shot, but something I had trouble with. Open your CSS in Notepad (you can do this from the context menu of the Content Explorer) and see if your div.Example syntax is wrapped in a @media tag. It looks something like this:

Code: Select all

@media print
{
     div.Example
    {
	background-color: #ddddfa;
	padding-top: 2.00em;
	padding-right: 2.00em;
	padding-left: 2.00em;
	padding-bottom: 2.00em;
    }
}

If so, copy and paste the style syntax outside the @media wrapper, save, and do another build.

[sfoley]

A couple possibilities I would try:

1. CSS Inheritance. If another rule or selector in your stylesheet has greater specificity, it can override the rule you pasted here. To check this, use a web developer tool like Firebug (works best on Firefox, but there are versions available for Chrome and IE) to inspect the element and see which CSS rules the browser thinks apply to the element. The easy way to fix this is just to add !important to your background-color rule:

Code: Select all

div.Example { background-color: #ddddfa !important; }

2. Syntax. Use a CSS validator to make sure there isn't a rule somewhere else that is missing a semicolon, an unclosed comment, etc. Syntax errors often cause rules after the error to stop working.

3. As kwag_meyers noted, you might have the rule you pasted inside an @media section. Make sure that:
(a) if your rule is in an @media section, it is the correct section (the media should be 'screen', or not in any @media section at all);
(b) your target in Flare is set up to use the correct medium (open target > Advanced > Stylesheet Medium section);
(c) you don't have an identical CSS selector and rule in a different @media section that is overriding this one.

Incidentally, you should consider using mc-auto-number-format for your "Example:" text at the beginning of those paragraphs.

(Edit: enabled BBcode.)

[kwag_myers]

Incidentally, you should consider using mc-auto-number-format for your "Example:" text at the beginning of those paragraphs.

So THAT's how it's done! I've been playing around with the content property with no success. I do something similar for notes. Just be sure to include a space before the closing tag:

Code: Select all

{b}Example: {/b}

Thanks for the tip, sfoley!

[LTinker68]

BTW, you didn't post the code for the p.Image style. If it has a background color, as well, then that will override the color specified in the div.Example style because the paragraph tag is closer to the content than the div tag. The rule is, whichever style is closest to the content wins.

Does your p.Image style have any background color specified, and if not, do you have one for your base <p> tag?

[sfoley]

BTW, you didn't post the code for the p.Image style. If it has a background color, as well, then that will override the color specified in the div.Example style because the paragraph tag is closer to the content than the div tag. The rule is, whichever style is closest to the content wins.

Not in this case: the relevant content is the "Example:" text, which is inside the div (not the paragraph). No matter what style rules were attached to p, the div background color would always be visible underneath that text.

To expand on my suggestion from last time, straygoat, you can wrap your example images in this paragraph style to avoid potential nesting problems, as well as save yourself typing "Example" every time:

Code: Select all

p.Example {
    background: #ddddfa;
    padding: 2em;
    mc-auto-number-format: "{b}Example: {/b}";
    mc-auto-number-position: inside-head;
}

If you need the images to start on a new line, you can also handle that automatically:

Code: Select all

p.Example img {
    display: block;
}

[straygoat]

Thanks. I will look into these possible problems when I get in to work tomorrow.

I have checked the right medium is applied to the target so it isn't that. The p image class doesn't have any background colour, so it isn't that, and the DIV would still be seen behind it (as pointed out).

With the p.example way of doing it (instead of DIV), will that give me white space between paragraphs? Some of our examples are several paragraphs long and I need the background colour to cover the whole area, without white gaps between paragraphs.

There's a reason I didn't use the auto-number - we have imported hundreds of topics and the word 'example' is already in place. I just want the div to apply the colour background to the existing examples.Writing 'example' each time is only an issue for new content, but it will be less work than going through all of our existing topics and changing them before altering the stylesheet.

I'll be back tomorrow when I've tried a few things.

[sfoley]

With the p.example way of doing it (instead of DIV), will that give me white space between paragraphs? Some of our examples are several paragraphs long and I need the background colour to cover the whole area, without white gaps between paragraphs.

Three ways to handle that:
1. Continue using a div as a container for all of the examples.
2. Use CSS to remove the top and bottom margins from p.Example:

Code: Select all

p.Example { margin: 0em auto; }

3. Use line breaks to add space in the example.

You can also combine #1 and #2:

Code: Select all

p.Example {
    ...(stuff)...
}
div p.Example {
    margin: 0em auto;
}

This way, your Example paragraphs continue to have their usual margins when solo, but have no margins when inside a div. If you need additional spacing for those Example paragraphs when inside a div, add padding to the top and/or bottom, instead of margins.

[LTinker68]

Not in this case: the relevant content is the "Example:" text, which is inside the div (not the paragraph). No matter what style rules were attached to p, the div background color would always be visible underneath that text.

I didn't see anything in the original post that indicated which parts of the text had the background color and which didn't. The text within the p.Image was the logical assumption, since it was a tag within a tag and the most likely scenario was that the inner tag's background style was overriding the parent tag's style.

With the p.example way of doing it (instead of DIV), will that give me white space between paragraphs? Some of our examples are several paragraphs long and I need the background colour to cover the whole area, without white gaps between paragraphs.

To get separation between paragraphs, specify either a margin-bottom or margin-top value to the paragraph. I tend to go with a bottom margin. So your style would be:

Code: Select all

p.Example {
    background: #ddddfa;
    padding: 2em;
    mc-auto-number-format: "{b}Example: {/b}";
    mc-auto-number-position: inside-head;
    margin-bottom:2em
}

Padding is internal; margin is external. Also, they're not cumulative. So if you put a margin-top of 2em and a margin-bottom of 2em, you wouldn't end up with 4em between two of the same paragraph -- it would just be 2em. But like I said, I tend to apply the bottom margin to all tags, so I'm consistent in how the separation is being controlled and I don't have to worry about a following tag having a top margin.

[LTinker68]

There's a reason I didn't use the auto-number - we have imported hundreds of topics and the word 'example' is already in place.

You can always do a find-and-replace to remove Example from your imported content.

[sfoley]

I didn't see anything in the original post that indicated which parts of the text had the background color and which didn't. The text within the p.Image was the logical assumption, since it was a tag within a tag and the most likely scenario was that the inner tag's background style was overriding the parent tag's style.

In straygoat's example, there is no text within p.Image, which made this scenario fairly unlikely. I was just trying to save straygoat some time.

Padding is internal; margin is external. Also, they're not cumulative.

Sorry, but this isn't quite correct again. Padding is always cumulative, because it is unique to each instance of an element. Margins are not cumulative, as Lisa said, but by default browsers have already added margins to most elements through their internal stylesheets. The background color of an element only extends to its borders:

Code: Select all

<---margin--->border<-----padding----->element<---padding--->border<-----margin----->
                    <--------------background color--------->

So basically, backgrounds on adjacent elements are never visually connected, unless you've already removed their margins.

So, to sum up:
- If you use the div >> p structure and specify a background color only on the div, as in straygoat's first post, then the margins on p are effectively transparent. You just have to make sure that there's nothing else interfering with the background color.
- If you use the div >> p structure but specify the background color only on the p, as I had suggested in my 2nd post, then you need to remove the paragraph margins and use padding for spacing in order to get a solid block of background color.

For more information about how to avoid inconsistencies between those default, internal, browser stylesheets, do a search for "reset stylesheet." These can be more trouble than they're worth, though!

[LTinker68]

Sorry, I meant margins aren't cumulative. I used margins in the explanation, but should have been more clear that it only applied to margins. Padding is, indeed, cumulative.

One other thing to consider... Word doesn't like DIVs, so you might have unpredictable results if you use DIVs and generate Word output. I don't build Word output anymore (I sooo much prefer PDF), but if that's an output type you might build, then try the different options in this thread, but make sure you try them in all outputs you think you'll be building so you make sure whatever solution you select works in all the outputs.

[straygoat]

Thanks. I don't output to Word, just HTML5 and PDF.

Doing a find and replace on the project would work if Flare wasn't so flakey with large projects -it is extremely likely to crash given the size of our project (splitting the project up at this stage is not an option because of time constraints). We'd have to do the find and replace to the htm files outside Flare, which to be honest, is a pain....the DIV should work, so I'll keep looking into why it isn't.

[straygoat]

Hi all, it seems the DIV definition was inside one of the @ media markers. I moved it outside of those and it now works as I originally expected. Thanks everyone!