I just upgraded to 1.5 and am having a bit of trouble figuring out the problem illustrated below. I'm using a modified version of standardtheme. I've made very few changes to the font styles and this problem existed before those changes. I'm trying to figure out why the links are floating much higher than the text around them in the labels on one of my course pages. I don't see anything in the CSS that would explain this. If anyone has a guess why this is happening, I'd appreciate it.
Note that this isn't happening elsewhere (eg on my main page), just in these labels.
Hi Nicole,
perhaps you try the Firefox extension "View Formatted Source" to see what styles are applied.
It could be, that two relative positioning values are cascaded and therefore the values are added.
If you don't find the source please send me the link. I will be glad to look at your page and see if I find the reason.
Good luck Urs
In reply to Urs Hunkler
Re: Why are the links out of whack in 1.5 theme?
Hi,
I think it is caused by:
.mod-lesson .main a:link, .main a:active, .main a:visited {
font-size:.9em; vertical-align:top;
}
in mod/lesson/styles.php
Shouldn't all those module specific styles begin ALWAYS with the id (#) they belongs to (as they have to "stylise" only a limited number of pages) ?
Doing that we'll avoid a lot of conflicts with global styles (like the ".main a:visited" above) because, if I'm not wrong, mod styles take precedence over the globals and you know what it means under cascade CSS... (a mod style modifying global styles sounds really awful).
Ciao
I think it is caused by:
.mod-lesson .main a:link, .main a:active, .main a:visited {
font-size:.9em; vertical-align:top;
}
in mod/lesson/styles.php
Shouldn't all those module specific styles begin ALWAYS with the id (#) they belongs to (as they have to "stylise" only a limited number of pages) ?
Doing that we'll avoid a lot of conflicts with global styles (like the ".main a:visited" above) because, if I'm not wrong, mod styles take precedence over the globals and you know what it means under cascade CSS... (a mod style modifying global styles sounds really awful).
Ciao
Eloy-I just figured that out myself. Yes, that was the problem. I deleted this entire line from the file and the problem was solved. My impression is that it should read:
.mod-lesson .main a:link, .mod-lesson .main a:active, .mod-lesson .main a:visited {
font-size:.9em; vertical-align:top;
}
But why is the style for lesson kicking in on the main course page anyway? I don't even have any lessons in this course (although I do have the module installed).
.mod-lesson .main a:link, .mod-lesson .main a:active, .mod-lesson .main a:visited {
font-size:.9em; vertical-align:top;
}
But why is the style for lesson kicking in on the main course page anyway? I don't even have any lessons in this course (although I do have the module installed).
Hi Hansen,
only a quick note/question (because I'm not 100% sure).
Shouldn't all those ".mod-lesson" become "#mod-lesson" as they are "id" and not "class" ?
If so, we should allow only # styles in mod styles (ok, we can avoid them but, at least, we can detect them with some sort of checker periodically).
Ciao
only a quick note/question (because I'm not 100% sure).
Shouldn't all those ".mod-lesson" become "#mod-lesson" as they are "id" and not "class" ?
If so, we should allow only # styles in mod styles (ok, we can avoid them but, at least, we can detect them with some sort of checker periodically).
Ciao
I'm actually not clear on what the # means. These themes are quite complex and I've found new things in them I never knew could be done with CSS in terms of the ways the classes are organized. Perhaps Urs will know what to do with it. My impression was that you couldn't abbreviate that way with commas, that you have to spell out everything each time between commas.
In reply to Eloy Lafuente (stronk7)
Re: Why are the links out of whack in 1.5 theme?
by Urs Hunkler -
"Shouldn't all those module specific styles begin ALWAYS with the id (#) they belongs to (as they have to "stylise" only a limited number of pages) ?"
Eloy, the IDs help when you want to address one single page. In lesson for example we have several pages with the ids "#mod-lesson-view", "#mod-lesson-edit" etc. The class ".mod-lesson" helps to format all lesson pages at the same time, which is a big advantage.
.mod-lesson .main a:link, .main a:active, .main a:visited {
font-size:.9em; vertical-align:top;
}
The CSS in mod/lesson/styles.php is unfortunately wrong formatted.
Only the first item .mod-lesson .main a:link addresses the lesson page, the second and third are not limited to .mod-lesson and influence every Moodle page. Every item must contain all divs and classes. It could look like:
.mod-lesson .main a:link,
.mod-lesson .main a:active,
.mod-lesson .main a:visited{
font-size:.9em;
vertical-align:top;
}
I have corrected the file and it is in CVS.
Nicole and Eloy, could you please test if the error has gone after you updated this file. Thank you very much.
Urs
In reply to Urs Hunkler
Re: Why are the links out of whack in 1.5 theme?
Sorry Urs,
I agree 100% with your explanation about the main difference between ids (unique in the page) and classes (multiple allowed).
But some days ago I was reading some info about the differences between ids and classes and how they must be declared/used. And I didn't find any reference about the possibility of use the class (.) character with ids selectors nor the id (#) character with classes selectors.
And it doesn't seem to work by "substrings", i.e. if you define the ".mod-lesson" class or id, every ".mod-lesson-xxxx" don't use such class or id.
I've just done a quick test, building 3 pages with one id and one class and one stylesheet defining them. Only EXACT match is performed (both about the complete name and about the class (.) or id (#) character.
So, in our previous post, I think that the ".mod-lesson" CLASS selector that you built won't match any ID selector nor other selectors whose strings are "longer".
I'm not pretty sure about all this, but both my quick test and w(2+1)c
specs (http://www.w3.org/TR/CSS21/selector.html#class-html) seems to point that syntax cannot be interchanged and name match must be complete.
Any idea? I'm sure that I'm missing something, because it's too much obvious that classes and ids syntax cannot be interchanged... but what am I missing?
Ciao
I agree 100% with your explanation about the main difference between ids (unique in the page) and classes (multiple allowed).
But some days ago I was reading some info about the differences between ids and classes and how they must be declared/used. And I didn't find any reference about the possibility of use the class (.) character with ids selectors nor the id (#) character with classes selectors.
And it doesn't seem to work by "substrings", i.e. if you define the ".mod-lesson" class or id, every ".mod-lesson-xxxx" don't use such class or id.
I've just done a quick test, building 3 pages with one id and one class and one stylesheet defining them. Only EXACT match is performed (both about the complete name and about the class (.) or id (#) character.
So, in our previous post, I think that the ".mod-lesson" CLASS selector that you built won't match any ID selector nor other selectors whose strings are "longer".
I'm not pretty sure about all this, but both my quick test and w(2+1)c
Any idea? I'm sure that I'm missing something, because it's too much obvious that classes and ids syntax cannot be interchanged... but what am I missing?
Ciao
In reply to Eloy Lafuente (stronk7)
Re: Why are the links out of whack in 1.5 theme?
by Urs Hunkler -
Eloy, sorry for having been mistakable. I was a bit short in my explanation. You are right, you can't mix ID and CLASS names. It's just the opposite, you have to be very precise.
If you look at the figure below you see a very reduced structure of the page framework of Moodel pages. Every Moodle page has an explicit ID in the BODY tag. In this case "mod-lesson-view". In addition it is classified by the CLASS "mod-lesson". This CLASS also is part of the BODY tag. This CLASS is the same for all pages which belong to the lesson module.
Now you can use the ID "#mod-lesson-view" to address this individual lesson page alone or the CLASS ".mod-lesson" to address all lesson pages together.
Ok with this point?
Urs
In reply to Urs Hunkler
Re: Why are the links out of whack in 1.5 theme?
Hi Urs,
that was the point.
I didn't see the ".mod-lesson" CLASS in the body tag, so I was assuming that you were using the ".mod-lesson-view" ID is a really strange fashion.
But such fashion was only in my mind (do you want to believe that yesterday I was examining lesson pages and I wasn't able to see such class in the body? And it was there, sure, only my brain negated its existence!
).
Now I see that every "body" has its own class and id selectors and how they can bbe used to modify one exact page (id) or a collection of them (classes).
Thanks for your perfect explanation!!
Ciao
PD: I'm going to the "brainshop" to get a new brain without these "lacks of perception" problem. What exact model do you recommend me?
that was the point.
But such fashion was only in my mind (do you want to believe that yesterday I was examining lesson pages and I wasn't able to see such class in the body? And it was there, sure, only my brain negated its existence!
Now I see that every "body" has its own class and id selectors and how they can bbe used to modify one exact page (id) or a collection of them (classes).
Thanks for your perfect explanation!!
Ciao
PD: I'm going to the "brainshop" to get a new brain without these "lacks of perception" problem. What exact model do you recommend me?