Odd CSS related text "reflow" issue?

[Rob O]

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

It is only happening in IE it seems and it really is just a pixel
shift in a column of text, but the client has noticed it and wants it
fixed.

I wondered if any resident gurus may throw any light?

An example page can be seen here:

<http://www.littlejohnfraser.com/services/MERITservices.asp>

a screengrab from IE6 highlighting the problem can be seen here

<http://www.c-eye.co.uk/misc/ljftextproblem.jpg>

It seems to be related to when there is a right hand panel floated
right.

I know it's minor but as I say, the client wants it fixed and it would
be a shame to rebuild the site using tables :-(

TIA!

R

[Rob O]

On Tue, 26 Jul 2005 20:47:14 GMT, Rob O
<ro********@riverweb.dot.co.dot.uk> wrote:

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

It is only happening in IE it seems and it really is just a pixel
shift in a column of text, but the client has noticed it and wants it
fixed.

I wondered if any resident gurus may throw any light?

An example page can be seen here:

<http://www.littlejohnfraser.com/services/MERITservices.asp>

a screengrab from IE6 highlighting the problem can be seen here

<http://www.c-eye.co.uk/misc/ljftextproblem.jpg>

It seems to be related to when there is a right hand panel floated
right.

I know it's minor but as I say, the client wants it fixed and it would
be a shame to rebuild the site using tables :-(

TIA!

R

Follow up - it happens in Firefox too!!

R

[Rob O]

On Tue, 26 Jul 2005 21:02:31 GMT, Rob O
<ro********@riverweb.dot.co.dot.uk> wrote:

R

Follow up - it happens in Firefox too!!

R

Arrgh - not it doesn't it's only IE - doh!

R

[Arne]

Once upon a time *Rob O* wrote:

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

It is only happening in IE it seems and it really is just a pixel
shift in a column of text, but the client has noticed it and wants it
fixed.

I wondered if any resident gurus may throw any light?

An example page can be seen here:

<http://www.littlejohnfraser.com/services/MERITservices.asp>

a screengrab from IE6 highlighting the problem can be seen here

<http://www.c-eye.co.uk/misc/ljftextproblem.jpg>

It seems to be related to when there is a right hand panel floated
right.

I know it's minor but as I say, the client wants it fixed and it would
be a shame to rebuild the site using tables :-(

TIA!

Try to make navcol id just a couple of pixels more narrow. This id's
bottom line is on the same level as the line "All these services ..."
is, so every line abowe will move to the left when you change the
width of the navcol id.

--
/Arne

Top posters will be ignored. Quote the part you
are replying to, no more and no less! And don't
quote signatures, thank you.

[Robert Frost-Bridges]

Rob O wrote:

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

It is only happening in IE it seems and it really is just a pixel
shift in a column of text, but the client has noticed it and wants it
fixed.

I wondered if any resident gurus may throw any light?

An example page can be seen here:

<http://www.littlejohnfraser.com/services/MERITservices.asp>

[...]
#all is specified as having a fixed width and there are then varying amounts
of margin/padding added to elements on the page. IE calculates the box
model somewhat differently so maybe you're seeing an effect of this? There
is a css hack regarding width and IE. I'm not saying it is this but it was
something that occured to me looking at the code. I could be miles off.

--
Robert
http://brightonfixedodds.net

[Robert Frost-Bridges]

Robert Frost-Bridges wrote:

Rob O wrote:

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

[...]
I meant to say, i didn't really get the header, I don't know if you knew?

http://brightonfixedodds.net/screencap.jpg

--
Robert
http://brightonfixedodds.net

[Robert Frost-Bridges]

Robert Frost-Bridges wrote:

Rob O wrote:

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

[...]
I meant to say I didn't really get the header, don't knew if you knew?

http://brightonfixedodds.net/screencap.jpg

--
Robert
http://brightonfixedodds.net

[Martin Jay]

In message <17********************************@4ax.com>, Rob O
<ro********@riverweb.dot.co.dot.uk> writes

On Tue, 26 Jul 2005 20:47:14 GMT, Rob O
<ro********@riverweb.dot.co.dot.uk> wrote:

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS. It is only happening in IE it seems and it really is just a pixel
shift in a column of text, but the client has noticed it and wants it
fixed.

Follow up - it happens in Firefox too!!

Is it? I thought this was only an Internet Explorer 6 'feature.'

Anyway, it's a well-known problem. I found this page helpful:

http://www.positioniseverything.net/...reepxtest.html

Unfortunately it involves some css hacking, but they pass through the
CSS valuator at http://www.w3.org/

Does anyone have alternative solutions?
--
Martin Jay

[Wÿrm]

"Rob O" <ro********@riverweb.dot.co.dot.uk> kirjoitti
viestissä:fj********************************@4ax.c om...

<snip>

a screengrab from IE6 highlighting the problem can be seen here

<http://www.c-eye.co.uk/misc/ljftextproblem.jpg>

Looks like typical 3 pixel JOG bug. Googling for 3 pixel jog should give
you solution how to fix this. Been while I had to deal this issue so can't
be 100% sure I recall correctly, but I think you have to set some height,
most likely MAINTEXT class to height: 1px; or something like that.

Anyway, Google should give you more answers what fix is and if that cause
problems elsewhere...

[Rob O]

On Wed, 27 Jul 2005 03:40:47 +0300, "Wÿrm"
<no*************@north.invalid> wrote:

"Rob O" <ro********@riverweb.dot.co.dot.uk> kirjoitti
viestissä:fj********************************@4ax. com...

<snip>

a screengrab from IE6 highlighting the problem can be seen here

<http://www.c-eye.co.uk/misc/ljftextproblem.jpg>

Looks like typical 3 pixel JOG bug. Googling for 3 pixel jog should give
you solution how to fix this. Been while I had to deal this issue so can't
be 100% sure I recall correctly, but I think you have to set some height,
most likely MAINTEXT class to height: 1px; or something like that.

Anyway, Google should give you more answers what fix is and if that cause
problems elsewhere...

Yep thanks guys, you're on the money - it is the 3 pixel Jog.

There is a dodgy CSS hack that we have now tried on dev machine and it
has cured the problem - many thanks for the quick responses!

R

[Rob O]

On Tue, 26 Jul 2005 22:56:49 +0100, Robert Frost-Bridges
<we*@brightonfixedodds.net> wrote:

Robert Frost-Bridges wrote:

Rob O wrote:

Hi Folks

We are having an odd little effect happening with a non-tabled site
that uses fairly basic CSS.

[...]
I meant to say I didn't really get the header, don't knew if you knew?

http://brightonfixedodds.net/screencap.jpg

Whoa! How did you manage to get that?

Can you let me know what browser / settings you were running?

Thx again

R

[Robert Frost-Bridges]

Rob O wrote:

http://brightonfixedodds.net/screencap.jpg

Whoa! How did you manage to get that?

Can you let me know what browser / settings you were running?

Firefox 1.04 or 5 I can't remember now (on Suse 9.3). I always have my
font-sizes set to 14, 14 and 14 minimum. We had an upgrade to 1.06 today
and it's looking normal at these settings. However, if you ctrl+ the
font-size up then the effect starts on the first click as it starts to
appear from under the headline.

--
Robert
http://brightonfixedodds.net