David Scotson

Reminder now that Moodle.org has a Bootstrap-based theme you can use Bootstrap constructs to spice up your HTML with some of their CSS components.

Like:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

or

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
	Mark	Otto	@TwBootstrap
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

and so on.

Actually, this reminds me of an early error I had with Bootstrap where the .label (in Moodle terms the bit that you add between resources) was picking up the styles from Bootstrap's labels (which look like this: http://getbootstrap.com/2.3.2/components.html#labels-badges)

In fact, with the new theme I might be able to demonstrate:



Which by default have a grey background, with white text, and they set the white-space to no-wrap which makes things turn into one big line.

But, it seems weird if you're getting that in multiple different themes, most of which have no Bootstrap CSS in them.

I notice you're pulling in the Font Awesome from the BootstrapCDN, you didn't accidentally bring in the standard Bootstrap CSS too?

If you right click directly on the white text, and choose the option that says something like "Examine Element" the bottom left area of your screenshot should highlight the specific div or p tag and the bottom right area (where it says "styles") should show exactly where the color: white is coming from (though you might need to scroll down that little window if it's been inherited from an item further up the chain).

Does it only happen on hover? In that case, you also need to click on the little dashed square with the arrow in it (to the right of "element.style") and then select hover, after selecting the appropriate item on the page.

Is this site on an intranet?

Usually if IE9 isn't being responsive it's because it's gone into IE7 compatability mode.

You can check that by hitting F12 in IE, it'll say something like "Browser Mode: IE9 Document Mode: IE9" near the top of the window.

But it could well be the same issue I mentioned before. If the last bits of the CSS are getting cut off, then responsiveness would be one of the first things to go.

Can you try adding something like body {background-color: green} to the customcss in Clean and seeing if it shows up in browsers other than IE9, that's probably the quickest way to check if the end of the CSS is getting cut off.

Yeah, I think I've hit this before and think you'll end up fighting with inconsistent behavior between different browsers.

In theory you should be able to set the images as a percentage fraction of the total width you want to fill, and they'll shrink to fit but I seem to recall that when space gets really tight the different browsers do subtly different things to cope (and using tables to layout things make it worse, because decisions browsers make that would work for a table of data which is often short textual or numerical entries, don't make as much sense when people are using them to layout paragraphs of text, or rows of images).

One Bootstrap related wrinkle is that it sets max-width: 100% on img to try and get the kind of behaviour you expect (images shrinking to fit the size of their container) but it seems to interact oddly in some circumstances, particularly with IE.