I'm developing a site for a client that requires the use of text layers on top of Imageready Rollover so I have to figure out a way to make this work.

You can see the page-in-progress here. Password protection is just for search engine/casual searchers...

http://64.91.225.230/aboutbep.html

user brighteye
password brett4845

The text is an div layer with absolute position set. IE renders it in the "correct" position (i.e. same position as in Dreamweaver) and Firefox drops it down 5-10 pixels. Also hold true for IE 5 and Netscape 7, so it's a basic browser issue.

Text renders in the same position in IE & Mozilla if the <p> tags or similar is removed.

Hopefully a code fix will solve it as for other reasons, the design needs to hold as is. Any insight/help appreciated.

1st clue, IE gets it WRONG ! Firefox, which is eons more standards compliant, is rendering it CORRECTLY.

Try adding this to your CSS:
#TextBox p{
padding: 0;
margin: 0;
}

Leave the <p>'s in. For heaven's sake ( and for search engines! ) use PROPER heading, ie. H1 tag and format your paragraphs properly, ie. do NOT use all those needless <br> tags. If you need to space paragraphs, use the CSS ,that's what it's there for !!

Originally Posted by LadynRed

1st clue, IE gets it WRONG ! Firefox, which is eons more standards compliant, is rendering it CORRECTLY.

I well aware of the standards issue but I use Dreamweaver for layout and Firefox does not render what Dreamweaver sees on any of my machines (for this issue), so that's what I'm referring to as "wrong".

Try adding this to your CSS:
#TextBox p{
padding: 0;
margin: 0;
}

That worked! Thanks so much. I had tried padding without the "p{" without sucess. What function does that server?

Leave the <p>'s in. For heaven's sake ( and for search engines! ) use PROPER heading, ie. H1 tag and format your paragraphs properly, ie. do NOT use all those needless <br> tags. If you need to space paragraphs, use the CSS ,that's what it's there for !!

This is just rough test with cut and paste text where I was trying to figure out which tags broke it. I did not submit it here for XHTML validation

The reason I'm going through this whole exercise (rather than using graphic text/flash etc.) is precisely for search engine text with H1 tags etc.

This is a very odd site because of how the client wants it to look and function, but thanks again for your help.

Dreamweaver's INTERNAL 'preview' is still stuck at IE 5.5 !!! You simply cannot expect what you see in DW's window to be exactly the same as what the ACTUAL browsers will show you, not even IE6, or now, IE 7.

That worked! Thanks so much. I had tried padding without the "p{" without sucess. What function does that server?

It goes to specificity. What I did told it to change the padding on paragraphs for ONLY the paragraphs inside the div #TextBox.

Originally Posted by LadynRed

It goes to specificity. What I did told it to change the padding on paragraphs for ONLY the paragraphs inside the div #TextBox.

I see that now - I tried this this with other tags (H1 etc) and it works great. Thanks again for you help.