[OH-Dev] [issue937] code snippets display weird, in some training missions web pages, in li.raquo_bullets

[Asheesh Laroia]

New submission from Asheesh Laroia <asheesh at asheesh.org>:

On http://openhatch.org/missions/diffpatch/recursive_patch , I see the following 
oddity.

In the bullet beginning with "Unpack the tarball. This will create a familiar..." 
the word "recipes" appears offset to the point where it is partly obscured.

In general, what seems to be happening is that the CODE element should either 
"clear: both;" (in CSS; explained here: 
https://stackoverflow.com/questions/12871710/why-clear-both-css ), or something 
else should be done...

There are two reasonable fixes that I can think of. One would be to apply the 
"clearfix" class to the li.raquo_bullets in that page. Another would be to add 
some CSS rules so that, on this page, the CODE tag is "display: inline;".

You can find which CSS files affect that page by running a local server, then 
doing 'view source'. You'll find that localhost:8000/static/ corresponds to 
mysite/static/.

Oh -- another way to do it is to add a special CSS class to these CODE tags that 
should have the "display: inline;" property. This would require creating a new 
CSS class in our collection of CSS classes, which is a good thing to do 
generally.


To find the right HTML template file, I recommend running this in your terminal:

git grep "This will create a familiar"

You will probably see just one file.


Once you fix it, you'll need to submit a pull request. Feel free to ask Asheesh 
(me, aka paulproteus) for help as you progress through this. Additionally, it 
would be great if you can look at other pages within the "training missions" part 
of the site to see if they suffer from the same problem, and if your fix fixes 
that, too.

Note that there is a general reason that the CODE tag is formatted that way, even 
though it's exhibiting this awful current behavior. The idea is that if a CODE 
tag is really wide, then we want to make sure there is a scrollbar. See 
http://openhatch.org/bugs/issue798 for the origin of this.

----------
keyword: bitesize
messages: 4117
nosy: paulproteus
priority: bug
status: unread
title: code snippets display weird, in some training missions web pages, in li.raquo_bullets

__________________________________________
Roundup issue tracker <bugs at openhatch.org>
<https://openhatch.org/bugs/issue937>
__________________________________________