Divs repositioning in Explorer

I would be grateful for a steer as to where I messed up this
(work-in-progress) page:
http://www.englishchecker.co.uk/elite/about.html

It displays fine in Safari on a Mac but in Explorer on a PC the left
column of white text (container #subs-left) is shoved to the right side
of the page while the second column of black text (container
#subs-right) is shoved down.

The page seems to validate ok and the really annoying thing is that
these columns did once display properly on both my Mac and PC but my
subsequent addition of an image across the top of the main #subs
container (where there was originally a text container) and other
revisions (blunders) have caused these two divs to head east and south
respectively.

I'm at the stage now where I can't see the wood for the trees and it's
probably something which should be staring me in the face. So if
someone would kindly slap me with it, I would be extremely grateful.

Stan

In article <492edfa9$0$1345$fa0fcedb (AT) news (DOT) zen.co.uk>,
Stan The Man <man (AT) pr100 (DOT) com> wrote:

I would be grateful for a steer as to where I messed up this
(work-in-progress) page:
http://www.englishchecker.co.uk/elite/about.html

It displays fine in Safari on a Mac but in Explorer on a PC the left
column of white text (container #subs-left) is shoved to the right side
of the page while the second column of black text (container
#subs-right) is shoved down.

The page seems to validate ok and the really annoying thing is that
these columns did once display properly on both my Mac and PC but my
subsequent addition of an image across the top of the main #subs
container (where there was originally a text container) and other
revisions (blunders) have caused these two divs to head east and south
respectively.

I'm at the stage now where I can't see the wood for the trees and it's
probably something which should be staring me in the face. So if
someone would kindly slap me with it, I would be extremely grateful.

Replace

<h2><img class="dsR17" src="images/teamwork.jpg" alt="" align="left"
border="0" /></h2>

with like:

<h2><img class="dsR17" src="images/teamwork.jpg" alt="" /></h2>

and matters will improve for you in IE7. There is then a float drop
problem on the far right (floats are tricky in IE) I am sure you will
solve by attending to dimensioning your elements to leave room.

Not sure why you are using XHTML and why Transitional? But anyway...

--
dorayme

On 2008-11-27 23:20:32 +0000, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> said:

In article <492edfa9$0$1345$fa0fcedb (AT) news (DOT) zen.co.uk>,
Stan The Man <man (AT) pr100 (DOT) com> wrote:

I would be grateful for a steer as to where I messed up this
(work-in-progress) page:
http://www.englishchecker.co.uk/elite/about.html

It displays fine in Safari on a Mac but in Explorer on a PC the left
column of white text (container #subs-left) is shoved to the right side
of the page while the second column of black text (container
#subs-right) is shoved down.

The page seems to validate ok and the really annoying thing is that
these columns did once display properly on both my Mac and PC but my
subsequent addition of an image across the top of the main #subs
container (where there was originally a text container) and other
revisions (blunders) have caused these two divs to head east and south
respectively.

I'm at the stage now where I can't see the wood for the trees and it's
probably something which should be staring me in the face. So if
someone would kindly slap me with it, I would be extremely grateful.


Replace

h2><img class="dsR17" src="images/teamwork.jpg" alt="" align="left"
border="0" /></h2

with like:

h2><img class="dsR17" src="images/teamwork.jpg" alt="" /></h2

and matters will improve for you in IE7. There is then a float drop
problem on the far right (floats are tricky in IE) I am sure you will
solve by attending to dimensioning your elements to leave room.

Not sure why you are using XHTML and why Transitional? But anyway...

Thank you so much. That did the trick and I will play with element dimensions.

I was originally using xhtml1-strict but was having a similar problem
with another page, a mouseover image gallery
(http://www.englishchecker.co.uk/elite/gallery.html) which displayed
fine in Mac Safari but went haywire in IE7/WinXP. Changing the doc type
made it work in both.

Stan

Stan The Man pisze:

I was originally using xhtml1-strict but was having a similar problem
with another page, a mouseover image gallery
(http://www.englishchecker.co.uk/elite/gallery.html) which displayed
fine in Mac Safari but went haywire in IE7/WinXP. Changing the doc type
made it work in both.

Are you sure that your code will be interpreted as XHTML? Without header
application/xhtml+xml is sent XHTML be interpreted as a normal HTML.

--
Peter

Stan The Man wrote:

I would be grateful for a steer as to where I messed up this
(work-in-progress) page:
http://www.englishchecker.co.uk/elite/about.html

You really need to examine the code Tidy is generating. There are some
pretty bad mistakes in there.
- numerous empty elements
- bogus heading markup
- unordered lists not marked up as such

Not to mention those silly classes and added spans for explicit font
sizes. They all need to go away. Leave body text at font-size:100% and
only change those few elements that actually need it.

Fix the code, run it all through the W3C validation services, then worry
about IE.

--
Berg

On 2008-11-28 12:14:02 +0000, Peter May <peter.may (AT) poczta (DOT) fm> said:

Stan The Man pisze:
I was originally using xhtml1-strict but was having a similar problem
with another page, a mouseover image gallery
(http://www.englishchecker.co.uk/elite/gallery.html) which displayed
fine in Mac Safari but went haywire in IE7/WinXP. Changing the doc type
made it work in both.

Are you sure that your code will be interpreted as XHTML? Without
header application/xhtml+xml is sent XHTML be interpreted as a normal
HTML.

Not at all sure, no. I fixed the validator's reported errors and still
my image gallery didn't work in IE so I tried changing the doctype to
what it now is and everything fell into place. It may not be right but
if it works for that page, I'm greatly tempted not to touch it again
(heresy, I know).

Stan

On 2008-11-28 12:42:59 +0000, Bergamot <bergamot (AT) visi (DOT) com> said:

Stan The Man wrote:
I would be grateful for a steer as to where I messed up this
(work-in-progress) page:
http://www.englishchecker.co.uk/elite/about.html

You really need to examine the code Tidy is generating. There are some
pretty bad mistakes in there.
- numerous empty elements
- bogus heading markup
- unordered lists not marked up as such

Not to mention those silly classes and added spans for explicit font
sizes. They all need to go away. Leave body text at font-size:100% and
only change those few elements that actually need it.

Fix the code, run it all through the W3C validation services, then
worry about IE.

To be fair to Tidy, it didn't generate most of the code. I did try
using its re-write in its entirety but it gave me too much work to do
in re-laying out the page so I took bits of the Tidy code -- enough to
get me through the W3 validator without any errors - albeit, I realise
there are still errors in there.

Stan

Stan The Man pisze:

On 2008-11-28 12:14:02 +0000, Peter May <peter.may (AT) poczta (DOT) fm> said:

Stan The Man pisze:
I was originally using xhtml1-strict but was having a similar problem
with another page, a mouseover image gallery
(http://www.englishchecker.co.uk/elite/gallery.html) which displayed
fine in Mac Safari but went haywire in IE7/WinXP. Changing the doc
type made it work in both.

Are you sure that your code will be interpreted as XHTML? Without
header application/xhtml+xml is sent XHTML be interpreted as a normal
HTML.

Not at all sure, no. I fixed the validator's reported errors and still
my image gallery didn't work in IE so I tried changing the doctype to
what it now is and everything fell into place. It may not be right but
if it works for that page, I'm greatly tempted not to touch it again
(heresy, I know).

In IE6 works well. I checked it.

--
Peter