git.oblomov.eu Git - ikiwiki/blob - doc/bugs/sidebar_is_obscured_by_recentchanges.mdwn

   1 I've set up a simple sidebar on an otherwise fairly default wiki.  The sidebar uses css float:right and sits above most pages quite nicely.
   2
   3 For example, my wiki's [front](http://www.cse.unsw.edu.au/~cs3431/wiki/) and [news](http://www.cse.unsw.edu.au/~cs3431/wiki/news/) pages show the sidebar nicely floating on top of the background.  (As a side note, I had to add:
   4
   5     #sidebar {
   6         border: 1px solid;
   7         background: white;
   8     }
   9
  10 to <code>local.css</code> to get the border and make sure that the RSS feed's grey title didn't show through on the news page.)
  11
  12 > Hmm the background color setting seems like a change it makes sense to make to
  13 > style.css .. done.
  14 > --[[Joey]]
  15
  16 Unfortunately, the [recentchanges](http://www.cse.unsw.edu.au/~cs3431/wiki/recentchanges/) page doesn't look so nice - the sidebar appears below the recentchanges list.
  17
  18 I don't understand why the sidebar is appearing below the recentchanges inline, but above the news inline.
  19
  20 > I don't see the problem here in firefox 3. The sidebar is at the top of
  21 > both pages. However, it might have to do with the recentchanges page
  22 > itself using floating elements to build up the table-like display. --[[Joey]]
  23
  24 >> I didn't test in firefox.  I now have screenshots for both firefox and safari.  It is still interesting to compare the layout.  The first is quite broken.  The second is only a little broken.  The third is what I was expecting.
  25
  26 Here is a screenshot of the broken behaviour in Safari:
  27
  28 <img src="http://www.cse.unsw.edu.au/~willu/screenshots/safari-1.png" alt="screenshot of broken behaviour in Safari" width="50%" />
  29
  30 Here is a screenshot of the same thing in FireFox.  Notice that while there are no overlaps, there is still a large gap in the layout.
  31
  32 <img src="http://www.cse.unsw.edu.au/~willu/screenshots/firefox-1.png" alt="screenshot of semi-working behaviour in Firefox" width="50%" />
  33
  34 Here is an inline news page (in Safari, but it looks similar in firefox).  I was expecting both of the previous layouts to look like this.
  35
  36 <img src="http://www.cse.unsw.edu.au/~willu/screenshots/safari-2.png" alt="screenshot of working behaviour in Safari" width="50%" />
  37
  38 What really surprises me is WHY this looks any different.  And when you look at style.css you see that recentchanges and sidebar both use float, whereas normal inline pages do not.
  39 Note that in the third (working) screenshot, the top bullet point is wrapped.  This is because the sidebar is floated.
  40
  41 I think there is:
  42
  43   * A display bug in safari, and
  44   * It would be nice to clean up the way recentchanges are displayed so that there isn't a vertical gap for the sidebar.  I'll play with this and see what I can do.
  45
  46 Looked at this a little more.  I've found the following.  Here is my current local.css:
  47
  48     div.recentchanges {
  49         clear: both;
  50         overflow: visible;
  51     }
  52
  53 Adding "clear: both;" makes the recentchanges div start below (as in further down the page) the sidebar.  This makes safari behave like firefox above (changes the 1st screenshot to look more like the 2nd screenshot).
  54
  55 Adding "overflow: visible;"  (or removing "overflow: auto" from style.css) makes the sidebar appear above (as in printed over the top of, not higher up the page) the recentchanges (similar to the third screen shot above).  Unfortunately because ".recentchanges .pagelinks" uses "float: right;" it looks strange in other ways.  For this reason I use the "clear:both;" as well.