CSS - Ie Not Rendering Link In Layer
I have three overlapping layers:
1. div#banner This is a "background" layer. Code: #banner { position:absolute; width:750px; height:125px; z-index:1; left: 25px; top: 50px; background-image: url(banner_images.js); border: 2px solid #CF1C0D; 2. dev.redseethru#links This is a semi-transparent "color filter" layer. Code: .redseethru { position:absolute; width:150px; height:100px; z-index:3; left: 627px; top: 52px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='images/redseethru.png'); } .redseethru[class] { background-image: url(images/redseethru.png); #links { position:absolute; width:750px; height:25px; z-index:5; left: 27px; top: 152px; border-top: 1px solid #CF1C0D; } 3. div#link1 This is the top layer- it is used for text, and preferably text that is a link. Code: #link1 { position:absolute; width:74px; height:15px; z-index:100; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left:0px; text-align: center; border-right: 1px solid #CF1C0D; Okay, so all preceding code shown is in my .css document. The related code in my php document is: Code: <div id="banner"><script>showImage();</script></div> <div id="redseethru" class="redseethru"></div> <div class="redseethru" id="links"> <div id="link1"><a href="http://www.mysite.com/products/index.php">Products</a></div> <div id="link2">Rentals</div> <div id="link3">Services</div> <div id="link4">Events</div> <div id="link5">About Us </div> </div> The problem is that although the text is being rendered as a link, in Internet Explorer I am not able to click on the link. In Firefox, everything works fine. Is there a way to modify something to have the link be functioning in IE?? Any ideas or resources are much appreciated... thanks! Similar TutorialsHi, I'm having trouble with changing the colour of link, vlink and alink in a webpage layer. I use CSS to set the colours in the main page body tag but am unable to change the colour of the hyperlinks in a layer on the same page to a different set of colours. This causes some of links to be unreadable and i'd like to be able to change the colours of the links in the layer but keep the colours on the main webpage. Anyone got any idea how to do this?. Is CSS the way to go?. The website is written in PHP if that makes any difference. Many thanks for any help. Hi all, below is the code i have in my css, but from some reason my website is showing blue instead of yellow for links can you tell my why this is happening ffff00 is suppose to be yellow, at least that is what Expression web 2 shows. /* Sets the style for unvisited links. */ a, a:link { color: #FFFF00; text-decoration: underline; font-weight: bold; } Do to forum rules i can't post my url, so i know it will be difficult to troubleshoot. but thanks, for all the help you can give me. Bustersnm Just when I think I've finally seen it all, every way these browsers can **** up, there's always one more. This morning I discovered that Netscape 7 / Win does not properly render an a element with image content. My example demonstrates that both IE 6 / Win and Netscape 7 / Win both have issues rendering a elements with text content also. This seems like really basic stuff . . . how, HOW could Netscape 7 not be able to render the a with image content correctly??? (Another good question is why this forum doesn't allow you to upload HTML files . . . WTF?? -- you'll have to rename the file to .html) 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 Hello, I am using ASP.NET to create a web application. I HAVE to use a master page which means that I do not have complete control over the rendering. The trick is, the master page defines a menu at the top of the page. I need to create a table that dynamically fills the contents of the REMAINDER of the screen. If there is any overflow, I want to scroll the contents. Does anyone know how I can have the table fill the REMAINDER of the screen? I can nest DIVs and such once I have that outer table. Thank you! Crystal Hi guys, pretty new to CSS layout, and recently created a site for my girlfriend. I used 960 grid system to handle my layout css, and it renders perfectly in safari/FF/IE7+... after I installed IE Tester, i realized that IE6 wasnt rendering properly. The menu and z-index stuff arent appearing correctly. If anyone can have a quick look and let me know where my code is causing issues it would be a great help. I'm not allowed to post the URL, as im a new user, but I guess I can send through PM if you want to have a look? Thanks a bunch. Greetings everyone! I've been working on the following page for a couple of days now, and it looks fine in Safari and Firefox, but all my CSS fail in IE. I don't know what the problem is. Feel free to view the page at the following url http://www.netunification.com/demo/ I spoke with a friend and he speculates IE is having problems with the float command. I'm not so sure of this because I used the same CSS techniques while building the following site (http://www.the904.com/demo/). The904 page renders perfectly in IE and I can't figure out what the difference is between the pages. I thought I used the same concept with both pages. I've been trouble shooting the problem for a couple of days now, but I haven't had any luck. Can please someone take a look at my net u page (http://www.netunification.com/demo/) and suggest a solution Thanks in advance for any/all assistance. Your time and effort is greatly appreciated! Walt I have a webpage located at http://www.niu-sae.com I have a drop down menu image, in a div layer that will pop up when you roll over the first link "Active Chapter". First of all the positioning is all weird... when I am at full screen I have to set the div left at 285... even though it is really only about 116. any idea what I am doing wrong? Second even when I get it lined up... the way it is now... it changes if you resize the window. HELP. please. Well, I can't post links so this is going to be hard as hell to type out. I have a layer within that page that I want in a certain position, yet when I move the width of my browser the layer does not stay where I want it. Obviousely, this does not make any sense because its something you have to see. I checked the rules for the forums and I can't find where it states anything about URLs, if someone would be so kind to show me, I'd appericiate it. Not that it matters witout seeing it on the page but my code for this layer is: Code: <div id="Layer1" style="position:absolute; left:848px; top:85px; width:118px; height:167px; z-index:1"> <div class="mltop">schedule +4hrs </div> <p>00:00 - Music <br> 01:00 - Music <br> 02:00 - Music <br> 03:00 - <a href="">BRR</a></p> <p><b>Current time: 00:00</b><br> Times in CST/CDT <br> </p> </div> Hi, I'm trying to set up a side menu, which appears on the right-hand side of the page. Code: <style type="text/css"> #SideMenu { color: #639; background-color: #FBFBFB; position: absolute; top: 275px; left: 630px; width: 190px; height: 250px; } </style> However, when the browser window is resized, the layer then obstructs the main content (by floating over it), and does not remain in its place as it should. This is how it should look like:: However, as the browser is resized, the layer does this: I'm tring to remedy this using CSS only, so please send any suggestions to me. The code for the sidebar is: Code: <div id="SideMenu"> <p>Side Content. I like to eat food.</p> </div> Any ideas guys?! I need to position a 200px high by 300px wide layer in the center of the page. does anyone know a simple way to do this, i have thought about using JS to calculate the width of the page, take off the 200px, and halve it, but that seems like overkill, isnt there a simple CSS command? Thanks Xaphan Hi! Does anybody have some great link or book advice about all the properties of the DIV and/or LAYER - tags? Inspiring examples with javascript to this are also welcome. I will use it to build advanced layer functionality. Regards Bjorn 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; } I have a web page containing 3 layers. There are placed side by side with absolute positions. The middle layer contains a image with a fixed size. Now I have to change the image based on user's selection, so it is no longer fixed sized. I want to let the third (right) layer to re-adjust its position when image is smaller. How to make it work? This is my first time working with layers, please help. Thanks. Matt Hi. Any help would be appreciated. I am trying to cut down on my image sizes on my website: http://toptiertemplates.com, but i am having a few difficulties. I have this table which was created in photoshop which is off to the side. I would like to take just a slice of the table and repeat the image the full length of the table's original length. The page is written by placing everything with divs. I know how to set the image as a background and all and repeat it, however, when i do so, it replaces my website's background and just shows up as a white space. So i am wondering if I have to use layers of some sort or anything else. I'd appreciate some help. Thanks. 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! 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 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 |