[PATCH] make CSS for docs compatible with IE
Alexander Belchenko
bialix at ukr.net
Tue Sep 26 14:23:07 BST 2006
Aaron Bentley пишет:
Alexander Belchenko wrote:
>> I make changes to font size declaration. This changes makes documents
>> looks almost identical in both browsers. As example see attached
>> ie-patch.png image -- how looks index.htm with new default.css in IE.
>> body {
>> background-color: #ffffff;
>> - color: #303030;
>> + color: #000000;
>> margin-top: 50px;
>> margin-left: 50px;
>> margin-right: 50px;
>> margin-bottom: 70px;
>> font-family: Verdana, Geneva, Arial, sans-serif;
>> - font-size: small;
>> - line-height: 180%
>> + line-height: 180%;
>> }
>>
>> -/* p {
>> - text-indent: 3em
>> -} */
>> +p {
>> + font-size: 85%;
>> +}
>
> It doesn't seem like good style to set the font size for paragraphs,
> because not all text falls in paragraphs, but all body text should have
> the same base attributes. Is there a reason we can't set the font size
> in the body, instead?
It looks like a bad style, I agree. But this is only one way (that I
know and use) to obtain similar results in both browsers.
Declaration "font-size: small" is the root of problem -- it's
interpreted differently in IE and Firefox (I think it's IE bug).
One cross-platform solution that I use for my own site -- it's usage of
size in percent. But this declaration cannot be used in <body> element
because in this case we have bad behaviour in Firefox: <pre> elements
renders with unreadable small font. I don't know how to workaround this.
So I use explicit declaration of font-size for all used elements in our
html files.
> The other font sizes are given in em, which is relative to the parent
> size, so I would expect the rest of your changes to be unnecessary if we
> get the base font size consistent in IE and Firefox.
Size of <Hx> elements changed to save proportions between text and titles.
>
>> -.literal-block {
>> +pre {
>> margin-left: 5em;
>> color: #000000;
>> - font-weight: normal;
>> - background-color: #c1d1ff;
>> background-color: #e5ecf9;
>> border: 1px solid #888888;
>> padding: 1em;
>> - }
>> +}
>
> What's the reason for these changes? Isn't it better to style
> literal-block than pre, since not all preformatted areas are necessarily
> code examples?
It's a part of solution to make preformatted elements renders with
normal font instead of too small one. See above. I check all existing
documents and they all looks good.
I also use 85% instead of 80% (80% is equal to "small" font in Firefox)
because there is another issue with nested <li> elements (used in index
of bzr_man). The 85% make text slightly larger but I think it's not so
critical.
I expect that my changes looks not so good as should be. But it's
naturally workaround because different browsers have different issues.
I'm not guru in CSS -- this solution I found during long experiments.
Any suggestions is appreciated.
--
Alexander
More information about the bazaar
mailing list