Download & Extend
FriendsElectric » Issues

The <pre> html tag breaks the layout

Posted by Stolz on October 19, 2005 at 4:21pm
Project:FriendsElectric
Version:4.6.x-1.x-dev
Component:Browser bugs
Category:bug report
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

Whenever I use the tag '<code></pre>' the layout becomes broken on Mozilla Firefox. It only happens with the FriendsElectric theme. I've tried with Konqueror and it works like a charm.

No matter where I insert the tag, it always brokes something in some way. That is just an example of code, but there are serveral others wich you can try to see the effect:

Sample text 1
<ul><li>Sample text 2
<pre>A
B
C
D
E
  • Sample text 3
  • Sample text 4

    • Sample text 5

    It should look like that picture: http://img408.imageshack.us/img408/8492/good5ww.png
    But actually it look like that other one: http://img408.imageshack.us/img408/6969/bad3af.png :(

    I really like FriendsElectric and I use to use a lot of '<pre></pre>' tags. It would be great if someone could fix it.

    Thanks in advance.

    AttachmentSize
    good.png143.31 KB
    Login or register to post comments

    Comments

    #1

    Posted by Steven on October 19, 2005 at 4:27pm

    FriendsElectric contains code for scrollable code boxes, which works fine for me:
    http://www.acko.net/friendselectric

    #2

    Posted by Stolz on October 20, 2005 at 9:52am

    Thanks for your informatition, Steven.

    Well. I think I've found what causes the problem.

    That is the default definition for the <pre> tag at FriendsElectric's style.css :

    pre {
      clear: both;
      float: left;
      overflow: auto;
      _overflow-y: hidden;
      background: #f8fbfc;
      margin: 0px;
      padding: 8px 5px 18px;
      min-height: 3em;
      width: 95%;
      border: 1px solid #bfd0d9;
    }

    Changing it to the next did the trick :)

    pre {
      clear: both;
      #float: left;
      overflow: auto;
      _overflow-y: hidden;
      background: #f8fbfc;
      margin: 0px;
      padding: 8px 5px 18px;
      min-height: 3em;
      width: 95%;
      border: 1px solid #bfd0d9;
    }

    It seems Firefox doesn't like the float: left; tag.

    Hope it helps.