FlatPress forums - Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

DavidB — Sun, 13 Apr 2008 08:15:05 +0200

I am using Internet Explorer 7 to look at the Flatpress Official blog http://www.flatpress.org/home/blog.php. The code is having trouble showing the actual code. It is being squished vertically making the code unreadable. I noticed this problem exists on other Flatpress blog sites for both IE6 and IE7. The leggero theme has this problem but the flatmaas2 theme does not. Maybe it is a setting that can be fixed in the CSS.

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

laborix — Sun, 13 Apr 2008 09:31:44 +0200

This appears with IE 5/6/7/8 only if the code has one line. I also know this symptom, but it is only with IE and if the code sample has only one line.

It can be possible came from the converted code-tag to the pre-tag in the rendered source.

Information for NoWhereMan:

In FP 0.703.x you can fix this symptom, if you are using the html-tag and add in the next line pre-tag and following code-tag (HTML Code tags). With Alpha 1 or above it didn't work anymore, I think, it is something with the editor.

Edit://
I compare leggero against flatmass and found following missing in leggero (common.css - class pre):

/* hack min-height for i.e. */
min-height: 40px;
height: auto !important;
height: 40px;

It seems that's why the code-line isn't displayed correct with IE. I will try this symptom in the next time...

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

laborix — Sun, 13 Apr 2008 12:35:06 +0200

Hm, the code sample posted above did "shooting" IE 7 to something unintelligible. With that sample all code boxes have the same height :(

I'm playing with the CSS and think that is a "fast" fix:

* html .pre { height: 1% } /* for IE 5 and IE 6 */

*:first-child+html .pre { min-height: 1px; } /* for IE 7 */

It should work...

Edit://
Microsoft Internet Explorer 8 beta didn't need this fix, he will render the one code line like Firefox or Opera. Really funny, hehe...

It seems that Microsoft bring IE 8 to the next generation ;)

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

marcoverga86 — Sun, 13 Apr 2008 14:36:06 +0200

It seems that Microsoft bring IE 8 to the next generation ;)

or maybe that IE 8 will be standard-compliant... at last!!

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

NoWhereMan — Sun, 13 Apr 2008 14:54:06 +0200

try this one:


pre {
   min-height: 1em; /* ignored in IE<7 */

   height: 1%;   /* IE6 */

   height: auto !important; /* everybody else */

}

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

laborix — Sun, 13 Apr 2008 16:47:30 +0200

Only as Info:

Works with IE5, IE6 SP1 (Win2000), IE6 SP2 (WinXP), IE7 (WinXP/Vista) and IE8 beta (WinXP). Not really good (except IE8 beta), because the text isn't show without any mouse gesture. FF, Opera and Safari have no problems.

Next, it only appear, if the code line is longer than the content area. If you use a very small code line, you didn't need this.

Thanks NoWhereMan, great :D And did you patch also Leggero?

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

NoWhereMan — Sun, 13 Apr 2008 17:27:30 +0200

Thanks NoWhereMan, great :D And did you patch also Leggero?

erm, I don't understand, are you saying it doesn't work?

btw, I haven't committed anything, yet

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

laborix — Sun, 13 Apr 2008 18:54:42 +0200

erm, I don't understand, are you saying it doesn't work?

Screenshot IE 7

There is no chance to see the code-snippset in the code area and you can't scroll up or down.

The test with all IEs was after changing the common.css file with your posted changes. Then it will work, with the default common.css in SVN rev. #140 it doesn't work (see Screenshot).

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

NoWhereMan — Sun, 13 Apr 2008 19:25:15 +0200

let's try now, see if the official site looks ok to you

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

laborix — Sun, 13 Apr 2008 20:19:20 +0200

see if the official site looks ok to you

Same as in the Screenshot, not ok.

I didn't understand this at the moment, because on my blog it works with all IEs. Ok, first I had used my own theme for testing. But now I have tested the Leggero Theme (local on XAMPP) SVN rev. #138. Same as the Screenshot shows (also after adding your CSS snippset from above).

It must be something with the Leggero theme...

Edit://
If you insert the code snippset

  min-height: 40px;

  height: auto !important; 

  height: 40px;

it works with Leggero theme (SVN rev. #138) and IE 7, at least on my localhost with XAMPP.

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

DavidB — Sun, 13 Apr 2008 21:33:41 +0200

Thanks for working on this issue. The work around I have been using is to add a blank line before the trailing /CODE tag. I only add this blank line when the code is long and covers more than one line.

Internet Explorer 7 & Flatpress Official Blog having trouble with Code Tag

NoWhereMan — Mon, 14 Apr 2008 09:12:16 +0200

committed in rev141