|
HTML - Ie Hover Links Problem
Hey guys, I'm having crap luck with something I'm trying. A little experiment if you will. So heres the deal, basically I took some footer links on a site that I'm redesigning for a lady. (Also with that said ignore all the other code that you see on the page its work in progress, I'm basically taking old html/tables redoing it into xhtml/divs).
So my problem is if you see the footer links at the bottom of the page first look at them in FF, basically what I did was removed the line under the anchor and I added a nifty little border-bottom instead. Code: #footer-links a:link {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer-links a:visited {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #808080;
}
#footer-links a:hover {
color: #808080;
text-decoration: none;
border-bottom: thin dotted #f1037f;
}
Problem is IE will not show this correctly. So I assume it doesn't like the way I did the border-bottom. So I figured ok thats fine in IE I'll just show it normally. So back in my markup I added this to fix it. Code: <link type="text/css" rel="stylesheet" href="style.css" />
<style>
<!--[if IE ]>
#footer-links a:link {
color: #808080;
text-decoration: underline;
}
<![endif ]-->
<!--[if IE]>
#footer-links a:visited {
color: #808080;
text-decoration: underline;
}
<![endif]-->
<!--[if IE] >
#footer-links a:hover {
color: #f1037f;
text-decoration: underline;
}
<![endif]-->
</style>
I even put this under the link to the style sheet so it would override. Its not working though. Please look and help if you all can. http://www.atlanta-web.com/acm/index.html Thanks, Eric Similar TutorialsMy fault, the padding pushed the div outward covering the links at the bottom. Can someone direct me to a website that shows types of hover links. I am looking to link to a small page when hovered on link in the same page. Thanks in advance, How do I stop the hover link code in my email signature affecting the entire email and links by the recipient? My code (stolen from somewhere on the net): <html> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <style type="text/css" media="all"> a:link {color: #CFD4D8; text-decoration: none;} a:visited {color: #CFD4D8;text-decoration: none;} a:hover {color: #003065; text-decoration: none;} a:active {color: #CFD4D8;text-decoration: none;} </style> </head> <body> <a href="http://www.mywebsite.com">www.mywebsite.com</a> </body> </html> Hello, I have this simple slideshow as can be seen here. It currently contains 2 images. Works good in all browsers except IE9.. as soon as I move my mouse-cursor near it, it freezes! Hope someone can locate the conflicting issue(s), thanks. ps - tested in IE 7, IE 8 and IE 9.. only 9 fails. SOLVED Here are 2 text documents. 1 is CSS and the other is the HTML doc that refers to it. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>TryingHoverClass</titl> <link rel="stylesheet" type="text/css" href="liKS.css"></link> </head> <body> <p>Here is a list</p> <p> <ul style="width:80px; border:1px solid red;"> <li>yahoo <span><a>bob</a></span> </li> <li><a href="http://www.google.com">Google</a></li> </ul> </p> </body> </html> CSS: li:first-child:hover { color:teal; } li span { display:none; } li:first-child:hover span { display:block; position:absolute; background-color:red; border:1px solid yellow; width:50px; height:60px; left:150px; } This is nothing fancy, however when i use firefox to view these files, they act as expected. When i use IE7, nothing <----- comes up in the window. I get a blank page. Where is the error? Thanks, Bo The problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. I made a link in the middle of a paragraph and now the text that follows the links is activated and appears red when I roll over it (as do my links). I thought I ended the links properly but perhaps not. Any advice? Xhtml code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>About</title> <link rel="stylesheet" type="text/css" href="../style.css" /> <meta name="generator" content="BBEdit 8.6" /> </head> <body> <div id="wrap"> <div id="header"> <p id="navbuttons"> <a href="../index.html">home</a> <a href="artists.html">artists</a> <a href="writing.html">writing</a> <a href="about.html"class="current">about</a> <a href="links.html">links</a> <a href="contact.html">contact</a> <a href="listings_news.html">news+listings</a> </div> <!-- end #header --> <div id="main"> <div class="about"> <p>Gray Art seeks to promote an active discussion about contemporary art. We are interested in up and coming artists who are do not yet have representation, and we will feature a new artist every two weeks on our <a href="artists.html"> ARTISTS<a/> page. We like art that is fun, offensive, loud, political and bold and are open to any and all media. Writers and critics (professional or not) are encouraged to submit essays, reviews and rants to be posted in the WRITING section. </p> <br> </div> <!-- end .about --> <div class="about2"> <p> If you would like your art to be featured on our artists page, please send several images as well as a brief description of yourself and your work to artists@grayart.com. If you want to write for Gray Art, please send an a brief description of what you want to write about to writing@grayart.com.</p> </div> <!-- end .about2 --> </div> <!-- end #main --> </div> <!-- end #wrap --> </body> </html> __________ CSS code: /* alignment ------------- */ body {margin:0;padding:0;} #header {position:relative; top:-2.7em;} #wrap {max-width: 900px; min-width: 480px; background:url(header_graphic.jpg) no-repeat; width:90%; margin:20px auto; padding:30px 20px 0 0; } #navbuttons {position:relative;top:2.5em;left:14em} /* index ------------- */ .upnow h1 {margin-left:100px; margin-top:70px;} .table p {margin-left:135px; margin-top:25px;} .photo img {left:7empx;position:relative; margin:20px;margin-top:0px;} .photo img {border:none;} /* artists ------------- */ #sidebar {position:relative;margin-left:75%;width:20%;background:red;padding:4px;align:top; border: 2px dashed black;} .feature h1 {margin-left:100px;margin-top:70px;} /* writing ------------- */ .new h1 {position:relative;margin-top:50px;margin-left:100px;} .essays {position:relative;margin-top:30px;margin-left:100px;} .reviews {position:relative;margin-top:2em;margin-left:100px;} /* about ------------- */ .about p {position:relative;margin-top:100px;margin-left:100px;width:500px;} .about2 p {position:relative;margin-left:100px;width:500px;} /* links ------------- */ .links {text-align:center;margin-left:190px;margin-top:100px;postion:relative;} /* text styles ------------- */ #navbuttons {font-family: "Futura", sans-serif; font-weight:lighter;right:-6em;font-size:14px;color:black;text-transform:uppercase;word-spacing:25px} a:link {color:black;} a:visited {color:black;} a:active, a:focus, a:hover {color:red;} a {text-decoration:none;color:black;hover:none} a:hover.current {color:gray;cursor:default} /* index ------------- */ .upnow h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} .table p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px; white-space:non-wrapping;} /* artists ------------- */ .feature h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} /* writing ------------- */ .new h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 18px;text-transform:uppercase;} .essays h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} .essays p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} .reviews h1 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;text-transform:uppercase;} /* iframe ------------- */ iframe { position: absolute; left: 60%; top: 10em; width: 200px; scrollbar-face-color:##FFFFFF; scrollbar-shadow-color:#d7d7d7; scrollbar-highlight-color:#d7d7d7; scrollbar-3dlight-color:#d7d7d7; Scrollbar-Darkshadow-Color:#d7d7d7; scrollbar-arrow-color:#7a7a7a; scrollbar-track-color:#FFFFFF; } /* about ------------- */ .about p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} .about2 p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} /* links ------------- */ .links h1, h2 {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 16px;text-transform:uppercase;} .links p {font-family: "Futura", sans-serif;font-weight:lighter;font-size: 14px;} Ok i have just started an html tutorial and stumbled accross a brick wall. Its about the links. Every time i click on the links it says File not found. My html code is separated in three .html documents all located in the same folder... The code i am using to add the links is: <div id="navigation"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> Is it this code or? Btw my .html documents are named just like the above code says: index.html, about.html and contact.html. So i dont think that could be the problem... Please help! Hi guys, I am really new to this. Currently designing a site for an engineering firm and have come up against a slight problem. I am designing a table with links to the other pages, when any part of the cell is mousedover the text colour and background image are supposed to change and then revert back to the original when mousedout, thats no problem, but when I add the link in the whole thing goes to pieces. The background image changes but the text colour doesnt, as can be seen from the "relocation" link on the webpage. You can view the page here http://www.omdtestdomain2.co.uk/?id=93637&option=1485 Any help would be greatly appreciated. Thanks Simon I use Blogger but my template is in the classic format so it's HTML not XML and i have a "homepage" sort of thing when you first enter with links to entries, affiliates etc. The problem with my archives is that when someone clicks on a certain month, e.g. January 2010, it jumps back to the "homepage" and you have to click on entries again to view posts from January 2010. Is there any way to fix this? Thanks in advance for any help. Hey guys, Okay so here is what I am trying to do. I am populating a table with some info from a database. The data should look something like this. Recipe Name - Prep Time - Total Time- Rating ============================ test data here 12 mins 15 mins 4.5 test data here 12 mins 15 mins 4.5 test data here 12 mins 15 mins 4.5 test data here 12 mins 15 mins 4.5 The names of the recipe is what I want to create as links so that when the user clicks on a certain RECIPE NAME another page will open showing only the data that goes with that recipe he/she clicked on. So far I have not gotten my code to work correctly, i dunno if i am missing something or doing it all wrong? I am using a while loop to generate all the recipes form the database. Again, i want the names of the recipes to be the links. Please help me!!!! Thanks for your time and help Here is my code: <? while( $row = mysql_fetch_array( $result ) ) { ?> <tr> <a href="ShowRecipe.php?id=<?=$row['id']?>"></a> <td><?=$row['name']?></td> <td><?=$row['preptime']?> mins</td> <td><?=$row['totaltime']?> mins</td> <td><?=$row['rating']?></td> </tr> <? } ?> Hi all, I was wondering if anyone knows how you can force a page to automatically jump to an anchor link on that page...for example so the visitor doesn't have to scroll down everytime. I know I can just put: <a href="http://www.site.com/about.htm#anchor"></a> in the links etc...but is there a way to force a page to jump to the anchor without putting it in the links? Thanks ~Paul (ps. The reason is because my blog is a whole screen down on most screens, so when someone click on an archive etc...they have to scroll down over and over) Hello all, thought maybe someone could help me with a basic problem I'm having. I am fairly new to html and stuff but am off to a start to get a site running. The problem I am having is that the image i am using to link is offset vertically with vspace = 11 in order to line up lines with a border type thing. However, when you click the image link it includes the 11 pixels underneath it from vspace as part of the clickable link. Is there a way to make it so that only the image itself is a link and still add the 11 pixel spacing under it to get the image to line up with the rest of the site? Thanks! Code: <img style="width: 51px; height: 57px;" alt=" " src="images/icon/left.bmp"><a href="main.html"><img style="border: 0px solid; width: 92px; height: 30px;" alt=" " src="images/icon/bt1.bmp" vspace="11"></a> Code is just the part of the 2 images: the first image, and the linked image that I want to line up with the first image. Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones. So my question is: How hard is this to do? Is this something I need to hire someone to do for me? Thanks in advance for any advice! Hello, I am a pretty good coder, But I'm stuck on something I have never tried before.. When I hover the div the text doesn't display (Using display:none unhovered, display:block onhover) The code is below. HTML Code: div.container > div.text {
padding: 5px;
width: 300px;
height: 100%;
display: none;
}
div.container > div.text:hover {
display: block;
}
<div class="container">
<div class="text">
</div>
</div>
When I don't use "display" the text displays but it goes over the width I want it too here is the code alittle like this ... (my bad ascii art) Code: ---------- | xxxxxxxx|xxxxxxx | | ---------- Does anyone have an idea how I could fix this? If I didn't explain clearly I'm sorry its nearly 3am... -Daniel I've made a small icon that I want to show on the left side of each link in my menu when the arrow is over it. Haha, hard to explain In my menu, I dont want the icon on the left side of the links to be visible until the arrow is over the link. What do I do? Put the image tag in front of every link, and use the a: hover (in the stylesheet) to decide when I can see the icon? Is this even possible? It is the same icon that should be shown next to every link. Hi All Below works in Firefox, Safari but not IE6 - Is it possible (We can't upgrade to 7 or above ) Is there any thing I can do ? <head> <style type="text/css"> <!-- .showdata, .showdata ul {padding: 1; margin: 0; list-style:none;} .showdata a {display: inline-table; width: auto px;} .showdata li {float: left; padding: 1px 8px 2px 0px;} .showdata li ul {position: absolute; background: #FFF399; padding: 1px 1px 1px 4px; width: auto px; left: -9999px;} .showdata li:hover ul {left:auto; } .red {color: #ff0000;background-color:#6495ed; align=right} .blue {color: #6495ed;background-color:#c50020; align=right} --> </style> </head> <html> <body> <ul class="showdata"> <li><a href="#">jimmy Smith</a> <ul> <div> <li><a ><table> <tr class="showdata"> <td style="color:red" align=right>country: </td> <td style="color:blue">UK</td> </tr> <tr> <td style="color:red" align=right>Area: </td> <td style="color:blue">England</td> </tr> </table></a></li> </ul> </li> </ul> </td> </tr> </table></div> </body> </html> Hi Guys, Just have a look at http://allfreetemplates.info/view-co...late-1098.html i wanted a effect of bullet which is there on this page. Can we do that effect in HTML without giving <a></a> tag? If yes that how? Thanks in advance... Hi All, After hours of searching, I have yet to find a solution to my problem so I am turning to you all for advice. Here is what I am trying to accomplish - I would like to add an event to a <DIV> to make the background image change when the user mouses over the <DIV>. Further, I would like to turn the entire <DIV> into an <A>, so that no matter where the user clicks in the <DIV> they will be taken to a new page. The two obstacles I am running into are semantics and support. Simply wrapping the <DIV> in an <A> tag does not work because the browser does not interpret <A> as a containing element. Inserting the <A> inside the <DIV> I run into the same problem - the <A> just sits at the top of the page and does not contain anything. As for the event - :hover would suffice if IE5 & 6 supported it for <DIV>, but as we all know this is not the case. Since 60% of users are still running this [expletive] browser, I need to find a workaround. My guess is that there is JavaScript somewhere that will solve my problem - but I have not found anything yet. Can anyone direct me to an article or other resource that offers some info on the aforementioned? Or has anyone done this themselves that can offer a few pointers? Thanks in advance! Hi every body, i have i simple square div : A with 3 other small divs : x, y and z i want when i hover x or y or z the Photo in the div A CHANGES ... in order to do that (Without using Java Script : Only Html + css), i think about using the normal hover, but this time with partitionning the area over witch the mouse hover ... suppose that we have an area divided with horizontal and vertical axes ... and we want that each time the mouse hover some part, the effect occures in some div ... Can i do that without JS (html + css) Thanks to any usefull help |
|||||||