Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Minor Minor
    • Resolution: Not a bug
    • Affects Version/s: 2.3.1
    • Fix Version/s: None
    • Component/s: Themes
    • Labels:
    • Affected Branches:
      MOODLE_23_STABLE
    • Rank:
      43190

      Description

      On every page of moodle there is a #maincontent in the HTML. Normally, you might expect this to be a div that wraps around the main content. But in Moodle it is an empty <span> that is set to {{display: block;height: 1px;overflow: hidden;} so it's a usually invisible line at the top of each page's content.

      The only use I've found (while looking at MDL-34687) is an over-elaborate way of setting the width of embedded objects. It's possible this is some old hack to fix IE6, but can probably be removed now.

        Activity

        Hide
        David Scotson added a comment -

        A second use is the skiplink at the top of the body section, which lets alternative browsers jump to the main content. It stills seems more sensible to have a div that wraps the main content and jump to that but maybe there's some obscure reason why a 1px high span is better for this purpose?

        Show
        David Scotson added a comment - A second use is the skiplink at the top of the body section, which lets alternative browsers jump to the main content. It stills seems more sensible to have a div that wraps the main content and jump to that but maybe there's some obscure reason why a 1px high span is better for this purpose?
        Hide
        Mary Evans added a comment -

        I don't think the term 'hack' is the right way to describe

        <span id="maincontent"></span>

        but I may be wrong. As far as I know it has always been there, even in Moodle 1.9 and probably earlier.

        Show
        Mary Evans added a comment - I don't think the term 'hack' is the right way to describe <span id= "maincontent" ></span> but I may be wrong. As far as I know it has always been there, even in Moodle 1.9 and probably earlier.
        Hide
        Mary Evans added a comment -

        @Petr & Tim
        Just adding you as watchers here as this will be something I am sure you will be able to explain.

        Show
        Mary Evans added a comment - @Petr & Tim Just adding you as watchers here as this will be something I am sure you will be able to explain.
        Hide
        Mary Evans added a comment -

        David, this is not a Theme issue as the main content span is part of the main content output, so themes have no direct control over this.

        Show
        Mary Evans added a comment - David, this is not a Theme issue as the main content span is part of the main content output, so themes have no direct control over this.
        Hide
        Tim Hunt added a comment -

        This is an accessibility thing.

        Near the start of the <body> there is a hidden <a href="#maincontent">Skip to main content</a> link, which appears if you Tab to it using keyboard navigation. This lets someone using a screen-reader get straight to the interesting bit of the page.

        If is a common thing to do. For example, go to http://www.bbc.co.uk/news/ and press the Tab key a few times. (This may not work on a Mac, depending on your Safari settings.)

        So, it is supposed to be like that. I am closing this issue.

        (There are other divs wrapped around the main content with other names.)

        Show
        Tim Hunt added a comment - This is an accessibility thing. Near the start of the <body> there is a hidden <a href="#maincontent">Skip to main content</a> link, which appears if you Tab to it using keyboard navigation. This lets someone using a screen-reader get straight to the interesting bit of the page. If is a common thing to do. For example, go to http://www.bbc.co.uk/news/ and press the Tab key a few times. (This may not work on a Mac, depending on your Safari settings.) So, it is supposed to be like that. I am closing this issue. (There are other divs wrapped around the main content with other names.)
        Hide
        David Scotson added a comment - - edited

        I note that the BBC are using a div (with id=main-content) which is in fact wrapped around the main content, not an otherwise unused, empty and hidden span that comes just before the main content, as a result it indicates both the start and the end of the main-content and allows the main content to by styled with padding, margins etc and be used to specify further items within it (e.g. a link within the content might be treated differently from one in the header or footer). That is, as far as I'm aware, the standard way to do it, though whether the Moodle way has any benefits compared with that I'm not sure. Certainly it has the drawback of not being immediately clear in its purpose to someone working on a theme.

        If it was up to me I'd combine the two functions into a single div, like the BBC has.

        Also, regarding the word "hack", I didn't mean it disrespectfully, just that whenever you find something odd in an old HTML codebase, the reason it's there is 9 times out of 10 because IE6 wouldn't work correctly unless you did it like that, even if it doesn't make any logical sense. I thought it might have been the case here too because there wasn't any other immediately obvious reason for it to be there.

        It seems the Moodle.org theme hides the span completely by setting height: 0px, presumably because someone ended up with an extra pixel of padding at the top of the .region content that they couldn't get rid of otherwise. I was wary of changing the height of this because generally, when something is set to 1px height rather than 0px, there's something that goes wrong when you change that last pixel. If it's been tested widely and found to work then maybe that change could be moved to the base theme?

        Show
        David Scotson added a comment - - edited I note that the BBC are using a div (with id=main-content) which is in fact wrapped around the main content, not an otherwise unused, empty and hidden span that comes just before the main content, as a result it indicates both the start and the end of the main-content and allows the main content to by styled with padding, margins etc and be used to specify further items within it (e.g. a link within the content might be treated differently from one in the header or footer). That is, as far as I'm aware, the standard way to do it, though whether the Moodle way has any benefits compared with that I'm not sure. Certainly it has the drawback of not being immediately clear in its purpose to someone working on a theme. If it was up to me I'd combine the two functions into a single div, like the BBC has. Also, regarding the word "hack", I didn't mean it disrespectfully, just that whenever you find something odd in an old HTML codebase, the reason it's there is 9 times out of 10 because IE6 wouldn't work correctly unless you did it like that, even if it doesn't make any logical sense. I thought it might have been the case here too because there wasn't any other immediately obvious reason for it to be there. It seems the Moodle.org theme hides the span completely by setting height: 0px, presumably because someone ended up with an extra pixel of padding at the top of the .region content that they couldn't get rid of otherwise. I was wary of changing the height of this because generally, when something is set to 1px height rather than 0px, there's something that goes wrong when you change that last pixel. If it's been tested widely and found to work then maybe that change could be moved to the base theme?
        Hide
        Mary Evans added a comment -

        @David

        Well this is something new that I have learned, so thanks for bringing this to my attention.

        If that is the sole purpose of the maincontent span, then YES perhaps it should be changed. I don't see why we could not allow region-main to be renamed to <div id="main-content">. In fact I am surprised no one has queried this before, although I had thought to once but gave up on the idea as I tend to feel you can get talked down to if you rock the boat a bit. But looking back in retrospect perhaps I should have done!

        Anyway this issue is now closed, but we can continue this discussion in the theme's forum should you wish. I see you have started one with the BOOTSTRAP idea. But that is being met with doubts for Moodle.

        I think this is perhaps why I suggested there be a Moodle Design Team with real web designers not just amateurs like me who 'help' out because I want to see Moodle succeed. How themes look as well as work correctly is a designers job, not a developers one, which is probably why the maincontent span came into being in the first place.

        Show
        Mary Evans added a comment - @David Well this is something new that I have learned, so thanks for bringing this to my attention. If that is the sole purpose of the maincontent span, then YES perhaps it should be changed. I don't see why we could not allow region-main to be renamed to <div id="main-content">. In fact I am surprised no one has queried this before, although I had thought to once but gave up on the idea as I tend to feel you can get talked down to if you rock the boat a bit. But looking back in retrospect perhaps I should have done! Anyway this issue is now closed, but we can continue this discussion in the theme's forum should you wish. I see you have started one with the BOOTSTRAP idea. But that is being met with doubts for Moodle. I think this is perhaps why I suggested there be a Moodle Design Team with real web designers not just amateurs like me who 'help' out because I want to see Moodle succeed. How themes look as well as work correctly is a designers job, not a developers one, which is probably why the maincontent span came into being in the first place.
        Hide
        Tim Hunt added a comment -

        I think it is better to keep the two functions - the place to go to stip to the start of the main content, and the div that wraps around the main content, separate. It is not the most elegant design, but it is more flexible, which is a pluggable system like Moodle is better. E.g. there may be some theme where the main content is not naturally wrapped in one div.

        And I think the ids id="region-main" and id="maincontent" are good enough. Re-naming them would probably just annoy many theme designers for little gain.

        Show
        Tim Hunt added a comment - I think it is better to keep the two functions - the place to go to stip to the start of the main content, and the div that wraps around the main content, separate. It is not the most elegant design, but it is more flexible, which is a pluggable system like Moodle is better. E.g. there may be some theme where the main content is not naturally wrapped in one div. And I think the ids id="region-main" and id="maincontent" are good enough. Re-naming them would probably just annoy many theme designers for little gain.

          People

          • Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: