Problem with IE -- Displaying Layers

[brianjs99]

This below link is a page that has some hidden layers that display when mousing over the photos. Works fine in all browsers except IE. In IE, the layers display at the wrong location (very low in the page). Any ideas? (I'm a CSS newbie, so I may simply be going about this the wrong way -- any help would be appreciated.)

http://www.e-herenow.com/rose/currentwinners.html

Thanks,
- Brian

[Kravvitz]

You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict.
Activating the Right Layout Mode Using the Doctype Declaration (http://hsivonen.iki.fi/doctype/)
Fix Your Site With the Right DOCTYPE! (http://www.alistapart.com/articles/doctype/)
Choosing a DOCTYPE (http://www.juicystudio.com/choosing-doctype/)
Use the Right Doctype (http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html)
Doctype switching (http://www.webdevout.net/doctype_switching.php)
http://www.w3.org/QA/2002/04/Web-Quality
http://www.w3.org/QA/2002/04/valid-dtd-list.html

I suggest you learn more about CSS Layout Techniques (http://www.dynamicsitesolutions.com/css/layout_techniques/). Using absolute positioning for everything can cause problems.

I suggest you read some of these:
Semantic code: What? Why? How? (http://www.boagworld.com/archives/2005/11/semantic_code_what_why_how.html)
The Meaning of Semantics (Take I) (http://www.peachpit.com/articles/article.asp?p=369225&rl=1)
Semantic code (http://www.maxdesign.com.au/presentation/sit2003/05.htm)
Creating Semantic Structure (http://www.webaim.org/techniques/structure/)
Semantics, HTML, XHTML, and Structure (http://www.brainstormsandraves.com/articles/semantics/structure/)
Standards don't necessarily have anything to do with being semantically correct (http://www.kottke.org/03/08/standards-semantically-correct)
Semantic Coding (http://www.andybudd.com/archives/2004/05/semantic_coding/)

[brianjs99]

Thanks for the post Kravvitz.

Tried putting in a few doctype versions, didn't help the problem.

Here's One (http://www.e-herenow.com/rose/withDTD.html)

Anybody else have any suggestions?

[Coulix]

I did a test myself and made a small skeleton for the same functionality to build from. There were some problems with inheritance between firefox and IE. I ended up with running all layers on position:absolute;. I just added more negative left-margin on the show/hide layers to make them show where they are supposed to in relation to the main layer. This sample works in both firefox and IE: Rose Test (http://wow.thronic.no/test_rose.html).

[drhowarddrfine]

The problem is that you don't write the code and then decideon the doctype. The doctype is the very first thing you put on a page before you code. Code is written to the doctype. You never try and make the doctype fit the code.

Now you have a bunch of html errors but a lot of your problems are related to your css errors. Validate both and fix all of those.

[toicontien]

And once the HTML and CSS errors are fixed, we can start trouble shooting browser bugs. Should it be a browser bug, IE-Win most likely just needs the hasLayout DOM property triggered for some element that contains the layers that are mispositioned.

First, fix the HTML and CSS errors though. The W3C validator is a great tool that easily spots coding errors that strained human eyes overlook. ;) I use the validators all the time at work.

[brianjs99]

Thanks all -- especially Coulix.

That fixed it - changing the from 'inherit' to absolute.

Thanks!

- Brian