Line numbers cut off in certain themes
hass - December 26, 2008 - 11:01
| Project: | GeSHi Filter for syntax highlighting |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | soxofaan |
| Status: | closed |
Description
I saw the line numbers 2x are cutted off in front. See the attached screenshot (Firefox 3.0.5). It seems to be caused by the following CSS style, but the same is working well in IE7. A value of 1.04em works. Aside if the line numbers are growing over 99 the 3 digit goes also hidden:
div.geshifilter > pre ol, div.geshifilter > div ol
padding-left:1.0em;
}Repro code:
[php line_numbering=1 linenumbers_start=98]
<?php
print "test 1";
print "test 2";
print "test 3";
print "test 4";
print "test 5";
print "test 6";
print "test 7";
?>
[/php]| Attachment | Size |
|---|---|
| geshi_line_number_cut_off.png | 1.89 KB |
#1
Not to forget I'm using an external CSS file.
Aside - is this
line_numbering=1 linenumbers_start=98somewhere documented? I reviewed the code to figure out... this was very time consuming. Would be great if the available features would be documented - I think there are more and the GeSHi docu doesn't help here as this seems to be Drupal module specific.#2
#3
The cut off with 3 digit's or more happens in IE, too.
#4
I can't reproduce with FireFox 3, nor Opera 9.51 on Mac OS X
From you screenshot, it appears you're on Windows, is that right?
Also, I guess it is theme related, what theme do you use? (I used Garland to test)
Currently, it's documented in the filter tips (example.com/?q=filter/tips).
But also check out #272435: Usability tweaks for admin (which e.g. put some simple usage examples in the README file)
#5
Yes, I tried this with Firefox. In IE7 it was ok with two digits, but not with 3 if line numbers grow about a value of 99. I'm using the YAML Admin theme (http://www.yaml-fuer-drupal.de/de/download).
#6
Found the source, but don't understand why...
If this margin is set the numbers go hidden:
.geshifilter ol {margin:0;
}
If I remove the above the below takes precedence and it works as it should. This is part of the global theme reset styles that makes all browsers behave the same way.
ul, ol, dl {margin:0 0 1em 1em;
}
Do you really need to set the margin for
.geshifilter ol?#7
Traced it down... it's
.geshifilter ol { margin-left: 0; }that causes this issues.#8
How about changing:
.geshifilter ol {line-height:1.3;
margin:0;
}
to:
.geshifilter ol {line-height:1.3;
margin-top:0;
margin-bottom:0;
}
I have not seen any diff's in UI except this two values in Garland...
#9
what about
.geshifilter ol {line-height: 1.3;
margin: 0 inherit;
}
?
#10
Seems not working as expected. The bottom style is not overridden to the value 0 for example. I also tried using
margin: 0 0 0 inherit;, but this isn't working too. No idea why this don't work...#11
I have the same prblem with Analytic theme (http://drupal.org/project/analytic). Client is Firefox 3.0.10 on Windows
Change the padding-left to "2em" works.
div.geshifilter > pre ol, div.geshifilter > div ol {padding-left: 2em;
}
But change "inherit" doesn't work.
.geshifilter ol {line-height: 1.3;
margin: 0 inherit;
}
ps: Garland theme is ok.
#12
I've been working a bit on the CSS rules for GeSHi filter code blocks and think I found the necessary CSS-resets to make line numbering work in most themes.
See patch in attachment
It also incorporates some smaller fixes for other related issues (e.g. #549594: Code is added next line down from line numbers)
I hope someone can try if it works for his setup/theme.
#13
Because this issue is blocking some other work, I decided to commit the patch from #12
http://drupal.org/cvs?commit=252226
it makes the CSS cleaner anyway and should make GeSHi filter code blocks a bit more robust against various themes.
Follow up reports/patches are welcome, so please reopen the issue if you still have problems with your theme/setup.
E.g. With the Acquia Slate theme, the CSS resets for the ol/li elements do not work (because Acquia Slate uses very specific rules). I could add !important rules to solve this, but I'd like to avoid !important-hacks, the issue with Acquia Slate is very minor anyway.
#14
Automatically closed -- issue fixed for 2 weeks with no activity.