CSS - Layer Visibility Problem...

(never mind, i dont need layers anyways) Sorry, pls delete this!

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

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

My website (OPM) uses css for all the layout. Sometimes, when I load a new page within the website, the entire webpage appears nested within one of the layers. When I reload the page, this effect disappears right away or after a few reloads. It appears about 10% of the time and occurs in several different browsers (i.e. Firefox, IE).

Nested webpage error
URL

Normal page
URL

I don't know why this is happening, especially since it's only part of time. Please help!

Thank you,
Misha

Hello,

I have a table inside a layer (position: absolute).
I want to apply onMouseOut event to my layer, so when I roll my mouse outside of the layer it gives an alert message.

Well, it does give an alert when I move my out outside of the layer. But it also alerts when I move my mouse over the table which is inside my layer. I'm sure it's something simple, but I'm struggling with it for hours already and can't find any solution.

Code below. What am I doing wrong?

<div style="position:relative; z-index:1;">
<div style="position: absolute; z-index:2; background-color:#009900; padding:10px; width: 200px; height:200px;" onMouseOut="alert('hey');">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>table</td>
</tr>
</table>
</div>
</div>

Thanks so much!

I've seen a fix for this online before, but I can't seem to find it now.

Basically I've got the following layer declartion:

HTML Code _NOT_ php
PHP Code:
<div style=" color: black; font-size: 10pt; font-family: arial; text-align: center; visibility: hidden; display: block; position: absolute; z-index: 3; top: 115px" id="default"> 





When I make this layer visible it shows up in the exact position I want it to in most browsers, but in Mozilla it is 10 pixels to low.

How can I get this layer to show up on Mozilla in the same pos as IE? Should I use javascript to adjust that "top" to 125 if its Mozilla? Or is there a CSS way to resolve this.

Hello

I thought I could make it, but what I got so far is jumping over the screen, so please a need some help.

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Now the issue, image 2 and 3 should be dynamically replaceable.

Please help

Thanks

I have been reading about the problems regarding visibility with IE/FireFox/Safari.

I have:



Code:

<input type="button" onClick="toggleSurveyView('block')">
<input type="button" onClick="toggleSurveyView('table-row')">

<tr id="surveyDetails">
   <td>HI</td>
</tr>

function toggleSurveyView(visible) {
   document.getElementById('surveyDetails').style.display = visible;
}

In IE visible: block works great
in FireFox/Safari visible: table-row works great.


Is there a work around to get this visibility issue resolved for all browsers? Or am I going to have to perfrom some sort of browser type check? I just want to be able to toggle showing this table row on and off

Hi,
On the page http://simplyfocusing.net/LitSoc/ I have been trying to get CSS rollovers working.

I use code similar to this

For CSS
Code:

.nav {
	width:172px;
	height:32px;
}
td#nhome {
	background-image:url(nav-home.gif);
	background-repeat:no-repeat;
	cursor:pointer;
}
td#nhome img {
	visibility:hidden;
}
td#nhome:hover img {
	visibility:visible;
}

For HTML
Code:

<td id="nhome" class="nav"><a href="index.htm"><img src="index_files/nav-home-over.gif" alt="" /></a></td>

But the rollovers arent exactly working with IE. Works perfectly in FireFox 1. Also there seems to be some problem with the top right corner in IE. I can correct it by setting height to 0px in .shadowtopcorn but then it screws up FireFox.

Any suggestions on what I should do?

Thanks a lot

hey,

I got a form and use javascript to perform simple validations on it.

When all form fields are valid, ready_for_submit is true and i want to show a div saying everything is filled in correctly. (a different div is shown when not all fields are filled in correctly).

I got that working but what i want is that both div's have the same position. Now when one div is hidden, an empty line is shown, and below that line the visible div is shown. (Its the other way around when the other div is hidden.)

html Code:
Original - html Code <td colspan="4" align="right"> <div id="not_ready" style="visibility: visible;"> <img name='img_subRegister' src='images/invalid.gif'> Not all required data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> <div id="ready" style="visibility: hidden;"> <img name='img_subRegister' src='images/valid.gif'> All data is valid<br> <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)"> </div> </td>

  

    <td colspan="4" align="right">
    <div id="not_ready" style="visibility: visible;">
        <img name='img_subRegister' src='images/invalid.gif'>
        Not all required data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    <div id="ready" style="visibility: hidden;">
        <img name='img_subRegister' src='images/valid.gif'>
        All data is valid<br>
        <input type="button" name="subRegister" value="Register" onclick="checkFormData(true)">
    </div>
    </td>

How can i set both div's on the same position?

Changing visibility is done with javascript like this:
javascript Code:
Original - javascript Code if(ready_for_submit == false){ document.getElementById("not_ready").style.visibility = "visible"; document.getElementById("ready").style.visibility = "hidden"; return; } else{ document.getElementById("not_ready").style.visibility = "hidden"; document.getElementById("ready").style.visibility = "visible"; }

  

  


 if(ready_for_submit == false){


     document.getElementById("not_ready").style.visibility = "visible";


     document.getElementById("ready").style.visibility = "hidden";


     return;


 } else{


     document.getElementById("not_ready").style.visibility = "hidden";


     document.getElementById("ready").style.visibility = "visible";


 } 

thanks in advance.

i am doing an alternative splash page for a website that uses the same template as the rest of the site but uses a black background color and hides a few elements, especially the h1 element.
Code:

<h1>Home</h1>

I have attempted using display:none; display:transparent; and visibility:hidden. The first two elements leave a faint outline of the link in both IE and Netscape. Using visibility: hidden works in IE but the outline remains in Netscape. I have cleared the cache and tried other various obvious things like assigning color: #000000;

Does anyone have any ideas. To see this in action, see
www.lubuto.org




Code:

h1 {                                   
                              
visibility:hidden;
                                        }

I want to take a layer and center on a page. In other words if I have the margins top = 0 and left=0 then inside the main layer which takes into account the entire page I want it to be centered on the page. At present I can center a table on a page but not a layer???? how to do this? thanks

Hi all,

I'm trying to center a CSS layer, and have tried everything google and I can find on the web about CSS centering, but none work. I simply cannot get the following "menu" to center horizontally in a browser window [note: I *can* get it to center if I set the left and right margins of the "menu" layer to the same value, but that stretches the "BDB76B" colored background out, which I don't want to do]. Any help appreciated - thanks in advance to any takers!

Here is the relevant code in the html document:

<div id="menu">
<a href="index.html" class=menu_link>home</a>
<a href="services.html" class=menu_link>services</a>
<a href="hosting.html" class=menu_link>hosting</a>
<a href="testimonials.html" class=menu_link>testimonials</a>
<a href="tips_tools.html" class=menu_link>tips & tools</a>
<a href="contact.html" class=menu_link>contact</a>
</div>

and here is the relevant code from my style sheet:

#menu {
background: #BDB76B;
position: absolute;
top: 85px;
height: 15px;
width: 800px;
padding-bottom: 5px;
z-index: 100;
}

a.menu_link, a.menu_link:visited{
font-size: medium;
color: #808000;
font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-variant: small-caps;
margin: 0px;
padding: 2px 5px 4px 5px;
text-decoration: none;
}

a.menu_link:hover{
font-size: medium;
color: black;
font-family : "Gill Sans MT", "Gill Sans", GillSans, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-variant: small-caps;
margin: 0px;
padding: 2px 5px 4px 5px;
text-decoration: underline;
}