|
CSS - Links Not Clickable In Ie Due To Overlapping Layers
I've spent a few hours researching this and I sure hope I'm not out of luck, because I'm not finding a solution. Here's my site (just a template):
http://kris.dreamhosters.com/mhw/ As the subject line says, the links at the bottom are not clickable in IE6 or IE7 and I know exactly what is causing it. In order to have those curved graphics on the bottom, I have them attached to separate divs and I need to use a negative margin on one to pull it up so they align. That div covers the div that the links are in making them unclickable in IE. I've tried to move the links to the the other div, but that caused other problems in my template. I read through this article: http://www.vision.to/articles/the-difference-between-the-flow-and-positioning-for-web-pages.php Tried positioning, Z-index, nothing. Does anyone have any suggestions for me? Similar TutorialsI'm attempting to create three layers, each containing a selection list form item, only one of which will be visible at any one time, based on the selection of another selection list (not shown in the code below). The layers must be centered within a Table cell: Code:
<table style="width:90%">
<tr>
<td style="text-align:center;">
<div id="layer1" style="width:100%;">
<select id="select1">
<option selected>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div id="layer2" style="width:100%;">
<select id="select2">
<option selected>Option A</option>
<option>Option B</option>
</select>
</div>
<div id="layer3" style="width:100%;">
<select id="select3">
<option selected>Option 1A</option>
<option>Option 2B</option>
</select>
</div>
</td>
</tr>
</table>
.
.
This alone renders each layer sequentially, one on top of the other, vertically on the page, which is not what I want. I have tried using z-index values, but I think the problem stems more from the position value. I have tried using: Code: position:relative; left:0px; top:0px; on each layer, but nothing changes. I then tried using: Code: position:absolute; left:0px; top:0px; on each layer, and the layers *did* overlap each other, but were placed at the top of the page. So before I tear out all of my hair, does anyone have a suggestion for how to place these layers within a table cell so that they are a) centered horizontally within the cell, and b) overlap each other? Any help would be greatly appreciated. Thanks! - coredumped. I am having trouble overlapping these two layers, they need to be relative. here is the code Code: <div id="layer1" style="position: relative; width: 99%; height: 100px; z-index: 1; border: 0px solid gray; color: #CC0066;"> <table width="80%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5" width="50%" height="40"></td> <td style="filter: Alpha (Opacity=50); -moz-opacity: .5;" bgcolor="#EBAAA5"></td> </tr> </table> </div> <div id="layer2" style="position: relative; width: 99%; height: 100px; z-index: 2; border: 0px solid black;"> <table width="80%" cellspacing="2" cellpadding="2" border="0" align="center"> <tr> <td width="50%" height="40"><font face="verdana" size="2"><b>Oh, this is fantastic!</b></font></td> <td><center><font face="verdana" size="2"><b>This works for Firefox and IE.</b></font></center></td> </tr> </table> </div> any ideas? thanks! i'm trying to write a liquit layout based in layers and css and have the next code: Code:
<style type='text/css'>
<!--
body{font-family:Verdana, Arial, Helvetica, sans-serif; margin:5px 5px 5px 5px; position:relative;}
#header{border:1px solid #000000; width:100%; height:60px; position:absolute; top:0px; left:0px; min-width:600px;}
#menu{border:1px solid #000000; position:absolute; top:60px; left:0px; width:15%; min-width:150px;}
#content{border:1px solid #000000; position:absolute; top:60px; left:15%; width:85%; min-width:450px;}
-->
</style>
and in the body: Code: <body> <div id='header'>header</div> <div id='menu'>menu links</div> <div id='content'>contents</div> the little problem here is thata due to the percentages used to determine the left position of the contents layer it overlaps with the menu layer when i resize the window but i've seen a lot of pages that do not behave this way... what am i missing???? I have a page that displays a bunch of products for my site and when viewed in FireFox and Chrome everything is great. When viewed in IE or Opera however, the products are displayed correctly but are not clickable. I can't seem to figure out why IE and Opera don't see the anchor tag. I had set it to display as block and set height and width to 100% so that the entire square that the products are displayed is clickable (the product images are all different sizes). Since IE didn't see it I set some conditional stuff to simply add the link to the product images themselves and that does seem to work (although not how I'd like it to) but this solution doesn't really work since Opera doesn't work and doesn't recognize the IE conditional statements. Here's the code for the individual products, obviously it's being repeated a bunch of times when the page is actually viewed. Also, yes I used a table in there but I was having a bitch of a time getting the image to center both horzontally and vertically so I broke down and just used the table cell for it. If somebody feels up to helping me re-write it to center using just divs, I'm all for it. Code: <div class="product_cell"> <table width="187px" height="190px" style="position:absolute; top:0; left:0;"><tr> <td height="100%" width="100%" align="center" valign="middle"> <!-- FOR NON-IE BROWSERS--> <![if !IE]> <div class="product_link"> <a href="proddisp.php?id=<?=$row['id']; ?>" style="display:block;width:100%;height:100%;"></a> </div> <![endif]> <!-- END FOR NON-IE BROWSERS--> <!-- FOR IE Part1--><!--[if IE]><a href="proddisp.php?id=<?=$row['id']; ?>"><![endif]--> <img src="http://www.skullcrow.com/images/products/<?=$row['id'].'_m.gif'; ?>" alt="<?=$row['name']; ?> - <?=$row['subname']; ?> - t-shirt" border="0" /> <!-- FOR IE Part2--><!--[if IE]></a><![endif]--> </td></tr></table> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_left_<?=$row['bgcolor']; ?>.jpg" width="11px" height="190px" style="float:left; border:0;" /> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_center_<?=$row['bgcolor']; ?>.jpg" width="162px" height="190px" style="float:left; border:0;" /> <img src="http://www.skullcrow.com/images/frame_bg/prodframe_right_<?=$row['bgcolor']; ?>.jpg" width="14px" height="190px" style="float:left; border:0;" /> </div> <!-- END PRODUCT_CELL --> And from the stylesheet... Code: .product_cell {height:190px;width:187px;padding:0;margin:0;border:0;position:relative;overflow:hidden;}
.product_link {position:absolute;top:0;left:0;width:100%;height:100%;z-index:500;}
The page I'm working on is located he http://www.skullcrow.com/index_imp.php Thanks for any help. hi, whenever i hover over the images on my navigation bar, the links do appear to be there but when i click on them..it wont click :S URL this is the navigation, when you click on an item and i presume its that blue line with jquery that is causing it, maybe in the css... Html: Code: <ul class="lavaLampBottomStyle" id="3">
<li class="navibg" style="width:80px;">
<a href="#">Home
<br style="padding-bottom:5px;">
<span class="navidescription">
welcome to cw
</span>
</a>
</li>
<li class="navibg" style="width:110px;">
<a href="http://citywater.uk.com/contact-us/">Contact Us
<br style="padding-bottom:5px;">
<span class="navidescription">
how to reach us
</span>
</a>
</li>
<li class="navibg" style="width:95px;">
<a href="http://citywater.uk.com/about-us/">About us
<br style="padding-bottom:5px;">
<span class="navidescription">
read about us
</span>
</a>
</li>
<li class="navibg">
<a href="http://citywater.uk.com/latest-news/">Latest News
<br style="padding-bottom:5px;">
<span class="navidescription">
water treatment news
</span>
</a>
</li>
</ul>
CSS: Code: .lavaLampBottomStyle {
float :right;
list-style :none;
margin-top :20px;
padding :0;
margin-bottom:24px;
}
.lavaLampBottomStyle li {
border-bottom : 5px solid white;
float : left;
list-style : none;
padding-bottom :30px;
padding-left :25px;
padding-top :10px;
position :relative;
vertical-align :top;
}
.lavaLampBottomStyle li.back {
border-bottom : 5px solid #88B8E8;
height : 1px;
position : absolute;
margin-top:39px;
width : 9px;
z-index : 8;
}
.lavaLampBottomStyle li a {
color : white;
float : left;
font : bold 15px arial;
height : 40px;
letter-spacing : 0;
outline : none;
padding-right :5px;
position : relative;
text-align : center;
text-decoration : none;
text-transform : uppercase;
top : 7px;
z-index :10;
}
.lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited {
border : none;
}
Hello all. I have the following code: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Site</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#base {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
background: #c0c0c0; } /* end #base */
#main_block {
margin: auto;
text-align: left;
width: 955px; } /* end #main_block */
#main_content, #main_content_2c, #main_content_3c {
background: #ffffff;
border-left: 1px solid #575757;
border-right: 1px solid #575757; }
#top_main_content { padding-top: 1em; }
#top_main_content ul {
float: left;
padding: 0;
margin: 0;
list-style-type: none;
border-top: 1px solid #f1f1f1; } /* end #top_main_content ul */
#top_main_content ul li {
text-align: right;
border-bottom: 1px solid #f1f1f1; } /* end #top_main_content ul li */
#top_main_content ul li a {
line-height: 26px;
display: block;
color: #686868;
width: 266px; } /* end #top_main_content ul li a */
.indent { margin-right: 1.5em; }
#top_main_content #rotating {
z-index: 0;
float: right;
width: 687px;
height: 242px;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1; } /* end #top_main_content img */
#top_main_content #rotating p, #top_main_content #rotating h1 { margin: 2em 0 0 2em; }
#sidemenu12,
#sidemenu11,
#sidemenu13,
#sidemenu14,
#sidemenu15,
#sidemenu16,
#sidemenu17,
#sidemenu18,
#sidemenu22 {
width: 687px;
height: 242px;
font-weight: bold;
overflow: hidden;
position: absolute;
visibility: visible; }
</style>
</head>
<body>
<div id="base">
<div id="main_block">
<div id="main_content">
<div id="top_main_content">
<ul>
<li><a id="sidemenu11_link" href="#"><span class="indent">Link 1</span></a></li>
<li><a id="sidemenu22_link" href="#"><span class="indent">Link 2</span></a></li>
<li><a id="sidemenu12_link" href="#"><span class="indent">Link 3</span></a></li>
<li><a id="sidemenu13_link" href="#"><span class="indent">Link 4</span></a></li>
<li><a id="sidemenu14_link" href="#"><span class="indent">Link 5</span></a></li>
<li><a id="sidemenu15_link" href="#"><span class="indent">Link 6</span></a></li>
<li><a id="sidemenu16_link" href="#"><span class="indent">Link 7</span></a></li>
<li><a id="sidemenu18_link" href="#"><span class="indent">Link 8</span></a></li>
<li><a id="sidemenu17_link" href="#"><span class="indent">Link 9</span></a></li>
</ul>
<div id="rotating">
<div id="default_div"><p>Default</p></div>
<div id="sidemenu11"><p>Section 1</p></div>
<div id="sidemenu12"><p>Section 2</p></div>
<div id="sidemenu13"><p>Section 3</p></div>
<div id="sidemenu14"><p>Section 4</p></div>
<div id="sidemenu15"><p>Section 5</p></div>
<div id="sidemenu16"><p>Section 6</p></div>
<div id="sidemenu17">
<p>Section 7 - A<br />
<a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p>Section 7 - B<br />
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a></p>
</div>
<div id="sidemenu18"><p>Section 8</p></div>
<div id="sidemenu22"><p>Section 9</p></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Which if you look at it in a browser looks rather messy but I have javascript that hides and shows things. But my question is why aren't the links clickable in Firefox. They are in IE7, IE6, and Opera but not Firefox or Safari. I know that if I remove position: absolute from the last set of styles that it will work but then everything isn't stacked on top of each other. Ive seen a few topics about centering layers in browsers and it seems really complicated and often to specific to relate to my site. I used to use tables which were of course easy to center, but now at college we have to use layers (im working in design view im not a coder) and the teacher said try putting a layer in a layer and centering that but ive tried this and it doesnt work, i can get a layer in another layer, but not center it within it. This is the site im trying to do, i notice on cssvault.com cssbeauty.com most of the css sites (i know mines not really in css as such) are all centered and I was wondering how everyone does it? I went to the macromedia website and it said you can use an extension which works but for some reason it doesnt let you edit the site once you have centered it. Basically is there a simple way for me to center my site or is it really complicated? I wonder why we are learning in layers when tables center easily and move relative to each other How many layers or z-indexes can you reasonably use on one page? I'm thinking mostly IE here, since that is the browser I will be working with. For instance, you design a bunch of tabs - at least 24, and have a a span or div below those tabs that contain checkboxes and text preceeding each check box, for each tab on its own layer. Maybe a maximum of 40 checkboxes/text per layer. Clicking each tab will hide/unhide the appropriate layer of checkboxes/text in the div area. I know this may be better done axaj style, but for the sake of argument, what would you think is a maximum load for this scenario for a browser (latest IE) on a standard pc that may be up to 3 years old? have I got this right....any selector effectively becomes a layer once I add a 'position' and a 'z-index'? Thanks Chris I hope someone can help me with this, please have a look at a page I have created: http://www.funnestgames.com/header_1.php Now before rolling over any of the links on the left side, notice the text "Rollover game for preview". I have been trying to get that inside the white rectangular outlined box, but the only way I know is if i use css and specify a certain number of pixels from the left side. I can't do this because the website is centered, and resizing the page would change the widths and it all gets messy, i hope you have the idea. I have the same problem if you rollover a link, you can barely read it but it says loading below the text "rollover game for preview" does anyone know a way to solve my problem? please view source on page if you can help me out and see what i did wrong. the divs start at approx line 135 thanks Code: <center> <div style="width:100px; height:100px;background-color:#E0E1E2; border: 1px double #ffffff; font-size:11px; font-weight:700; color:#333333; text-align:center;">Game Preview <div style="position: absolute; top: 300px;">Rollover game for preview</div> <div id="preview" style="width:100px; height:100px;background-color:#E0E1E2; visibility:hidden; z-index:99;"> <img name="preview_img" src="spacer.gif" style="height:100px; width: 100px; visiblility:hidden; " onload="showmehideme()"> <div id="loading" style="font-size:11px; font-weight:700; color:#333333; text-align:center; position: absolute; top: 300px;">Loading...</div> </div> </div> </center> I've tried different implementations, but none seem to be working. I have two images crossing over each other using two position: absolute divs. When I click on the one behind using an onClick javascript function, I want that div's z-layer value to change, but none of the sites are helping me. How do I do this? Ok, I have this: Code: #background {
position:relative;
width:600px;
height:480px;
z-index:1;
background-image:"/background.jpg";
border-style:none;
color:#000000;
} <div ID="background">Whatever</div>
But it doesn't work.. why? Hi guys, I am using the following code on my page but the 'profile-description' div layer is not displaying correctly Some of the text shown as a result of this <? echo nl2br($row['description']); ?> is being shown outside the blue border created by this code : <div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;"> PHP Code: #div-profile { position:relative; } #profile-data { position:absolute; top:-15px; right:230px; width:250px; font: 12px/17px verdana,arial,sans-serif; line-height:18px; text-align:left; } #profile-pic { position:absolute; top:0; left:-10px; width:170px; } #profile-description { position:relative; top:150px; left:60px; width:450px; font: 12px/17px verdana,arial,sans-serif; line-height:18px; text-align:left; } <div style="text-align:center;border:#a9c5df 1px solid;width:90%;padding:20px; background:url(images/bg-image.jpg) no-repeat 0 4px #ffffff;background-position:top right;"> <div id="div-profile"> <div id="profile-pic"> <img src="profile-pics/<? echo $pic ;?>" alt="" width="120" height="140" align="left"> </div> <div id="profile-data"> <br /> <strong>Name:</strong> <? echo("$row2[first_name]"); ?> <? echo("$row2[last_name]"); ?><br /> <strong>Specialist Area:</strong> <? echo("$row2[specialist_area]"); ?><br /> <strong>Phone:</strong> <? echo("$row2[phone]"); ?><br /> <strong>Mobile:</strong> <? echo("$row2[mobile]"); ?><br /> <strong>Company:</strong> <? echo("$row2[company]"); ?><br /> <strong>Address:</strong> <? echo("$row2[city]"); ?>, <? echo("$row2[state]"); ?><br /> <strong>Email:</strong> <a href="contact-agent.php?id=<? echo $_SESSION['member_id'];?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false">contact us here</a><br /> <? } ?> </div> <br /><br /> <div id="profile-description"> <? echo nl2br($row['description']); ?> <br /><br /><br /><br /> <div align="right"> <a href="contact-agent.php?id=<? echo $member_id ;?>" title="Contact This Agent" onclick="NewWindow(this.href,'name','450','350','yes');return false"> <img src="icon-email.gif" alt="Contact This Agent" width="60" height="60" hspace="10" border="0"></a> <a href="javascript:window.print()" title="Print This Page"> <img src="icon-print.gif" alt="Print This Page" width="60" height="60" border="0"></a> </div> </div> </div> Can anyone possibly help? Hi I have the following div code for a linked-image <div id="banner"> <a href="/"><img src="/images/header1.jpg"></a> </div> the css for banner is as follow #banner {width : 960px; height : 100px; left : 0; top : 0; position:absolute} but this image is not clickable. I checked the source code for this page and it does show the linked image but the image is not clickable. can anybody shed some light on this? I have coded an image to be clickable, but its not clickable. Code: <div class="quicknav"> <div class="wrapper"> <div class="livesupport"> <a href="http://google.com"><img src="images/phone.png"></a> </div></div></div> CSS code Code:
.livesupport {
position: absolute;
top:15px;
right:-5px;
padding:1px 0 0 0;}
.quicknav {
width: 100%;
height: 0px;
background: #fff;
border-bottom: 1px solid #c8c8c8; }
.quicknav a { color:#9a9a9a; }
.quicknav a:hover { color:#343434; }
.wrapper {
position: relative;
width:977px;
margin: 0 auto; }
Thanks in advance!! Hello All, Im currently stuck trying to get a layer on top of a layer. The image below shows the problem. img68.imageshack.us/img68/5579/picture3cl2.png And here is a link to a code version: thenpcs.com/beta/ Any help greatfully appreciated! Hi, I've been using nested layers in Dreamweaver and wanted to know if it's possible to hide all nested layers of a given layer (say A) by applying a behavior to hide just the layer A to an object? Or is it that in order to hide the nested layers also, I'll need to apply behaviors for each nested layer separately? Also, is there a way to load the content of a layer (such as swf movies, images and other stuff) only when its property is changed to visible (by default the layer is hidden). Thanks, Jayant Hi; I am trying to make couple of layers, 9 to be exact in a page, all boxes are same size, but of course in different location, I have them like this: Quote: .box-1 { width: 200px; height: 155px; border: 1px; border-color: #339900; border-style: groove; position: absolute; top: 10px; left: 10px;} .box-2 { width: 200px; height: 155px; border: 1px; border-color: #339900; border-style: groove; position: absolute; top: 10px; left: 210px;} and so on for the rest of layers. as you notice all layers have some values, and just the positioning are not same, can I have all those unchanged value as a class somehow and have other values in as child or something? I could not find a way around it, to not repeat those values for 9 times when not necessary. thanks for help Hi All, I am looking for some advice really regarding a menu i am trying to incorporate on my site. The menu is set up to be displayed in the left hand column in a website as below: What i want to do is have the menu on the right hand side, and hence the direction of the flyout etc needs to be changed. The CSS used for the menu is: Code: /*---------------------------------*/
/* Vertical Fly-Out Menu Style */
/*---------------------------------*/
.verbar { /* Color of main vertical menubar and border */
color: black;
background-color: #e6e7e6;
border: 1px outset #fdfefd;
}
.vertitem { /* Behaviour of main vertical menu items, leave as is for proper operation */
text-align: left;
white-space: nowrap;
}
.vertitem a { /* Font style, size of main menu items */
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
position: relative;
display: block;
}
.vertitem a:link, .vertitem a:visited { /* Default font style & color of main menu items */
color: #000000;
text-decoration: none;
}
.vertitem a:hover { /* Font style & color, background menu color of main menu item when hovered over */
color: #ffffff;
background-color: #21449c;
text-decoration: none;
}
.vertitem a:active { /* Font style & color, background menu color of main menu item when clicked */
color: #ffff00;
background-color: #666666;
text-decoration: none;
}
.vertsubmenu { /* Behaviour of sub-menu - leave as is for proper operation of submenus */
position: absolute;
left: 0;
top: 0;
visibility: hidden;
}
.vertsubframe { /* Color of submenu item and border */
background-color: #e6e7e6;
border: 2px outset #fdfefd;
position: relative;
display: block;
}
.vertsubitem { /* Behaviour of sub-menu - leave as is for proper operation of submenus */
text-align: left;
white-space: nowrap;
}
.vertsubitem a { /* Font style, size of submenu items */
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
position: relative;
display: block;
}
.vertsubitem a:link, .vertsubitem a:visited { /* Default font style & color of submenu items */
color: #000000;
text-decoration: none;
}
.vertsubitem a:hover { /* Font style & color, background submenu color of submenu item when hovered over */
color: #ffffff;
background-color: #21449c;
text-decoration: none;
}
.vertsubitem a:active { /* Font style & color, background submenu color of submenu item when clicked */
color: #ffff00;
background-color: #666666;
text-decoration: none;
}
.vertsubitem .vertfwdarr, .vertitem .vertfwdarr { /* Positioning of right arrow for submenus */
position: absolute;
top: 5px;
right: 8px;
}
.dmselected { /* Style override for selected category tree */
background-color: #ccc;
font-weight: bold;
}
.verbar .dmselected { /* Style override for selected root category */
background-color: #999;
}
But unfortunately it doesn't mean a lot to me, i have tried changing single variables at a time, but to no avail. At present the structure is as follows: Main Category - Sub category 1 Sub category 2 - I would like it to be: Main Category Sub category 1 - - Sub category 2 If that makes sense? Any advice would be most appreciated. Best Regards Donna http://www.rocksolidhq.com/anmar/index.php I'm having trouble with getting the popout menu to display on top of the content. Does anyone have any idea how to force it to display on top of the content. I also want it to display under the flash animations but I'm sure that it will be forced to do that because of the way Flash works anyway. the stylesheet for this is http://www.rocksolidhq.com/anmar/styles/anmar.css |
|||||||