Monospace has Bugs

[Emperor]

Hi guys,

I did this:

p {
white-space: pre;
font-family: courier,monospace;
}

...and it works great but on IE7 (and IE6 if I remember correctly) a few of them don't line up when I use spaces to make columns. The weird thing is when I refresh it's fine (or some different ones don't line up then).

Any work-arounds?

Thanks

[SuzyUK]

not sure I'm understanding the question
I tried some pre text, spaced into columns, and saw no shifting - I wonder if it isn't related to the elements the <p> text is in and hasLayout but that's a pure guess

have you got a simple sample of some code which exhibits the problem

Suzy

[Emperor]

Hi,

Here is the exact code:

/* defaults */

div,p {
margin: 0;
padding: 0;
border: 0;
}

/* styles */

div.linklist {
margin: 16px 0;
}

div.linklist p {
padding: 0 0 0 16px;
white-space: pre;
font-family: courier,monospace;
}

I will use the plus '+' character for the spaces since this forum gets rid of spaces:

<div class="linklist">
<p>Emperor+++++<a href="http://www.webmasterworld.com">WebmasterWorld</a></p>
<p>Emperor+++++<a href="http://www.google.com">Google</a></p>
<p>King++++++++<a href="http://www.webmasterworld.com">WebmasterWorld</a></p>
<p>King++++++++<a href="http://www.google.com">Google</a></p>
<p>Queen+++++++<a href="http://www.webmasterworld.com">WebmasterWorld</a></p>
<p>Queen+++++++<a href="http://www.google.com">Google</a></p>
<p>Princess++++<a href="http://www.webmasterworld.com">WebmasterWorld</a></p>
<p>Princess++++<a href="http://www.google.com">Google</a></p>
</div>

I bet that will work fine but if you make a whole bunch of them (like more than 100) the anchor text shifts left or right on a few of them, maybe one in fifty or so.

Then when I refresh it all lines up perfectly.

Thanks for trying to help.

[SuzyUK]

You're right, it works perfectly :o - I did try adding nearly 200 lines but still it lined up

however for the sake of curiosity if you add

zoom: 1;

to div.linklist does it help?

It's just that you have said that it corrects itself on refresh, so I'm thinking IE is having a little difficulty with layout, so try adding layout (which is what zoom is doing) to linklist initially and if that doesn't help maybe try it's parent container elements, one by one (it may throw out your actual design for a while but it might help you find the element that needs the IE fix?)

A bit vague I know but I've not heard of monospace itself causing an IE problem, text-justify yes, a specific font family, no.. but I'm willing to live and learn ;)