CSS - Css Layer Problem

I've been re-designing my site in valid XHTML 1.1 and CSS, and I've hit a bit of a problem....

Everything works perfectly in Firefox, but IE isn't liking things at all. The navbar at the left should stretch all the way to the bottom image, but it isnt having it. I've tried messing with it for about an hour now, and can't fix it....

The page can be found at URL and the stylesheet at URL

Oh, and I know the colours are all messed up, I'll fix that later :P

Edit: Fixed bbCode

Hi, the foolowing code is highlighting some options that I have in a layer sitting on top of a tablet type object. In IE the options are displayed 'inside' the tablet. In Firefox they are spread out down the page into my footer, any ideas what I can add to contain them within the tablet layer?

PHP Code:
<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 1px; top: 188px; visibility:visible" id="layer2">
        <div style="position: absolute; width: 100px; height: 24px; z-index: 1; left: 46px; top: 35px; visibility:visible; right:0; bottom:0" id="layer3">
            <p align="center"><font color="#4E261B"><b>
            <span style="font-size: 11pt">
            <a href="home" style="text-decoration: none">
            <font color="#4E261B">Home</font></a></span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">About US</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">User Register</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">User Log-in</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">Supplier 
            Log-in</span></b></font><p align="center">&nbsp;<p align="center">
            <font color="#4E261B"><b><span style="font-size: 11pt">Join Head2Toe</span></b></font></div>
        <img border="0" src="images/bridetablet1.bmp" width="190" height="302"></div>
    <p></div>  <!-- to clear footer -->
</div><!-- end outer div --> 





Layer 2 is the tablet, layer 3 is the text on top.

if you need anything else, please let me know.

Thanks,

G

I am trying to put left and right shadows on a layer, I am doing this by using two alternatively padded layers on top of each other. This code does that:

PHP Code:
#maincontent{
    background-image: url(images/layout/contentpanel/contentpanel_background.gif);
    background-repeat: repeat-y;
    background-position: left;
    border: 0px !important;
    padding-left: 30px;
}
#maincontent_inner{
    background-image: url(images/layout/contentpanel/contentpanel_backgroundright.gif);
    background-repeat: repeat-y;
    background-position: right;    
    border: 0px !important;
    padding-right: 30px;
} 





PHP Code:
<div id="hold_content">

            <div id="maincontent">
            
            <div id="maincontent_inner"><? include("includes/homepageloremipsum.php")?>
</div><!-- End maincontent_inner -->
                        
            </div><!-- End maincontent -->

</div> 





Now, in firefox the shadow images work fine, however, on IE they start about 2 inches down. However, after scrolling up and down the page they start at the top so this is obviously some kind of layering problem. I can't work out what though. Any ideas?

Hello, someone call tell me why this code didnt work? i try to put some flash banner in nested divs using z-index and its not working the flash div is above the higher div. i am tryin to href the flash banner:

Code:

<asp:FormView DataSourceID="SqlDataSource20" runat="server">
    <ItemTemplate>
    <div style="width:728px; height:90px; position:relative; padding:0px; margin:0px; z-index:100; cursor:pointer; display:block; background-color:Lime;" onclick="window.new('<%#Eval("destUrl") %>', '_blank');">
        <div style="width:728px; height:90px; position:absolute; left:0px; top:0px; padding:0px; margin:0px; z-index:-1; display:block;">
        <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="728" height="90">
        <param name="allowScriptAccess" value="sameDomain" />
        <param name="allowFullScreen" value="false" />
        <param name="movie" value="<%#Eval("bannerSrc") %>" />
        <param name="quality" value="high" />
        <param name="bgcolor" value="#ffffff" />
        <param name="wmode" value="opaque" />
        </object>
        </div>
    </div>
    </ItemTemplate>
</asp:FormView>

Hi everyone,
I am having a very difficult problem using Dreamweaver and I would be very grateful for any advice given. I recently created a simple website using layers and when I previewed it, it looked great and it had no reported browser errors. I had several people view it and only one of my friends had trouble seeing it. He said that the layers were out of position and sometimes overlaped. We both were using Explorer 6.0. The only difference between our computers is that he has a 21" monitor while I have a 17". Would that effect the web page design? Why are the layers not positioning correctly? If anyone needs to view the website it can be seen at http://sky.prohosting.com/lovecare Please help me!

Thanks,
Steve