[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