May you all live in peace!
I am developing a css layout for a Moodle course. I developed css and html for the purose and it works great. The files are attached for review. But when I put css in user_styles.css and html to a web resource There is a gap between top image and rest of layout as shown in screenshot attached.
Note: I could not attach css and html files due to size restrictions.
Can anyone please suggest, what is the cause of this gap and how to correct it?
Thanks.
Hi Mahtab,
Is this Moodle 1.9 or Moodle 2.
Have you tried using Firebug which is a Firefox add-on.
To me it looks like a margin or padding issue.
If you look at the top of the page, which looks to be using rounded corners where the image is set in a div, then have you made sure that div is margin: 0 and padding: 0; ? It could be as simple as that or a margin set in the footer can affect the header.
It would be better seeing the css for this. Can you just upload the CSS?
Thanks
Mary
May you live in peace Mary!
I was really expecting a reply from you.
I have used firebug to determine the cause but could not find any. Firebug does not consider this white space a part of any particular div.
It is Moodle 1.9. I am sending css and html as well but not the images as they will not upload due to size limitations. css related to this layout is at the bottom.
To me it appears that some css native setting of Moodle is causing such issue but not sure.
Waiting anxiously for your expert advise.
Mahtab
generally when firebug can't/won't target a specific whitespace it's a result of some other element that's been floated not being cleared properly
May you live in peace Daniel,
Thanks for your mentioning. Have you had a chance to view css and html code? If you could indicate what the problem is, it would be great.
Thanks.
Mahtab - may seem like a silly question, but just for completeness, can you confirm that the top image used is actually 22px high as declared in the inline style for the top image in the html.
You may also want to consider adding the #screen_box selector to all of the css rules you have inside the screen_box wrap so that rule changes made here are not affecting other areas of your moodle site (e.g. h1 and h2 are set to 30px and 22px in the businesskit section of your css, but are previously set as 1.7em and 1.4 em respectively at the top of the css) - this may not affect your problem directly but it may show up eventually in other areas of the site - such as the second declaration for #logo with different margin-top declarations.
Richard
May you live in peace Richard!
Thanks a lot for your help.
The image is actually 22px. I personally feel that the issue is due to some conflict between current implementation and moodle's native css code. So, it would be a better idea to put #screen_box selector for all definitions of layout.
Thank you once again. I shall update you people after giving it a try.
Regards
Mahtab
