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]

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]

Follow up - it happens in Firefox too!!

R

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

R

 

[Spartanicus]

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

When you want to specify one colour, specify them all (you didn't
specify a page background colour).

 

[Arne]

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]

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.

 

[Martin Jay]

On Tue, 26 Jul 2005 20:47:14 GMT, Rob O

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/explorer/threepxtest.html

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

Does anyone have alternative solutions?

 

[Wÿrm]

"Rob O" <[email protected]> kirjoitti
viestissä:[email protected]...

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]

"Rob O" <[email protected]> kirjoitti
viestissä:[email protected]...



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]

When you want to specify one colour, specify them all (you didn't
specify a page background colour).

Oppsie, thanks for the headsup

R