IE -v- FF layering problem

[no]

Beavering away at a new layout and viewing my changes with firefox, it
suddenly occurred to me to check IE. Wish I hadn't bothered...
http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
works fine in Firefox, but loading the page in explorer7 puts a
relatively positioned image on top of the menu tables. My laptop has
IE8, which 'appears' to place the menu on the highest Z-index and keep
the absolute image underneath, but 'breaks' the layout of the right
column anyway.
Worse, on individual product pages like this demo
http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
menu as soon as the cursor drifts over the transparent content lower
down the page. (IE8 seems to get this page right, though).
Anyone offer any help on the above, before I give up! Cheers in
advance

 

[Neredbojias]

Beavering away at a new layout and viewing my changes with firefox,
it suddenly occurred to me to check IE. Wish I hadn't bothered...
http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
works fine in Firefox, but loading the page in explorer7 puts a
relatively positioned image on top of the menu tables. My laptop has
IE8, which 'appears' to place the menu on the highest Z-index and
keep the absolute image underneath, but 'breaks' the layout of the
right column anyway.

Looks the same to me in both. -And I don't see any columns?? (per se)
Are you using the latest version of ie7? Were you out drinking last
night?

Worse, on individual product pages like this demo
http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
menu as soon as the cursor drifts over the transparent content lower
down the page. (IE8 seems to get this page right, though).
Anyone offer any help on the above, before I give up! Cheers in
advance

Okay, that I see. The reason is that it's "under" the "translucent"
text container for some reason in ie7 instead of over it. Dunno why
but a place to start looking.

 

[saturday]

Looks the same to me in both. -And I don't see any columns?? (per se)
Are you using the latest version of ie7? Were you out drinking last
night?

The 'Browse catalogue' dropdown in the menubar (which has the five
columns I mentioned ) appears BEHIND the image at the lower right
which sits OVER the content div.

Okay, that I see. The reason is that it's "under" the "translucent"
text container for some reason in ie7 instead of over it. Dunno why
but a place to start looking.

IE8 displays it OVER that translucent layer, as it should do. What I
can't figure out is WHY, or more importantly, how to correct it!

 

[dorayme]

Beavering away at a new layout and viewing my changes with firefox, it
suddenly occurred to me to check IE. Wish I hadn't bothered...
http://www.a1gardenbuildings.co.uk/trialindex.html is an example,
works fine in Firefox, but loading the page in explorer7 puts a
relatively positioned image on top of the menu tables. My laptop has
IE8, which 'appears' to place the menu on the highest Z-index and keep
the absolute image underneath, but 'breaks' the layout of the right
column anyway.
Worse, on individual product pages like this demo
http://www.a1gardenbuildings.co.uk/dump.html , IE7 loses focus on the
menu as soon as the cursor drifts over the transparent content lower
down the page. (IE8 seems to get this page right, though).
Anyone offer any help on the above, before I give up! Cheers in
advance

You have given me at least one possible good idea for a dropdown menu.
Make it so big no one can slip off it and curse! <g>

Some suggestions:

Don't use transitional doctype unless you have a special reason. As a
very famous person here called B said once, unless you are actually
transitioning from something. (Best to use HTML 4.01, btw, IE copes
badly or barely with XHTML)

At least have a bit of a go at validating your HTML doc before
submitting here. You do realise you are at alt.html, not anything goes
here, mate! There are standards to be maintained.

Best to use percentages or em for font size for web pages, not px.

A header of width:920px; is too wide. Why impose horizontal scrolling on
people? Your material does not really demand it.

Look at the page as if the user needs the text bigger or smaller than
you are used to and see what happens. You might be surprised.

If you attend to these matters first and there is still an IE problem,
that is the time to worry.

 

[Neredbojias]

The 'Browse catalogue' dropdown in the menubar (which has the five
columns I mentioned ) appears BEHIND the image at the lower right
which sits OVER the content div.

Yeah, now I see it. Also, in ie8 that whole right side from "Latest
News" to the image is lower than it should be.

Something I notice in your source is several hovers on non-a elements.
I don't believe ie7 supports this while compliant browsers do.

IE8 displays it OVER that translucent layer, as it should do. What I
can't figure out is WHY, or more importantly, how to correct it!

The trialindex page is pretty complicated and has 33 html validation
errors. That could affect the integrity of the css (-which has 2
errors).

 

[saturday]

You have given me at least one possible good idea for a dropdown menu.
Make it so big no one can slip off it and curse! <g>

Some suggestions:

Don't use transitional doctype unless you have a special reason. As a
very famous person here called B said once, unless you are actually
transitioning from something. (Best to use HTML 4.01, btw, IE copes
badly or barely with XHTML)

At least have a bit of a go at validating your HTML doc before
submitting here. You do realise you are at alt.html, not anything goes
here, mate! There are standards to be maintained.

Best to use percentages or em for font size for web pages, not px.

A header of width:920px; is too wide. Why impose horizontal scrolling on
people? Your material does not really demand it.

Look at the page as if the user needs the text bigger or smaller than
you are used to and see what happens. You might be surprised.

If you attend to these matters first and there is still an IE problem,
that is the time to worry.

Okay, all taken on board - I'll have a fiddle and see what happens. TY
both

 

[saturday]

Doctype changed to 4.01 (didn't help the problem though )
Had a go at validating and got it down to just two errors - the first
I don't understand at all, and the second seems 'wrong' somehow in
I'm going to have to look at that in more depth as its going to take
longer to change than I have at the mo!
Fair comment - I do intend to change it to somewhere around 800px once
I've got all the other probs out of the way.
This'll get corrected with the px/em bit above.
Right, all that done and the problem persisted. I found a 'cure', but
not sure what other implications of it might yet arise. Removing the
'position: relative' attribute from the transparent div does now
correctly 'hide' it under the drop down element in IE7. IE8 throws up
another few problems now though - all text in the transparent div show
as a hyperlink (GOD knows why!) and the horizontal size has 'broken'
and forced the images in the right column down below the left div.

 

[dorayme]

.

Had a go at validating and got it down to just two errors - the first
I don't understand at all, and the second seems 'wrong' somehow in
that the <p> it complains about *is* open and needs closing!

....

Use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

.... not quite what you have.

Now you are using 4.01 Strict, don't use this style close

charset=iso-8859-1" />

This should now be

....charset=iso-8859-1">

Ditto in many other tags.

Right, all that done and the problem persisted. I found a 'cure', but
not sure what other implications of it might yet arise. Removing the
'position: relative' attribute from the transparent div does now
correctly 'hide' it under the drop down element in IE7. IE8 throws up
another few problems now though - all text in the transparent div show
as a hyperlink (GOD knows why!) and the horizontal size has 'broken'
and forced the images in the right column down below the left div.

Maybe I will have time tomorrow to take a look if the problem you are
seeing is in IE7? Have not yet got quick access to IE8.