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.

    CommentFileSizeAuthor
    good.png143.31 KBStolz

    Comments

    Steven’s picture

    Steven commented

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

    Stolz’s picture

    Stolz commented

    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.